/* ============================================
   HOT PRESIDENT 2028 - STYLESHEET
   Best viewed in Netscape Navigator 4.0
   at 800x600 resolution
   ============================================ */

/* RESET - minimal, like the 90s */
* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Comic Sans MS', 'Comic Sans', cursive, sans-serif;
    color: #FFFF00;
    text-align: center;
    overflow-x: auto; /* horizontal scrolling is a FEATURE */
}

/* ============================================
   BLINK ANIMATION (RIP <blink> tag)
   ============================================ */
.blink {
    animation: blinker 1s step-start infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

/* ============================================
   MAIN WRAPPER - 800px, centered, like god intended
   ============================================ */
.main-wrapper {
    width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* ============================================
   RAINBOW TEXT
   ============================================ */
.rainbow span:nth-child(7n+1) { color: #FF0000; }
.rainbow span:nth-child(7n+2) { color: #FF7F00; }
.rainbow span:nth-child(7n+3) { color: #FFFF00; }
.rainbow span:nth-child(7n+4) { color: #00FF00; }
.rainbow span:nth-child(7n+5) { color: #0000FF; }
.rainbow span:nth-child(7n+6) { color: #4B0082; }
.rainbow span:nth-child(7n+7) { color: #9400D3; }

/* ============================================
   WORDART-STYLE HEADERS
   ============================================ */
.wordart {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 4px;
    -webkit-text-stroke: 2px #000;
    text-shadow:
        3px 3px 0px #FF0000,
        6px 6px 0px #0000FF;
    color: #FFD700;
    text-transform: uppercase;
    padding: 10px;
}

.wordart-flame {
    font-family: Impact, 'Arial Black', sans-serif;
    font-size: 56px;
    font-weight: bold;
    letter-spacing: 6px;
    background: linear-gradient(to top, #FF0000, #FF6600, #FFFF00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(3px 3px 2px #000);
    text-transform: uppercase;
    animation: flame-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes flame-pulse {
    from { filter: drop-shadow(3px 3px 2px #FF0000); }
    to { filter: drop-shadow(3px 3px 8px #FF6600); }
}

/* ============================================
   BEVELED 3D BUTTONS
   ============================================ */
.button-3d {
    display: inline-block;
    padding: 8px 20px;
    margin: 5px;
    font-family: 'Comic Sans MS', cursive;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background: #C0C0C0;
    border-top: 3px solid #FFFFFF;
    border-left: 3px solid #FFFFFF;
    border-bottom: 3px solid #808080;
    border-right: 3px solid #808080;
    text-decoration: none;
    cursor: pointer;
}

.button-3d:hover {
    background: #D4D4D4;
}

.button-3d:active {
    border-top: 3px solid #808080;
    border-left: 3px solid #808080;
    border-bottom: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
}

.button-3d-gold {
    display: inline-block;
    padding: 15px 40px;
    margin: 10px;
    font-family: 'Comic Sans MS', cursive;
    font-size: 20px;
    font-weight: bold;
    color: #000;
    background: linear-gradient(to bottom, #FFD700, #DAA520, #FFD700);
    border-top: 4px solid #FFFACD;
    border-left: 4px solid #FFFACD;
    border-bottom: 4px solid #8B6914;
    border-right: 4px solid #8B6914;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 1px 1px 0 #FFF;
}

.button-3d-gold:hover {
    background: linear-gradient(to bottom, #FFEC8B, #EEC900, #FFEC8B);
}

/* ============================================
   LINK STYLES (classic web)
   ============================================ */
a:link { color: #0000FF; }
a:visited { color: #800080; }
a:hover { color: #FF0000; text-decoration: underline overline; }
a:active { color: #FF0000; }

/* ============================================
   MARQUEE STYLING
   ============================================ */
marquee {
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold;
    font-size: 18px;
    padding: 8px 0;
}

.marquee-top {
    background: #FF0000;
    color: #FFFFFF;
    border-top: 3px solid #FFD700;
    border-bottom: 3px solid #FFD700;
    font-size: 20px;
    padding: 10px 0;
}

.marquee-breaking {
    background: #000000;
    color: #FF0000;
    font-family: 'Courier New', monospace;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 0;
    border-top: 2px solid #FF0000;
    border-bottom: 2px solid #FF0000;
}

/* ============================================
   TABLE STYLES
   ============================================ */
.retro-table {
    border: 3px ridge #808080;
    background: #000080;
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

.retro-table th {
    background: #000080;
    color: #FFD700;
    font-family: 'Comic Sans MS', cursive;
    font-size: 16px;
    padding: 8px;
    border: 2px ridge #808080;
}

.retro-table td {
    background: #000033;
    color: #00FF00;
    font-family: 'Comic Sans MS', cursive;
    padding: 6px;
    border: 1px solid #333366;
}

.retro-table tr:nth-child(even) td {
    background: #000066;
}

/* ============================================
   VISITOR COUNTER
   ============================================ */
.visitor-counter {
    display: inline-block;
    background: #000000;
    border: 3px inset #808080;
    padding: 5px 15px;
    margin: 10px;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #00FF00;
    letter-spacing: 3px;
}

/* ============================================
   BADGE ROW
   ============================================ */
.badge-row {
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    width: 88px;
    height: 31px;
    line-height: 31px;
    font-size: 8px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #FFF;
    border: 1px solid #333;
    overflow: hidden;
}

.badge-netscape {
    background: linear-gradient(to bottom, #006600, #003300);
    color: #FFFFFF;
    font-size: 7px;
}

.badge-notepad {
    background: linear-gradient(to bottom, #0000AA, #000066);
    color: #FFFF00;
    font-size: 7px;
}

.badge-y2k {
    background: linear-gradient(to bottom, #FF0000, #990000);
    color: #FFFFFF;
    font-size: 8px;
}

.badge-hotsite {
    background: linear-gradient(to bottom, #FFD700, #FF8C00);
    color: #000;
    font-size: 7px;
    animation: badge-glow 1s ease-in-out infinite alternate;
}

@keyframes badge-glow {
    from { box-shadow: 0 0 5px #FFD700; }
    to { box-shadow: 0 0 15px #FF6600; }
}

.badge-geocities {
    background: linear-gradient(to bottom, #333399, #000066);
    color: #FFFFFF;
    font-size: 7px;
}

/* ============================================
   WEBRING
   ============================================ */
.webring {
    border: 2px ridge #808080;
    background: #333333;
    color: #FFFFFF;
    padding: 8px;
    margin: 10px auto;
    width: 500px;
    font-family: 'Arial', sans-serif;
    font-size: 12px;
}

.webring a {
    color: #00FFFF;
    text-decoration: none;
}

.webring a:hover {
    color: #FFFF00;
    text-decoration: underline;
}

/* ============================================
   HR DIVIDERS
   ============================================ */
hr.flame-divider {
    border: none;
    height: 20px;
    background: linear-gradient(to right, transparent, #FF0000, #FF6600, #FFFF00, #FF6600, #FF0000, transparent);
    margin: 15px 0;
}

hr.flag-divider {
    border: none;
    height: 15px;
    background: repeating-linear-gradient(
        to right,
        #FF0000 0px, #FF0000 30px,
        #FFFFFF 30px, #FFFFFF 60px,
        #0000FF 60px, #0000FF 90px
    );
    margin: 15px 0;
}

hr.star-divider {
    border: none;
    height: 3px;
    background: #FFD700;
    margin: 15px 0;
    position: relative;
}

/* ============================================
   ANIMATED CSS "GIFS"
   ============================================ */

/* Spinning star */
.spin-star {
    display: inline-block;
    animation: spin 2s linear infinite;
    font-size: 24px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Pulsing flame */
.pulse-flame {
    display: inline-block;
    animation: pulse 0.5s ease-in-out infinite alternate;
    font-size: 24px;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.3); }
}

/* Bouncing arrow */
.bounce-arrow {
    display: inline-block;
    animation: bounce 0.6s ease-in-out infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}

/* Waving flag effect */
.wave-flag {
    display: inline-block;
    animation: wave 1s ease-in-out infinite;
    font-size: 32px;
}

@keyframes wave {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* "Under Construction" animated stripes */
.under-construction {
    background: repeating-linear-gradient(
        45deg,
        #FFD700,
        #FFD700 10px,
        #000000 10px,
        #000000 20px
    );
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    padding: 15px;
    text-shadow: 2px 2px 0 #000;
    border: 3px solid #FF0000;
    animation: construction-scroll 2s linear infinite;
    background-size: 28px 28px;
}

@keyframes construction-scroll {
    from { background-position: 0 0; }
    to { background-position: 28px 0; }
}

/* ============================================
   CLASSIFIED / DOSSIER STYLING
   ============================================ */
.classified-stamp {
    display: inline-block;
    border: 4px double #FF0000;
    color: #FF0000;
    font-family: Impact, sans-serif;
    font-size: 28px;
    letter-spacing: 8px;
    padding: 5px 20px;
    transform: rotate(-5deg);
    opacity: 0.8;
    text-transform: uppercase;
}

.dossier-frame {
    border: 4px double #8B7355;
    background: #FFFEF0;
    color: #333;
    padding: 15px;
    margin: 15px auto;
    width: 350px;
    font-family: 'Courier New', monospace;
    text-align: left;
    position: relative;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

.dossier-frame::before {
    content: 'CLASSIFIED';
    position: absolute;
    top: 10px;
    right: 10px;
    color: #FF0000;
    font-family: Impact, sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    transform: rotate(15deg);
    opacity: 0.5;
    border: 2px solid #FF0000;
    padding: 2px 8px;
}

/* ============================================
   GUESTBOOK STYLES
   ============================================ */
.guestbook-entry {
    border: 2px solid #008000;
    margin: 10px auto;
    padding: 10px;
    width: 600px;
    text-align: left;
    font-family: 'Comic Sans MS', cursive;
    font-size: 14px;
}

.guestbook-entry:nth-child(odd) {
    background: #003300;
    color: #00FF00;
}

.guestbook-entry:nth-child(even) {
    background: #002200;
    color: #ADFF2F;
}

.guestbook-entry .author {
    font-weight: bold;
    color: #FFD700;
    font-size: 16px;
}

.guestbook-entry .location {
    font-style: italic;
    color: #FFA500;
    font-size: 12px;
}

.guestbook-entry .date {
    font-size: 10px;
    color: #808080;
    font-family: 'Courier New', monospace;
}

/* ============================================
   FORM STYLES (90s edition)
   ============================================ */
.retro-form input[type="text"],
.retro-form textarea,
.retro-form select {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    background: #FFFFFF;
    border: 2px inset #808080;
    padding: 4px;
}

.retro-form label {
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold;
    color: #FFD700;
}

/* ============================================
   "NEW!" BADGE
   ============================================ */
.new-badge {
    display: inline-block;
    background: #FF0000;
    color: #FFFF00;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    animation: blinker 1s step-start infinite;
    vertical-align: super;
}

/* ============================================
   BACKGROUND PATTERNS (CSS-only, no images needed)
   ============================================ */
.bg-stars-navy {
    background-color: #000033;
    background-image:
        radial-gradient(circle, #FFD700 1px, transparent 1px),
        radial-gradient(circle, #FFFFFF 0.5px, transparent 0.5px);
    background-size: 50px 50px, 30px 30px;
    background-position: 0 0, 15px 15px;
}

.bg-hearts-pink {
    background-color: #FF69B4;
    background-image:
        radial-gradient(circle at 50% 40%, #FF1493 8px, transparent 8px),
        radial-gradient(circle at 44% 40%, #FF1493 8px, transparent 8px),
        radial-gradient(ellipse at 47% 52%, #FF1493 10px, transparent 10px);
    background-size: 40px 40px;
}

.bg-parchment {
    background-color: #F5E6C8;
    background-image:
        linear-gradient(rgba(139, 115, 85, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 115, 85, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-stripes-usa {
    background: repeating-linear-gradient(
        to bottom,
        #FF0000 0px, #FF0000 15px,
        #FFFFFF 15px, #FFFFFF 30px
    );
}

.bg-starfield {
    background-color: #000011;
    background-image:
        radial-gradient(circle, #FFFFFF 1px, transparent 1px),
        radial-gradient(circle, #AAAAFF 0.5px, transparent 0.5px),
        radial-gradient(circle, #FFFFFF 0.8px, transparent 0.8px);
    background-size: 100px 100px, 70px 70px, 130px 130px;
    background-position: 0 0, 35px 35px, 65px 20px;
}

.bg-green-matrix {
    background-color: #001100;
    background-image:
        linear-gradient(rgba(0, 255, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.03) 1px, transparent 1px);
    background-size: 25px 25px;
}

/* ============================================
   SITE AWARDS
   ============================================ */
.award-badge {
    display: inline-block;
    width: 150px;
    height: 150px;
    border: 3px ridge #FFD700;
    background: linear-gradient(135deg, #1a0533, #330066, #1a0533);
    color: #FFD700;
    font-family: 'Times New Roman', serif;
    font-size: 10px;
    padding: 10px;
    margin: 10px;
    text-align: center;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
    vertical-align: top;
}

.award-badge .award-title {
    font-weight: bold;
    font-size: 11px;
    color: #FFD700;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.award-badge .award-org {
    font-style: italic;
    font-size: 9px;
    color: #C0C0C0;
}

/* ============================================
   NAVIGATION TABLE
   ============================================ */
.nav-table {
    margin: 15px auto;
    border-collapse: separate;
    border-spacing: 5px;
}

.nav-table td {
    padding: 0;
}

/* ============================================
   SPARKLE CURSOR CONTAINER
   ============================================ */
.sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 16px;
    animation: sparkle-fade 0.8s ease-out forwards;
}

@keyframes sparkle-fade {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0) translateY(-30px);
    }
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    margin-top: 20px;
    padding: 15px;
    font-family: 'Arial', sans-serif;
    font-size: 11px;
    color: #808080;
    border-top: 2px ridge #808080;
}

.site-footer a {
    color: #00FFFF;
}

/* ============================================
   MISC RETRO UTILITIES
   ============================================ */
.comic-sans { font-family: 'Comic Sans MS', cursive; }
.times { font-family: 'Times New Roman', serif; }
.courier { font-family: 'Courier New', monospace; }
.impact { font-family: Impact, 'Arial Black', sans-serif; }

.text-yellow { color: #FFFF00; }
.text-cyan { color: #00FFFF; }
.text-lime { color: #00FF00; }
.text-red { color: #FF0000; }
.text-gold { color: #FFD700; }
.text-white { color: #FFFFFF; }
.text-pink { color: #FF69B4; }

.text-glow {
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

.border-ridge {
    border: 3px ridge #808080;
}

.shadow-box {
    box-shadow: 5px 5px 0px #000000;
}

/* Scrolling text shadow for headers */
.text-3d {
    text-shadow:
        1px 1px 0 #333,
        2px 2px 0 #333,
        3px 3px 0 #333;
}