/* ~*~ 90s HOMEPAGE STYLESHEET ~*~ */

body {
    margin: 0;
    padding: 10px;
    font-family: "Times New Roman", Times, serif;
    cursor: crosshair;
}

/* BLINK EFFECT - the classic! */
.blink {
    animation: blinker 1s step-start infinite;
}

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

/* LINKS - gotta have that classic blue/purple */
a:link {
    color: #0000FF;
    text-decoration: underline;
}

a:visited {
    color: #800080;
    text-decoration: underline;
}

a:hover {
    color: #FF0000;
    text-decoration: underline;
    cursor: pointer;
}

a:active {
    color: #FF0000;
}

/* NAV BUTTONS */
.nav-btn {
    cursor: pointer;
    border: 2px outset #C0C0C0;
    background-color: #808080;
}

.nav-btn:hover {
    background-color: #A0A0A0;
    border-style: inset;
}

.nav-btn:active {
    border-style: inset;
    background-color: #606060;
}

/* SCROLLBAR - old school gray */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: #C0C0C0;
    border: 1px solid #808080;
}

::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border: 2px outset #DFDFDF;
}

::-webkit-scrollbar-button {
    background: #C0C0C0;
    border: 2px outset #DFDFDF;
    height: 16px;
}

/* INPUT FIELDS - 90s style */
input[type="text"], textarea {
    background-color: #FFFFFF;
    border: 2px inset #C0C0C0;
    font-family: "Times New Roman", Times, serif;
    padding: 2px;
}

input[type="submit"], input[type="reset"], button {
    background-color: #C0C0C0;
    border: 2px outset #DFDFDF;
    font-family: "Arial", sans-serif;
    cursor: pointer;
    padding: 2px 8px;
}

input[type="submit"]:active, input[type="reset"]:active, button:active {
    border-style: inset;
}

/* HR - classic beveled */
hr {
    border: none;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #FFFFFF;
    height: 0;
    margin: 10px 0;
}

/* TABLE BORDERS - thick and proud */
table {
    border-collapse: separate;
}

/* SELECTION COLOR */
::selection {
    background: #000080;
    color: #FFFFFF;
}

/* STAR TRAIL */
#star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.trail-star {
    position: absolute;
    pointer-events: none;
    font-size: 14px;
    color: #FFD700;
    text-shadow: 0 0 5px #FF8800;
    animation: starFade 1s ease-out forwards;
    z-index: 9999;
}

@keyframes starFade {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(180deg) translateY(20px);
    }
}

/* RAINBOW TEXT EFFECT */
.rainbow {
    animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
    0%   { color: #FF0000; }
    15%  { color: #FF8800; }
    30%  { color: #FFFF00; }
    45%  { color: #00FF00; }
    60%  { color: #0088FF; }
    75%  { color: #0000FF; }
    90%  { color: #8800FF; }
    100% { color: #FF0000; }
}

/* STATUS BAR look at bottom */
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #C0C0C0;
    border-top: 2px outset #DFDFDF;
    padding: 2px 5px;
    font-family: "MS Sans Serif", Arial, sans-serif;
    font-size: 11px;
    z-index: 10000;
    display: flex;
    gap: 4px;
}

.status-section {
    border: 1px inset #808080;
    padding: 1px 6px;
    background: #C0C0C0;
}

/* Sparkle cursor on hover over links */
a:hover {
    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><text y='16' font-size='16'>✨</text></svg>") 10 10, pointer;
}