@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');



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 */

    /* optional flicker – a subtle opacity pulse */
    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-weight: <weight>;
    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 {
    margin-left: 150px;
    margin-right: 150px;
    margin-top: 100px;
}

.posts img {
    max-width: 400px;
}

.blogtitle {
    color: #755D28;
}

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

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

h2 {
    font-size: 20px;
    font-family: monospace;
    color: #85D692;
    text-shadow:
        0 0 1px #547A4B,
        0 0 6px #547A4B;
}

.article {
    /* Take up most of the horizontal space, but never exceed 900 px */
    width: 100%;               /* fallback for very narrow viewports */
    max-width: 1000px;         /* feel free to adjust – 800‑1000 px works well */
    margin-left: auto;
    margin-right: auto;

    /* a little breathing room on the sides for tiny screens */
    padding-left: 1rem;
    padding-right: 1rem;
}

/* -------------------------------------------------
   Fine‑tune for specific breakpoints
   – On ultra‑wide screens we keep the article narrower
   – On very small phones we give it a bit more padding
------------------------------------------------- */
@media (min-width: 1200px) {
    .article { max-width: 1000px; }   /* wider but still bounded */
}

@media (max-width: 480px) {
    .article {
        width: 95%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
.notes {
    margin-top: 30px;
}

.posthold {
    display: flex;
}

.back a {
    font-family: monospace;
    font-size: 14px;
    text-decoration: none;
    margin-left: 20px;
    color: #547A4B;
    text-shadow:
        0 0 1px  #71AD7A;
}

.back 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;
}

.imgaeco {
    
}

.imageco img {
    max-width: 500px;
    margin-top: 60px;
    margin-left: 30px;
}

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

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

@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;
}

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


.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 */
}

.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 6px   #1f6fff,
        0 0 12px  #1f6fff,
        0 0 24px  #5da9ff,
        0 0 48px  #5da9ff,
        0 0 80px  #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;
}

.bigpicture img {
    max-width: 1000px;
    padding-top: 20px;
}


.bigpicture {
    max-width: 1000px;
    padding-top: 20px;
}