/* General Body & Root Styles */
        :root {
            --color-bg-light: #ffeb3b; /* Bright Yellow */
            --color-bg-dark: #2c003e; /* Deep Purple */
            --color-accent-1: #ff0055; /* Hot Pink */
            --color-accent-2: #00ff7f; /* Neon Green */
            --color-video-bg: #800080; /* New Video Section Color */            
            --color-text: #2c003e;      
            --font-bangers: 'Bangers', cursive;
            --font-pixel: 'Press Start 2P', cursive;
            --font-mono: 'VT323', monospace;

        }


        @font-face {      /* Comic font */
            font-family: 'Bangers';
            src: url('fonts/Bangers-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {      /* Pixellated font */
            font-family: 'Press Start 2P';
            src: url('fonts/PressStart2P-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        
        @font-face {      /* Code font */
            font-family: 'VT323';
            src: url('fonts/VT323-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }


        body {
            
            font-family: var(--font-mono);
            background-color: var(--color-bg-light);
            color: var(--color-text);
            margin: 0;
            padding: 20px;
            overflow-x: hidden;
            line-height: 1.5;            
            
            /* Absurd & uncomfortable LSD like background animation */
            background-image: url("/generic_img/animal-print-pattern.jpg");
            background-repeat: repeat;
            /* background-size: 150%;  Make it larger than the viewport */
            animation: pan-background 300s linear infinite;
            background-size: 500px, 300px, 400px;
            background-position: 0 0, 50% 100px, 100% 0;

        }
        
        @keyframes pan-background {
            0% {
                background-position: 0% 0%;
            }
            100% {
                background-position: 100% 100%;
            }
        }  
        
      .ul {
          list-style-type:disc;
        }
        

      .site-wrapper {
          display: flex;
          gap: 2%;          /* Adjust the spacing between the sidebar and main content */
          max-width: 1400px;  /* Increase the max-width to accommodate the sidebar */
          margin: 0 auto;
      }
      
      .sidebar {
          background-color: var(--color-bg-dark);
          color: var(--color-accent-2);
          padding: 20px;
          border: 3px solid var(--color-accent-1);
          box-shadow: 8px 8px 0px var(--color-bg-dark);
          flex-shrink: 0; /* Prevents the sidebar from shrinking */
          width: 15%; /* Set a fixed width for the sidebar */
          position: sticky; /* Keeps the sidebar visible when scrolling */
          top: 20px;
          height: fit-content;
          
          
      }
      
      .sidebar h2 {
          font-family: var(--font-bangers);
          font-size: 2rem;
          margin-top: 0;
          -webkit-text-stroke: 1px var(--color-bg-light);
      }
      
      .sidebar ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      
      .sidebar a {
          font-family: var(--font-pixel);
          display: block;
          padding: 10px;
          margin-bottom: 5px;
          text-decoration: none;
          color: var(--color-accent-2);
          border: 2px solid var(--color-accent-2);
          box-shadow: 4px 4px 0 var(--color-accent-1);
          transition: all 0.2s ease;
      }
      
      .sidebar a:hover {
          transform: translate(-2px, -2px);
          box-shadow: 6px 6px 0 var(--color-accent-1);
      }
        


        /* --- Main Container & Layout --- */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        /* --- DIY "Scrapbook" Sections --- */
        .section {
            background-color: var(--color-bg-light);
            border: 2px solid var(--color-text);
            box-shadow: 8px 8px 0px var(--color-accent-1);
            padding: 20px;
            margin-bottom: 40px;
            position: relative;
            z-index: 10;           
        }

        .header {
            background-color: var(--color-bg-dark);
            color: var(--color-bg-light);
            text-align: center;
            border: 5px solid var(--color-accent-2);
            box-shadow: 12px 12px 0px var(--color-accent-1);
            padding: 30px 20px;
            margin-bottom: 60px;
            overflow: hidden; /* This is the key change! It creates the clipping boundary */
            position: relative; /* Ensure it's a positioning context for children */                 
        }
        
        .header h1 {
            font-family: var(--font-bangers);
            font-size: clamp(2rem, 8vw, 5rem);
            margin: 0;
            line-height: 1;
            text-shadow: 5px 5px 0 var(--color-accent-2);
            -webkit-text-stroke: 1px var(--color-text); /* Add a punk-y text outline */
        }
        .header p {
            font-family: var(--font-pixel);
            font-size: clamp(0.7rem, 2vw, 1.2rem);
            margin-top: 10px;
            color: var(--color-accent-2);
            text-shadow: 1px 1px 0 var(--color-bg-light);
            white-space: nowrap;
            animation: scroll 15s linear infinite;
            position: relative; /* This is also key for the animation to work correctly */
        }
        
        /* Scrolling text */
        
        .header .scroll {
            font-family: var(--font-pixel);
            font-size: clamp(0.7rem, 2vw, 1.2rem);
            margin: 0;
            margin-top: 10px;
            color: var(--color-accent-2);
            text-shadow: 1px 1px 0 var(--color-bg-light);
            white-space: nowrap;
            animation: bounce 20s linear infinite alternate;
            position: relative; /* Allows the animation to work correctly within the container */
        }
        
        @keyframes bounce {
            0% {
                transform: translateX(50%); /* Start off-screen to the right */
            }
            50% {
                transform: translateX(-50%); /* Move to the left off-screen */
            }
            100% {
                transform: translateX(50%); /* Return to the starting position */
            }
        }     

        /* --- Section Styling (Layered and Rotated) --- */
        #about-bio, #music-section, #live-dates, #video-section, #merch-contact, #cool-shit, .ul p {
            font: var(--font-mono);
            font-size: clamp(1rem, 1vw, 2.5rem);
        }

        #photo-section {
            transform: rotate(3deg); /* Changed rotation angle */
            background-color: var(--color-accent-1); /* Changed background color */
            padding: 10px;
            border: 3px solid var(--color-bg-dark);
            box-shadow: 8px 8px 0 var(--color-accent-2); /* Changed shadow color */
            width: 50%;
            margin-left: 20%;
            text-align: center;
            position: relative;
            z-index: 10;
        }
        #photo-section h2 {
            font-family: var(--font-bangers);
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            color: var(--color-bg-dark);
            margin-top: 0;
        }
        #photo-section img {
            max-width: 100%;
            height: auto;
            border: 2px solid var(--color-bg-dark);
            box-shadow: 4px 4px 0 var(--color-accent-1);
            filter: grayscale(0%) contrast(1);  /* high-contrast effect */          
        }
        
        #about-bio {
            transform: rotate(-3deg);
            color: var(--color-bg-light);
            background-color: var(--color-bg-dark);
            box-shadow: 8px 8px 0 var(--color-video-bg);
            border: dashed var(--color-accent-1);
            margin-left: 15%;
            width: 70%;
        }
        

        #music-section {
            transform: rotate(-5deg);
            background-color: var(--color-accent-2);
            color: var(--color-bg-dark);
            box-shadow: 10px 10px 0 var(--color-bg-dark);
            margin-top: -30px;
            width: 85%;
            margin-left: 5%;
        }
        #music-section h2 { 
            font-family: var(--font-bangers); 
            font-size: clamp(1.5rem, 4vw, 2.5rem); 
        }

        #live-dates {
            transform: rotate(-1deg);
            background-color: var(--color-bg-light);
            box-shadow: 6px 6px 0 var(--color-bg-dark);
            margin-top: -40px;
            width: 90%;
            margin-left: 2%;
            /* Added styles for the scrollbar */
            max-height: 500px;
            overflow-y: auto;
        }
        
        #live-dates h2 { font-family: var(--font-bangers); font-size: clamp(1.5rem, 4vw, 2.5rem); }
        .live-item { border-bottom: 1px dashed var(--color-text); padding: 0px 0; }
        .live-item:last-child { border-bottom: none; }
        
        
        /* Scrollbar styling */
        #live-dates::-webkit-scrollbar { width: 8px; }
        #live-dates::-webkit-scrollbar-track { background: var(--color-bg-light); }
        #live-dates::-webkit-scrollbar-thumb { background-color: var(--color-accent-1); border: 2px solid var(--color-bg-dark); }
        #live-dates::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent-2); }

        #merch-contact {
            transform: rotate(4deg);
            background-color: var(--color-bg-dark);
            color: var(--color-bg-light);
            border: 3px solid var(--color-accent-1);
            box-shadow: 10px 10px 0 var(--color-bg-light);
            margin-top: -30px;
            margin-left: 10%;
            width: 80%;
            text-align: center;
        }
        
        #merch-contact h2 {  
          text-align: left;
          font-family: var(--font-bangers); 
          font-size: clamp(1.5rem, 4vw, 2.5rem); 
          color: var(--color-bg-light);
        }
        
        /* NEW: Video Section Styling */
        #video-section {
            transform: rotate(5deg);
            background-color: var(--color-video-bg);
            color: var(--color-bg-light);
            border: 3px solid var(--color-bg-light);
            box-shadow: 8px 8px 0 var(--color-accent-1);
            margin-top: -50px;
            width: 75%;
            margin-left: 12%;
        }
        
        #video-section h2 { font-family: var(--font-bangers); font-size: clamp(1.5rem, 4vw, 2.5rem); }

        /* Cool Shit */
        #cool-shit {
            transform: rotate(-1deg);
            background-color: var(--color-accent-1);
            color: var(--color-bg-light);
            border: 3px dashed var(--color-bg-light);
            box-shadow: 8px 8px 0 var(--color-accent-2);
            margin-top: -10px;
            width: 80%;
            margin-left: 7%;
           
        }
        
        #cool-shit h2 {  
          text-align: left;
          font-family: var(--font-bangers); 
          font-size: clamp(1.5rem, 4vw, 2.5rem); 
          color: var(--color-bg-light);
        }   
        
        #cool-shit:-webkit-scrollbar { width: 8px; }
        #cool-shit:-webkit-scrollbar-track { background: var(--color-bg-light); }
        #cool-shit:-webkit-scrollbar-thumb { background-color: var(--color-accent-1); border: 2px solid var(--color-bg-dark); }
        #cool-shit:-webkit-scrollbar-thumb:hover { background-color: var(--color-accent-2); }        

        /* Photo Carousel */
        .carousel-wrapper {
            display: flex;
            align-items: center; /* This vertically centers the buttons */
            justify-content: center; /* This horizontally centers the entire group */
            gap: 10px; /* Adds space between the button, image, and other button */
            width: 100%; /* Ensures the wrapper takes full width */
            max-width: 600px; /* Keeps it aligned with the image's max-width */
            margin: 0 auto;
        }       
              
        .carousel-container {
            max-width: 500px;
            margin: 0 auto;
            overflow: hidden;
        }
        .carousel-container img {
            width: 100%;
            display: block;
            border: 2px solid var(--color-bg-dark);
            box-shadow: 4px 4px 0 var(--color-accent-1);
            display: flex;
            align-items: center; /* Vertically centers the items */
            gap: 10px; /* Adds space between items */            
        }
        .carousel-btn {
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-family: var(--font-pixel);
            font-size: 1.5rem;
            opacity: 0.8;
            transition: opacity 0.2s;
        }
        
        .carousel-btn:hover {
            opacity: 1;
        }
        .prev-btn { left: 10px; }
        .next-btn { right: 10px; }

        
        
        /* --- Specific Elements --- */
        .tape {
            position: absolute;
            width: 80px;
            height: 20px;
            background: rgba(255, 255, 255, 0.4);
            border: 1px dashed #ccc;
            transform: rotate(20deg);
            box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
        
        #photo-section .tape {
            /* Make sure the tape has a higher z-index */
            z-index: 20; /* Relative to photo section */
            top: -10px; 
            left: 0%; 
            transform: rotate(35deg); 
        }   
        #about-bio .tape { top: -37px; left: 47%; transform: rotate(130deg); }
        #music-section .tape { top: -10px; right: 10%; transform: rotate(-15deg); }
        #live-dates .tape { top: 7px; left: 10%; transform: rotate(-10deg); }
        #video-section .tape { top: -10px; right: 40%; transform: rotate(75deg); }
        #cool-shit .tape { top: -10px; right: 21%; transform: rotate(91deg); }

        .btn {
            font-size: 1rem; /* <-- Add a specific font size here */            
            display: inline-block;
            padding: 10px 20px;
            background-color: var(--color-accent-1);
            color: var(--color-bg-light);
            font-family: var(--font-pixel);
            text-decoration: none;
            border: 3px solid var(--color-bg-dark);
            box-shadow: 4px 4px 0 var(--color-bg-dark);
            transition: all 0.2s ease;
        }
        .btn:hover {
            transform: translate(-2px, -2px);
            box-shadow: 6px 6px 0 var(--color-bg-dark);
            background-color: var(--color-bg-light);
            color: var(--color-bg-dark);
        }

        .social-icons a img {
            width: 50px;
            height: auto;
            margin: 10px;
            transition: transform 0.2s;
        }
        .social-icons a:hover img {
            transform: scale(1.1) rotate(10deg);
        }
        
        .scroll-box {
            overflow-y: auto; 
            max-height: 300px; 
        }
        

       

        /* --- Responsive Design for Smaller Screens --- */
        @media (max-width: 1200px) {
            /* Main site container */
            .container {
                width: 100%;
                padding: 0;
            }
            
            .sidebar {   
                display:none;
            }
        
            /* All sections should be un-rotated, full-width, and margin-less on mobile */
            
            .section,
            #photo-section,
            #about-bio,
            #music-section,
            #live-dates,
            #video-section,
            #merch-contact,
            #cool-shit {
                transform: none !important;
                margin-left: 0 !important;
                width: 90% !important;
                margin-top: 30px;
            }
        
            /* Hide the tape elements */
            .tape {
                display: none;
            }
        
            /* Re-align the carousel for a vertical stack */
            .carousel-wrapper {
                flex-direction: column;
                gap: 5px;
            }
        
            .carousel-btn {
                position: static;
                transform: none;
                margin: 5px auto;
            }
        
            /* Ensure scrolling text and backgrounds work */
            .header p {
                white-space: normal;
                animation: none;
            }
        
            body {
                /* This is crucial: prevent horizontal overflow */
                overflow-x: hidden;
            }
        }