@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap');


html {
    /* keep your existing background settings… */
    background-color: #141414;
    background-attachment: fixed;
    height: 100%;

    /* create a stacking context for the pseudo‑element */
    position: relative;
    overflow-x: hidden;          /* prevents a tiny horizontal scrollbar */
}

/* The CRT overlay */
html::before {
    content: "";
    position: absolute;
    inset: 0;                     /* fill the whole viewport */
    pointer-events: none;         /* clicks pass through */
    z-index: -1;                  /* stay behind everything */

    /* faint scan‑lines – a repeating linear gradient */
    background-image:
        repeating-linear-gradient(
            0deg,                     /* horizontal lines */
            rgba(0,0,0,0) 0px,
            rgba(0,0,0,0) 1px,
            rgba(0,0,0,0.04) 1px,    /* thin dark line */
            rgba(0,0,0,0.04) 2px
        );

    /*  overall phosphor‑glow / contrast tweak */
    background-color: rgba(0, 0, 0, 0.02);   /* very light tint */
    mix-blend-mode: overlay;                /* blends with the page colours */
    animation: crtFlicker 8s infinite ease-in-out;
}

/* -----------------------------------------------------------------
   Flicker animation 
   ----------------------------------------------------------------- */
@keyframes crtFlicker {
    0%, 100% { opacity: 0.98; }
    45%, 55% { opacity: 0.94; }   /* brief dip → “scan‑line jitter” */
}

.mainbody {
    background: #141414;    
    border-radius: 2px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    border: 2px solid #547A4B;  
    box-shadow:
        0 0 4px 1px rgba(46,139,87,0.6),   /* outer soft glow */
        inset 0 0 6px rgba(46,139,87,0.4);    
    margin-left: 10%;
    margin-right: 10%;
    max-width: 1100px;
    margin: 2rem auto;
    margin-top: 0.5em;
    padding: 1.5rem;
    overflow: auto;
    box-sizing: border-box;
}

h1 {
    font-family: "Doto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "ROND" 0;

    color: #eaf4ff; /* slightly cool white */
    text-align: center;

    /* Electric blue neon glow */
    text-shadow:
        0 0 3px   #1f6fff,
        0 0 6px   #1f6fff,
        0 0 12px  #1f6fff,
        0 0 24px  #5da9ff,
        0 0 48px  #5da9ff,
        0 0 80px  #5da9ff;

    animation: bluePulse 2.5s infinite ease-in-out;
}

/* Pulsing keyframes */
@keyframes bluePulse {
    0%, 100% {
        text-shadow:
            0 0 3px   #1f6fff,
            0 0 6px   #1f6fff,
            0 0 12px  #1f6fff,
            0 0 24px  #5da9ff,
            0 0 48px  #5da9ff,
            0 0 80px  #5da9ff;
    }
    50% {
        text-shadow:
            0 0 5px   #1f6fff,
            0 0 10px  #1f6fff,
            0 0 20px  #1f6fff,
            0 0 35px  #5da9ff,
            0 0 70px  #5da9ff,
            0 0 110px #5da9ff;
    }
}

.neon-flicker {
    animation: neonFlicker 3.5s infinite;
}

/* Flicker keyframes */
@keyframes neonFlicker {
    /* ON */
    0%, 18%, 22%, 55%, 100% {
        color: #eaf4ff;
        text-shadow:
            0 0 3px   #1f6fff,
            0 0 6px   #1f6fff,
            0 0 12px  #1f6fff,
            0 0 24px  #5da9ff,
            0 0 48px  #5da9ff,
            0 0 80px  #5da9ff;
    }

    /* OFF */
    20%, 21%, 23%, 54% {
        color: #cfd8e3;
        text-shadow: none;
    }
}


.header {
    display: flex;
    margin-left: 20px;
}

.navigation {
    display: flex;
    margin: 32px;
    gap: 30px;

}

ul.navigation {
    list-style-type: none;
}

ul a {
    font-family: monospace;
    font-size: 14px;
    text-decoration: none;
    color: #547A4B;
    text-shadow:
        0 0 1px #547A4B,
        0 0 6px #547A4B;
        
}

