/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* --- DESKTOP MULTI-COLUMN LAYOUT --- */
        .desktop-layout {
            display: flex;
            flex-direction: row;
            justify-content: center;
            gap: 20px;
            max-width: 2000px;
            margin: 0 auto;
        }

        .col-left {
            width: 320px;
            display: flex;
            flex-direction: column;
        }

        .col-right {
            width: 700px;
            display: flex;
            flex-direction: column;
        }

        /* Override old sizes so they fit the columns */
        .window {
            width: 100% !important;
            margin: 0 0 20px 0 !important;
        }

        .media-player {
            width: auto !important;
            margin: 0 0 20px 0 !important;
        }
        
        /* THE DESKTOP (Background & Global Settings) */
        body {
           background-color: #050505; /* Deep, almost-pitch black */
            
            /* Pure CSS Dark Cyber Grid */
            background-image: 
                linear-gradient(#1a1a1a 1px, transparent 1px),
                linear-gradient(90deg, #1a1a1a 1px, transparent 1px);
            background-size: 25px 25px;
            background-attachment: fixed; /* Locks the grid in place when scrolling */
            
            color: #ffffff;
            font-family: "Courier New", Courier, monospace;
            margin: 0;
            padding: 20px;
        }
        
        /* RETRO HYPERLINKS */
        a {
            color: #0000ff; /* Classic web blue */
            text-decoration: underline;
            font-weight: bold;
        }

        a:hover {
            color: #00ff00; /* Turns neon green on hover! */
            background-color: #000000; /* Black highlight */
            text-decoration: none;
            cursor: crosshair; /* Changes mouse to a target reticle */
        }



        /* THE RETRO WINDOW CONTAINER */
        .window {
            background-color: #c0c0c0; /* Classic Win95 Silver */
            border-top: 2px solid #ffffff;
            border-left: 2px solid #ffffff;
            border-right: 2px solid #808080;
            border-bottom: 2px solid #808080;
            width: 80%;
            max-width: 800px;
            margin: 0 auto 30px auto;
            color: #000000;
            font-family: 'Tahoma', sans-serif; /* OS font */
        }

        /* THE TITLE BAR */
        .title-bar {
            background-color: #000080; /* Classic OS Blue, or change to black for maximum edge */
            color: white;
            padding: 3px 5px;
            font-weight: bold;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .title-bar-buttons {
            background-color: #c0c0c0;
            color: black;
            border-top: 1px solid #ffffff;
            border-left: 1px solid #ffffff;
            border-right: 1px solid #000000;
            border-bottom: 1px solid #000000;
            font-weight: bold;
            padding: 0 4px;
            cursor: pointer;
        }

        /* THE INNER CONTENT AREA (Like the chat box in your 2nd image) */
        .window-content {
            padding: 10px;
        }

        .inner-box {
            background-color: #ffffff;
            border-top: 2px solid #808080;
            border-left: 2px solid #808080;
            border-right: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
            padding: 15px;
            overflow-y: auto; /* Adds a scrollbar if content is long */
            font-family: "Courier New", monospace;a
        }:

        /* NAVIGATION LINKS */
        a {
            color: #0000ff;
            text-decoration: underline;
            font-weight: bold;
        }
        a:hover {
            color: #ff0000;
            cursor: crosshair;
        }

        /* 88x31 BUTTON SHRINE AREA */
        .marquee-box {
            border: 1px dashed #808080;
            padding: 8px;
            margin-top: 15px;
            width: 100%;
            box-sizing: border-box;
            line-height: 1.4; /* Gives the text some breathing room when it drops down a line */
            background-color: rgba(0, 0, 0, 0.05); /* Optional: adds a very faint background to the quote box */
        }
        .buttons-row {
            margin-top: 15px;
            text-align: center;
        }

/* RETRO MEDIA PLAYER */
        .media-player {
            background-color: #c0c0c0;
            border-top: 2px solid #ffffff;
            border-left: 2px solid #ffffff;
            border-right: 2px solid #808080;
            border-bottom: 2px solid #808080;
            width: 280px;
            padding: 10px;
            margin: 20px auto;
            font-family: 'Tahoma', sans-serif;
            color: black;
        }

        .player-screen {
            background-color: #000000;
            border-top: 2px solid #808080;
            border-left: 2px solid #808080;
            border-right: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
            height: 35px;
            margin-bottom: 10px;
            color: #00ff00; /* Classic neon green */
            font-family: "Courier New", monospace;
            font-size: 12px;
            display: flex;
            align-items: center;
            padding: 0 5px;
            overflow: hidden;
        }

        .player-controls button {
            background-color: #c0c0c0;
            border-top: 2px solid #ffffff;
            border-left: 2px solid #ffffff;
            border-right: 2px solid #808080;
            border-bottom: 2px solid #808080;
            font-weight: bold;
            cursor: pointer;
            padding: 2px 10px;
            margin-right: 2px;
        }

        /* Makes the buttons look pushed in when clicked! */
        .player-controls button:active {
            border-top: 2px solid #808080;
            border-left: 2px solid #808080;
            border-right: 2px solid #ffffff;
            border-bottom: 2px solid #ffffff;
        }
        
        /* --- FULL SCREEN LIGHTBOX --- */
        #lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9); /* Dark hacker overlay */
            z-index: 9999; /* Forces it to the very top layer */
            display: flex; /* We will use JS to switch this from 'none' to 'flex' */
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #lightbox-img {
            max-width: 90%;
            max-height: 80%;
            border: 2px solid #00ff00; /* Hacker green border */
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); /* Slight radioactive glow */
        }

        .lightbox-close {
            color: #00ff00;
            font-family: "Courier New", Courier, monospace;
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 20px;
            cursor: pointer;
            text-decoration: underline;
        }

        .lightbox-close:hover {
            color: #ffffff;
            background-color: #ff0000; /* Turns red when you hover to close */
            text-decoration: none;
        }
        
        /* --- 88x31 BUTTON/BADGE WALL --- */
        .button-wall {
            display: flex;
            flex-wrap: wrap;
            gap: 2px; /* Tiny gap between buttons */
            justify-content: center;
        }

        .button-wall img {
            width: 88px;
            height: 31px;
            border: 1px solid #333; /* Optional dark border */
        }
        
        .button-wall img:hover {
            border: 1px solid #00ff00; /* Glows green when you hover over a badge! */
        }
        
        .app-window-content img:hover{
          border: 1px solid #00ff00;
        }
        
        /* 1. Strip away the modern browser styling */
#volume-slider {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    background: transparent; 
}

/* Remove the blue focus outline */
#volume-slider:focus {
    outline: none; 
}

/* 2. Style the TRACK (The inset groove) */
#volume-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #000000; /* Deep black groove */
    /* The classic Win95 inset shadow effect */
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

/* 3. Style the THUMB (The physical slider knob) */
#volume-slider::-webkit-slider-thumb {
    height: 16px;
    width: 9px;
    background: #c0c0c0; /* Classic Win95 base grey */
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin-top: -7px; /* Pulls the knob up to center it on the track */
    /* The classic Win95 popping out (outset) button effect */
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}

/* 4. Firefox Support (Browsers are annoying) */
#volume-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #000000;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}

#volume-slider::-moz-range-thumb {
    height: 16px;
    width: 9px;
    background: #c0c0c0;
    cursor: pointer;
    border-radius: 0; /* Override Firefox's default roundness */
    border-top: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;
}