/* ==========================================================================
   THE 2000s MYSPACE / GEOCITIES EYE-SORE SPECIFICATION
   ========================================================================== */

/* 1. Global Setup & Custom Cursor */
body {
    background-color: #000000;
    /* Tiling starfield background image - the ultimate 90s staple */
    background-image: url('../images/stars.gif'); 
    background-repeat: repeat;
    
    /* Font choices: Times New Roman feels old-school, Comic Sans feels chaotic */
    font-family: "Comic Sans MS", "Chalkboard SE", "Times New Roman", sans-serif;
    color: #00FF00; /* Matrix Neon Green default text */
    padding: 20px;
    margin: 0;
    
    /* Custom retro pointer (using an image if you drop one in later, falling back to crosshair) */
    cursor: url('../images/pointer.gif'), crosshair, pointer;
}

/* 2. Hyperlink Chaos */
a:link {
    color: #FF00FF; /* Hot Pink unvisited links */
    text-decoration: underline;
    font-weight: bold;
}
a:visited {
    color: #00FFFF; /* Bright Cyan visited links */
}
a:hover {
    color: #FFFF00; /* Neon Yellow on hover */
    background-color: #FF0000; /* Blinding red background highlight on hover */
    text-decoration: blink; /* A nod to the past */
}

/* 3. Recreating the Dead <blink> Tag */
/* Modern browsers killed the native <blink> tag, so we recreate it with CSS animations */
blink, .blink-text {
    animation: 2000s-blink 1s steps(5, start) infinite;
}

@keyframes 2000s-blink {
    to {
        visibility: hidden;
    }
}

/* 4. Glitter Text / Glowing Word Art Headers */
h1 {
    font-size: 36px;
    text-align: center;
    color: #FFFF00;
    text-shadow: 3px 3px #FF0000, -3px -3px #0000FF; /* Terrible red/blue faux-3D shadow */
    letter-spacing: 2px;
}

h2, h3 {
    color: #00FFFF;
    border-bottom: 2px dashed #FF00FF;
    padding-bottom: 5px;
}

/* 5. Layout & Table Brutalism */
/* We force tables to look completely unoptimized */
table {
    box-shadow: 10px 10px 0px #FF0000; /* Chunky, non-blurred drop shadow */
}

td {
    font-size: 14px;
    line-height: 1.4;
}

/* 6. Horrific Retro Form Styling */
input[type="text"], textarea {
    background-color: #111111 !important;
    color: #FFFF00 !important;
    font-family: "Courier New", monospace;
    border: 3px inset #FF00FF !important; /* Thick "inset" borders give that 95/XP look */
    padding: 5px;
}

input[type="submit"] {
    background-color: #00FF00;
    color: #000000;
    font-family: "Comic Sans MS", sans-serif;
    font-weight: bold;
    border: 3px outset #00FFFF;
    padding: 5px 15px;
    cursor: pointer;
}

input[type="submit"]:active {
    border-style: inset; /* Gives a mechanical click feel */
    background-color: #008800;
    color: #FFFFFF;
}

/* 7. Image Tuning */
/* Add a glowing neon border to images, like profile pics */
img {
    filter: drop-shadow(0px 0px 5px #00FF00);
}

/* 8. Custom Scrollbar (Internet Explorer 5.5 Style) */
/* This only works in Webkit browsers (Chrome, Edge, Safari) but mimics old IE properties */
::-webkit-scrollbar {
    width: 16px;
}
::-webkit-scrollbar-track {
    background: #333333; 
}
::-webkit-scrollbar-thumb {
    background: #FF00FF; 
    border: 2px outset #00FFFF;
}