/*
  style.css – visual identity for The Archives

  The aesthetic pulls from early‑web nostalgia and digital horror motifs.  It
  references the chaotic, clashing colours and simple layouts of old sites
  described by the Webcore aesthetic (animated GIFs, neon backgrounds, underlined
  links, glitter graphics and clip art)【563293165544524†L270-L274】 while also nodding
  to Digital Horror’s fondness for low‑quality visuals and Comic Sans【998919418146764†L319-L324】.
  Colours are deliberately saturated and unbalanced; fonts are “wrong.”
*/

body {
    margin: 0;
    padding: 0;
    /* Use Comic Sans and Courier to evoke early‑web and digital horror vibes */
    font-family: "Comic Sans MS", "Courier New", monospace;
    background-color: #0a0c10;
    /* Tile the noise texture for a gritty backdrop */
    background-image: url('noise.png');
    background-size: 512px 512px;
    color: #e4e4e4;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
}

header {
    background: rgba(3, 3, 7, 0.8);
    border-bottom: 2px solid #00ffff;
    text-align: center;
    padding: 20px;
}

header h1 {
    margin: 0;
    font-size: 3em;
    color: #00e1ff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

header .tagline {
    margin: 10px 0 0;
    font-size: 0.9em;
    color: #999;
}

nav {
    background: rgba(5, 5, 15, 0.8);
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #222;
}

nav a {
    color: #66ccff;
    text-decoration: underline;
    margin: 0 10px;
    font-size: 0.9em;
}

nav a:hover {
    color: #ff66ff;
}

.container {
    max-width: 900px;
    margin: 30px auto;
    background: rgba(10, 10, 20, 0.8);
    border: 1px solid #222;
    padding: 20px;
}

.container h2 {
    margin: 0 0 10px;
    color: #00ccff;
    font-size: 1.5em;
    border-bottom: 1px dashed #444;
    padding-bottom: 5px;
}

.post {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dotted #333;
}

.post h3 {
    margin: 0 0 5px;
    font-size: 1.1em;
}

.post h3 a {
    color: #ff99cc;
    text-decoration: none;
}

.post h3 a:hover {
    text-decoration: underline;
}

.meta {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 10px;
}

footer {
    background: rgba(3, 3, 7, 0.8);
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 0.8em;
    border-top: 2px solid #00ffff;
}

.footer-note {
    margin-top: 5px;
    color: #444;
    font-style: italic;
}

/* About section styles */
.about {
    margin-bottom: 30px;
    background: rgba(15, 15, 25, 0.6);
    padding: 15px;
    border: 1px solid #333;
}
.about h2 {
    font-size: 1.3em;
    color: #99ccff;
    margin-top: 0;
}
.about p {
    font-size: 0.85em;
    line-height: 1.4;
    margin: 0 0 10px;
}

/* Glitchy title effect – layering pseudo elements and jitter via JS */
.glitch {
    position: relative;
    display: inline-block;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.glitch::before {
    left: 2px;
    text-shadow: -2px 0 magenta;
    animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch::after {
    left: -2px;
    text-shadow: -2px 0 cyan;
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
    0% { clip: rect(2px, 9999px, 10px, 0); }
    20% { clip: rect(12px, 9999px, 24px, 0); }
    40% { clip: rect(8px, 9999px, 16px, 0); }
    60% { clip: rect(14px, 9999px, 20px, 0); }
    80% { clip: rect(4px, 9999px, 18px, 0); }
    100% { clip: rect(6px, 9999px, 22px, 0); }
}
@keyframes glitch-anim-2 {
    0% { clip: rect(12px, 9999px, 20px, 0); }
    20% { clip: rect(4px, 9999px, 18px, 0); }
    40% { clip: rect(6px, 9999px, 22px, 0); }
    60% { clip: rect(2px, 9999px, 10px, 0); }
    80% { clip: rect(14px, 9999px, 24px, 0); }
    100% { clip: rect(8px, 9999px, 16px, 0); }
}