/* BASE OLD WEB CHAOS RESET */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Courier New', monospace;
    background-color: #f4e0d0;
    color: #5a2a1c;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    background-image: url('old-paper-noise.png'); /* pixelated texture */
    background-size: cover;
    line-height: 1.4;
}

/* HEADER */
.header-weird {
    text-align: center;
    border-bottom: 5px double #c93f3f;
    padding: 15px;
    background-color: #fff0e0;
}
.header-weird h1 {
    font-size: 3rem;
    color: #872f1c;
    text-transform: uppercase;
    text-shadow: 2px 2px #f9d9d0;
    animation: flicker 2s infinite;
}

/* NAVIGATION */
.nav-weird a {
    margin: 0 8px;
    color: #a12a1c;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #d94f3d;
    padding: 2px 4px;
    transition: all 0.2s;
}
.nav-weird a:hover {
    background-color: #d94f3d;
    color: #fff0e0;
    transform: rotate(-2deg);
}

/* KEYFRAME FLICKER */
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 22%, 24%, 55% { opacity: 0.6; }
}

/* WOLF SECTION */
.wolf-weird {
    display: flex;
    align-items: center;
    gap: 20px;
    border: 2px dashed #872f1c;
    padding: 10px;
}

.wolf-weird-img { 
  width: 140px; 
  border: 3px solid #5a2a1c;
}

.wolf-caption {
    font-weight: bold;
    text-transform: uppercase;
    color: #c93f3f;
}

/* LINKS */
.links-weird ul {
    list-style: none;
}
.links-weird li {
    margin: 12px 0;
}
.links-weird a {
    color: #872f1c;
    text-decoration: underline wavy;
    font-size: 1.1rem;
}

/* SCRAPBOOK GRID */
.scrap-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.scrap-weird {
    width: 180px;
    border: 3px solid #c93f3f;
    cursor: pointer;
    transition: all 0.2s;
}
.scrap-weird:hover {
    transform: rotate(-5deg) scale(1.1);
    filter: contrast(1.5) hue-rotate(20deg);
    border-color: #872f1c;
}

/* FOOTER */
.footer-weird {
    text-align: center;
    font-size: 0.9rem;
    color: #872f1c;
    border-top: 4px dotted #d94f3d;
    padding-top: 15px;
}

/* EASTER EGGS */
.easter-egg {
    display: none;
    color: #ff0000;
    font-weight: bold;
    font-size: 1.3rem;
    margin-top: 10px;
}

/* RANDOM GLITCH EFFECTS */
@keyframes glitch {
    0% { clip: rect(0, 9999px, 0, 0); transform: translate(0);}
    20% { clip: rect(10px, 9999px, 50px, 0); transform: translate(-2px);}
    40% { clip: rect(20px, 9999px, 40px, 0); transform: translate(2px);}
    60% { clip: rect(30px, 9999px, 60px, 0); transform: translate(-1px);}
    80% { clip: rect(0px, 9999px, 50px, 0); transform: translate(1px);}
    100% { clip: rect(10px, 9999px, 60px, 0); transform: translate(0);}
}