ul a:hover {
    color: #eaf4ff;
    text-shadow:
       0 0 3px   #1f6fff,
        0 0 6px   #1f6fff,
        0 0 12px  #1f6fff,
        0 0 24px  #5da9ff,
        0 0 48px  #5da9ff,
        0 0 80px  #5da9ff;
}

.posts {
     display: flex;          /* keeps the flex layout for the inner items */
    gap: 50px;
    margin: 100px auto;
     max-width: calc(2 * 400px + 50px);
}

.posts img {
    display: block;
    width: 400px;
    height: auto;
    object-fit: contain;
}

.post img {
    max-width: 100%;          /* don’t let it grow beyond its own width */
}

.blogtitle {
    color: #85D692;
    text-shadow:
        0 0 1px #85D692,
        0 0 8px #85D692,
}

.individual a {
    text-decoration: none;
    color: #1C1C1C;
}

.individual {
    max-width: 400px;
    color: #1C1C1C;  
}

h2 {
    color: #962929;
}

@media (max-width: 600px) {
    .posts {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .posts img {
        max-width: 100%;
    }
}



footer.img-credit { padding-left: 1rem; padding-right: 1rem; }

footer.img-credit::before {
    content: "📸 ";
}

@media (prefers-color-scheme: dark) {
    footer.img-credit {
        color: #ddd;
        background: rgba(0,0,0,0.35);
        border-top-color: rgba(255,255,255,0.15);
    }
}

.img‑credit {
    font-family: monospace;
    font-size: 14px;
    color: #32402F;
    text-shadow:
        0 0 1px  #71AD7A;
}

ul {
    list-style-type: none; 
}

.datepost {
    margin-top: -20px;
    color: #547A4B;
    text-shadow:
        0 0 1px #547A4B,
        0 0 6px #547A4B;
    
}

.bar {
    border: none;               /* Remove the default 3‑D border */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid #547A4B;  
    box-shadow:
        0 0 4px 1px rgba(46,139,87,0.6),   /* outer soft glow */
        inset 0 0 6px rgba(46,139,87,0.4); 
}

p {
    font-family: monospace;
    font-size: 14px;
    color: #547A4B;
    text-shadow:
        0 0 1px #547A4B,
        0 0 6px #547A4B;
}

.topicleader {
    font-family: monospace;
    color: #eaf4ff;
    text-shadow:
       0 0 3px   #1f6fff,
        0 0 6px   #1f6fff,
        0 0 12px  #1f6fff,
        0 0 24px  #5da9ff,
        0 0 48px  #5da9ff,
        0 0 80px  #5da9ff;
}

.topicleader2 {
    font-family: monospace;
    color: #eaf4ff;
    text-shadow:
       0 0 3px   #1f6fff,
        0 0 6px   #1f6fff,
        0 0 12px  #1f6fff,
        0 0 24px  #5da9ff,
        0 0 48px  #5da9ff,
        0 0 80px  #5da9ff;
    text-align: center;
}


.ticker-strip {
    margin: auto;                     /* stays in normal flow */
    width: 1100px;
    height: 2.2rem;                   /* tall enough for the text */
    align-content: center;                 /* pulls it up against the body border */
    overflow: hidden;                   /* hides the part of the text that moves out of view */
    background: transparent;            /* keep the page background */
}

/* The glowing text itself */
.ticker-text {
    display: inline-block;
    white-space: nowrap;                /* forces the text onto a single line */
    font-family: monospace;
    font-size: 1rem;
    color: #71AD7A;                     /* same neon‑green you use elsewhere */
    text-shadow:
        0 0 2px #71AD7A,
        0 0 6px #71AD7A,
        0 0 12px #71AD7A;
    animation: tickerScroll 25s linear infinite;
}

/* -------------------------------------------------
   Scrolling animation – right‑to‑left
   ------------------------------------------------- */
@keyframes tickerScroll {
    0%   { transform: translateX(100%); }   /* start just outside the right edge */
    100% { transform: translateX(-100%); }  /* finish just outside the left edge */
}

.dalynote p {
    margin-top: -6px;
    color: #2E4229;
    text-shadow:
        0 0 1px #2E4229,
        0 0 6px #2E4229;
}

.imageofday img{
    display: block;               /* works for <img>, <div>, etc. */
    max-width: 100%;              /* don’t overflow the viewport */
    margin: 0 auto; 
    margin-top: -20px;              /* horizontal centering */
    padding: 20px;                /* adjust the value to suit your design */
    box-sizing: border-box; 
}

.imageofday p {
    margin-top: 0;
    padding-left: 20px;
}

.titleimage {
    text-align: center;
}

.links {
    display: block; 
    max-width: 100%;              /* don’t overflow the viewport */
    margin: 0 auto; 
    text-align: center; 
}

.links a {
    font-family: monospace;
    font-size: 14px;
    text-decoration: none;
    color: #547A4B;
    text-shadow:
        0 0 1px #547A4B,
        0 0 6px #547A4B;
     text-align: center; 
}

.links a:hover {
    color: #eaf4ff;
    text-shadow:
       0 0 3px   #1f6fff,
        0 0 6px   #1f6fff,
        0 0 12px  #1f6fff,
        0 0 24px  #5da9ff,
        0 0 48px  #5da9ff,
        0 0 80px  #5da9ff;
}

.feeddivider {
    border: none;               /* Remove the default 3‑D border */
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
    border: .1px solid #283824;  
    box-shadow:
        0 0 4px 1px rgba(46,139,87,0.6),   /* outer soft glow */
        inset 0 0 6px rgba(46,139,87,0.4); 
    width: 700px;
}

.nav-toggle {
    display: none;                     /* hidden on large screens */
    background: transparent;
    border: none;
    font-size: 2rem;
    color: #eaf4ff;                    /* neon‑blue matches your headings */
    cursor: pointer;
    margin-left: auto;                 /* push it to the right side */
}

/* Wrapper for the nav list – we’ll toggle its visibility */
.nav-wrapper {
    display: block;                    /* default on large screens */
}

/* -------------------------------------------------
   Mobile layout (≤600 px)
   ------------------------------------------------- */
@media (max-width: 600px) {

    /* Show the hamburger button */
    .nav-toggle {
        display: block;
    }

    /* Hide the navigation list initially */
    .nav-wrapper {
        max-height: 0;                 /* collapse */
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    /* When the menu is opened (JS adds .open) */
    .nav-wrapper.open {
        max-height: 500px;             /* big enough for the list */
        transition: max-height 0.4s ease-in;
    }

    /* Stack the links vertically */
    .navigation {
        flex-direction: column;
        gap: 0.5rem;
        margin: 1rem 0;
    }

    .navigation li {
        text-align: center;
    }
}

.nav-wrapper.open a {
    color: #eaf4ff;               /* bright neon */
    text-shadow:
        0 0 3px   #1f6fff,
        0 0 5px   #1f6fff,
        0 0 11px  #1f6fff,
        0 0 16px  #5da9ff;
}


.nav-toggle.glow {
    /* Keep the original size and colour */
    font-size: 2rem;
    color: #eaf4ff;               /* bright neon‑blue (base) */

    /* Add a green neon outline */
    text-shadow:
        0 0 3px   #71AD7A,   /* faint outer glow */
        0 0 6px   #71AD7A,
        0 0 12px  #71AD7A,
        0 0 24px  #71AD7A,
        0 0 48px  #71AD7A,
        0 0 80px  #71AD7A;
}

/* Optional: make the glow pulse a little */
@keyframes glowPulse {
    0%, 100% {
        text-shadow:
            0 0 3px   #71AD7A,
            0 0 6px   #71AD7A,
            0 0 12px  #71AD7A,
            0 0 24px  #71AD7A,
            0 0 48px  #71AD7A,
            0 0 80px  #71AD7A;
    }
    50% {
        text-shadow:
            0 0 5px   #71AD7A,
            0 0 10px  #71AD7A,
            0 0 20px  #71AD7A,
            0 0 35px  #71AD7A,
            0 0 70px  #71AD7A,
            0 0 110px #71AD7A;
    }
}

/* Apply the pulse when the menu is closed (or always, if you prefer) */
.nav-toggle.glow {
    animation: glowPulse 3.5s infinite ease-in-out;
}

.topics1 {
    margin-top: 30px;
}

.feedpost {
    margin-left: 200px;
    margin-right: 200px;
}