/* --- 90s HORNETS COLOR PALETTE --- */
        :root {
            --hornets-teal: #008ca8;
            --hornets-white: #ffffff;
            --hornets-black: #111111;
            --azure-blue: #2545BB;
            --azure-green: #06BA33;
            --azure-white: #E6E6E6;
            --border-thick: 5px;
        }

        /* --- CSS RESET --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* --- THE CRAZY 90s CSS PATTERN --- */
        body {
            font-family: 'Arial Black', Impact, sans-serif;
            background-color: var(--azure-white);
            color: var(--hornets-black);
            
            /* Layering polka dots and diagonal stripes using only CSS gradients! */
            background-image: 
                radial-gradient(circle at 20px 20px, var(--azure-blue) 3px, transparent 4px),
                linear-gradient(45deg, transparent 48%, var(--hornets-teal) 48%, var(--hornets-teal) 52%, transparent 52%),
                linear-gradient(-45deg, transparent 48%, var(--hornets-teal) 48%, var(--hornets-teal) 52%, transparent 52%);
            background-size: 40px 40px, 80px 80px, 80px 80px;
            
            line-height: 1.6;
            padding: 20px;
        }

        /* --- MAIN CONTAINER --- */
        .wrapper {
            max-width: 900px;
            margin: 40px auto;
            background-color: var(--hornets-white);
            border: var(--border-thick) solid var(--hornets-black);
            box-shadow: 15px 15px 0px var(--azure-green), 30px 30px 0px var(--azure-blue);
            position: relative;
        }

        /* --- SPORTY HEADER --- */
        header {
            background-color: var(--hornets-teal);
            color: var(--hornets-white);
            padding: 30px;
            text-align: center;
            border-bottom: var(--border-thick) solid var(--hornets-black);
            font-style: italic; /* Classic 90s sports font tilt */
            letter-spacing: 3px;
        }

        h1 {
            font-size: 3.5rem;
            text-shadow: 4px 4px 0px var(--azure-blue), 8px 8px 0px var(--hornets-black);
        }
        
        .animated-gradient {
             background: linear-gradient(90deg, #2545BB, #00AEB6, #06BA33, #00AEB6, #2545BB);
             background-size: 200% auto;
             background-clip: text;
             -webkit-background-clip: text;
             text-fill-color: transparent;
             -webkit-text-fill-color: transparent;
             animation: gradient-flow 3s linear infinite;
        }
        
        @keyframes gradient-flow {
            0% {
                background-position: 0% center;
            }
            100% {
                background-position: 200% center;
            }
        }
        
        #main_header {
            font-family: Arial Black, Arial;
            font-size: 2rem;
            margin-bottom: 0px;
            color: var(--azure-blue);
            text-transform: uppercase;
            text-align: center;
        }
        
        h3 {
            font-family: Arial Black, Arial;
            color: var(--azure-blue);
            text-transform: uppercase;
            text-align: center;
            font-size: 1.5rem;
            padding-top: 10px;
        }
        
        .about-list li {
            list-style: none;
            background-position: center;
        }
        
        .about-list li::before {
            content: '';
            display: inline-block;
            margin-right: 8px;

            /* Height of the list image*/
            height: 13px;

            /* Width of the list image*/
            width: 25px;
            background-image: url("Gem.png");
            background-size: 25px;
            background-repeat: no-repeat;
        }
        
        
        .about-list li:not(:first-of-type) {
            margin-top: 0.5em;
        }

        .about-list li:not(:last-of-type) {
            margin-bottom: 0.5em;
        }
        
        .about-sublist {
          margin-left: 20px;
        }
        
        .about-sublist li::before {
            background-image: url("Orb.png");
            height: 11px;
            width: 18px;
            background-size: 18px;
        }
        
        .about-sublist li:not(:first-of-type) {
            margin-top: 0em;
        }

        .about-sublist li:not(:last-of-type) {
            margin-bottom: 0em;
        }

        /* --- CONTENT AREA --- */
        .content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            background-color: var(--azure-white);
        }

        .sidebar {
            background-color: var(--azure-blue);
            color: var(--hornets-white);
            padding: 30px;
            border-right: var(--border-thick) solid var(--hornets-black);
        }
        
        .sidebar h2 {
            text-shadow: 3px 3px 0px var(--hornets-black); 
        }

        .main-panel {
            padding: 30px;
            font-family: 'Courier New', Courier, monospace; /* Keeping it web-safe */
            font-weight: bold;
        }
        
        div .note {
            background-color: var(--hornets-teal);
            color: var(--hornets-white);
            padding: 15px;
            border: 3px solid var(--hornets-black);
            margin-bottom: 10px;
        }

        /* --- RETRO BUTTONS --- */
        .nav-menu {
            list-style: none;
            margin-top: 20px;
        }

        .nav-menu li {
            margin-bottom: 15px;
        }

        .nav-menu a {
            display: block;
            background-color: var(--hornets-teal);
            color: var(--hornets-white);
            text-decoration: none;
            padding: 10px 15px;
            border: 3px solid var(--hornets-black);
            font-family: 'Arial Black', sans-serif;
            text-transform: uppercase;
            text-align: center;
            transition: all 0.2s;
            box-shadow: 4px 4px 0px var(--hornets-black);
        }

        .nav-menu a:hover {
            background-color: var(--azure-white);
            color: var(--azure-blue);
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0px var(--hornets-black);
        }
        
        /* Disable navbar button of page the user is currently on */
        .nav-menu a.current {
            background-color: #ACB2B4; /* Baseball visitor uniform light grey */
            color: var(--azure-blue);
            pointer-events: none;
        }
        
        figcaption {
            text-align: center;
            font-size: 0.8rem;
            font-style: italic;
            line-height: 1.2;
        }        
        figure img {
            display: block;
            margin: 0 auto;
        }

        /* --- ZIG-ZAG DIVIDER --- */
        .zig-zag {
            height: 29px;
            background: 
                linear-gradient(135deg, var(--azure-blue) 25%, transparent 25%) -26px 0,
                linear-gradient(225deg, var(--azure-blue) 25%, transparent 25%) -25px 0,
                linear-gradient(315deg, var(--azure-blue) 25%, transparent 25%),
                linear-gradient(45deg, var(--azure-blue) 25%, transparent 25%);
            background-size: 50px 50px;
            background-color: var(--azure-green);
            border-bottom: var(--border-thick) solid var(--hornets-black);
        }
        
        #buttons img {
            width: 30%;
        }
        
        #badges img {
            width: 40%;
            margin-left: 12px;
        }
        
        #blinkies img {
            width: 65%;
            display: block;
            align-items: center;
            margin: 0 auto;
            padding-bottom: 5px;
        }
        
        /* --- MY LINKS BUTTONS --- */
        .link {
          list-style: none;
          width: 50%;
          align-items: center;
          margin: 0 auto;
          margin-bottom: 30px;
        }
          
        .link a {
            display: block;
            margin: 0 auto;
            border: 3px solid var(--hornets-black);
            font-family: 'Arial Black', sans-serif;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            transition: all 0.2s;
            box-shadow: 4px 4px 0px var(--hornets-black);
            padding: 10px 15px;
        }
        
        /* --- PNGtube image slideshow animation in My Links  --- */
        .mySlides {
            display: none;
        }
        .slideshow-container {
            width: 50%;
            position: relative;
            margin: auto;
        }
        
        /* Cutting animation */
        .cut {
            animation-name: cut;
            animation-duration: 0s;
        }
        /* Cut to next image instantly */
        @keyframes cut {
            from {opacity: 1} 
            to {opacity: 1}
        }
        
        @media (max-width: 768px) {
           .slideshow-container {
                width: 66%; 
           }
        }
        
        /* --- My Links buttons --- */
        .link, #twitch a {
            background-color: #9147FF; /* Twitch purple */
            color: var(--hornets-white);
        }
        
        .link, #twitch a:hover {
            background-color: var(--hornets-white);
            color: #9147FF;
        }
        
        .link, #fa a {
            background-color: #252E34; 
            color: #F49104; /* FurAffinity yellow  */
            margin-top: -10px;
        }
        
        .link, #fa a:hover {
            background-color: #F49104;
            color: var(--hornets-white);
        }
        
        .link, #bluesky a {
            background-color: #0188FC; /* Bluesky blue */
            color: var(--hornets-white); 
            margin-top: -10px;
        }
        
        .link, #bluesky a:hover {
            background-color: var(--hornets-white);
            color: #0188FC;
        }
        
        .link, #masto a {
            background-color: #341A4B; /* Dragon.style purple */
            color: var(--hornets-white); 
            margin-top: -10px;
        }
        
        .link, #masto a:hover {
            background-color: var(--hornets-white);
            color: #5A48DD;
        }
        
        .link, #itaku a {
            background-color: #424242;
            color: #FFEB3B; /* Itaku yellow */
            margin-top: -10px;
        }
        
        .link, #itaku a:hover {
            background-color: #FFEB3B;
            color: #424242; /* Itaku dark grey */
        }
        
        .link, #steam a {
            background-color: #131B32; /* Steam navy */
            color: var(--hornets-white); 
            margin-top: -10px;
        }
        
        .link, #steam a:hover {
            background-color: #0374A7;
            color: var(--hornets-white);
        }

        /* --- MOBILE RESPONSIVENESS --- */
        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
            .sidebar {
                border-right: none;
                border-bottom: var(--border-thick) solid var(--hornets-black);
            }
            .wrapper {
                box-shadow: 5px 5px 0px var(--azure-green), 10px 10px 0px var(--azure-blue);
            }
            h1 {
                font-size: 3rem;
                text-shadow: 3px 3px 0px var(--azure-blue), 6px 6px 0px var(--hornets-black);
            }
            
            p {
                font-size: 0.9rem; 
            }
            
            figcaption {
                font-size: 0.7rem; 
            }
            
            .slideshow-container figcaption {
                margin-top: -15px;
            }
            
            .about-list {
                font-size: 0.9rem;
            }
            
            .about-list li::before {
                margin-right: 5px;
              
                /* Height of the list image*/
                height: 10px;
    
                /* Width of the list image*/
                width: 20px;
                background-size: 20px;
            }
            
            .about-sublist li::before {
                 background-size: 16px;
            }
            
            .link {
                width: 75%;
            }
            
            #buttons img {
              width: 32%;
            }
            
            #main_header {
                font-size: 1.7rem; 
            }
            
            #badges img {
                display: inline-block;
                align-items: center;
                margin: 0 auto;
                width: 32%;
            }
            #blinkies img {
                width: 49%;
                display: inline-block;
                padding-bottom: 0px;
            }
            
        }