@font-face {
            font-family: LCD;
            src: url(lcd.ttf?v=0.0.2);
            font-display: swap;
        }
    
        body {
            background: #0a1f44;
            margin: 0;
            min-height: 100vh;
            position: relative;
            padding-bottom: 200px; /* Add padding to prevent content from being hidden behind fixed buttons */
        }
        
        h1 {
            font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
        }
        
        .head {
            margin: 2rem auto;
            width: min(90vw, 800px);
            padding: 1rem;
            text-align: center;
        }
        
        .head img {
            width: 100%;
            height: auto;
            max-width: 600px;
        }

        .head h1 {
            color: white;
            text-align: left;
            margin: -40px -80px 0 0;
        }

        @media (min-width: 768px) {
            .head {
                margin: 4rem auto;
            }
            
            .head h1 {
                margin-top: -70px;
                margin-left: -220px;
                text-align: center;
            }
        }

        .snow {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        .calendar {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            position: relative;
            z-index: 2;
            margin-bottom: 220px; /* Add space for cassette player */
        }

        .door-container {
            aspect-ratio: 1;
            perspective: 1000px;
            position: relative;
            background: #fff;
            transition: transform 0.3s, opacity 0.3s;
        }

        .door-container.disappear {
            transform: scale(0);
            opacity: 0;
        }

        .door {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.6s;
            transform-origin: left;
            z-index: 2;
        }

        .door.open {
            transform: rotateY(-110deg);
        }

        .door-front {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            background: #c41e3a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: white;
            cursor: pointer;
            box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
        }

        .door-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            background: #8b0000;
            transform: rotateY(180deg);
        }

        .door-content {
            position: absolute;
            width: 100%;
            height: 100%;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            z-index: 1;
        }

        .day-name {
            color: #fff;
            font-size: 1.5rem;
            font-weight: bold;
            position: absolute;
            top: .25rem;
            z-index: 3;
            text-shadow: 0 0 4px rgba(0,0,0,0.8);
        }
        
        @media screen and (max-width:800px) {
            .day-name {
                font-size: 1rem;
            }
        }

        .door-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .inactive {
            opacity: 0.5;
        }

        .lock-symbol {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            z-index: 3;
        }

        .door-front:hover:not(.inactive) {
            transform: scale(1.02);
        }

        .grinch-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            flex-direction: column;
        }

        .grinch-overlay.show {
            display: flex;
        }

        .grinch-message {
            color: white;
            font-size: 32px;
            margin-top: 20px;
            text-align: center;
            background: #c41e3a;
            padding: 20px 40px;
            border-radius: 15px;
            border: 4px solid #8b0000;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            font-family: 'Arial', sans-serif;
            text-shadow: 2px 2px 4px #8b0000;
            position: relative;
            z-index: 1;
        }

        .grinch-overlay img {
            max-width: 300px;
            margin-bottom: -26px;
            position: relative;
            z-index: 2;
        }

        .progress-container {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 4px;
            background: rgba(0,0,0,0.2);
            z-index: 3;
            opacity: 0;
            transition: opacity 0.3s;
            cursor: pointer;
        }

        .door.open + .progress-container {
            opacity: 1;
        }

        .progress-bar {
            height: 100%;
            width: 0%;
            background: #c41e3a;
            box-shadow: 0 0 5px rgba(255,255,255,0.8);
            transition: width 0.1s linear;
            pointer-events: none;
        }

        .snowflake-svg {
            position: absolute;
            width: 10px;
            height: 10px;
            fill: white;
            opacity: 0.8;
        }

        .song-info {
            position: fixed;
            display: flex;
            flex-direction: row;
            gap:26px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #c41e3a;
            padding: 20px 20px 3px 20px;
            border-radius: 15px 15px 0 0;
            border: 3px solid #8b0000;
            border-bottom: none;
            box-shadow: 0 -4px 8px rgba(0,0,0,0.3);
            z-index: 1000;
            font-family: 'Arial', sans-serif;
            width: min(90vw, 800px);
            opacity: 1;
            background: linear-gradient(45deg, #c41e3a, #8b0000);
            border: 8px solid #444;
            border-bottom: none;
        }
        
        .displays {
            display: grid;
            grid-template-columns: 10% 35% 55%;
            grid-template-areas: 
            "day text1 text1"
            "text2 text2 text3"
            ;
            gap: 0px 4px;
            width:80%;
        }
        
        .gridday {
            grid-area: day;
        }
        
        .gridtxt1 {
            grid-area: text1;
        }
        
        .gridtxt2 {
            grid-area: text2;
        }
        
        .gridtxt3 {
            grid-area: text3;
        }
        
        .gridslider {
            grid-area: slider;
        }
        
        .gridbutton {
            grid-area: button;
        }
        
        .song-info a {
            text-decoration: none;
            color: inherit;
        }
        
        .song-info-label {
            color: #FFD700;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 2px;
            font-weight: bold;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
            letter-spacing: 1px;
            padding-left: 4px;
        }

        .song-info-display {
            margin-top: 20px;
            background: #FFE4B5;
            color: rgba(0,0,0,0.7);
            text-shadow: 2px 2px 0px rgba(0,0,0,0.15);
            padding: 8px;
            margin-bottom: 15px;
            border-radius: 4px;
            font-family: LCD, monospace;
            font-size: 18px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 10px 2px #FFE4B588;
            border: 1px solid #000;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .song-info-display.small {
            font-size: 13px;
        }


        .song-info-display.off {
            background: #2F4F4F;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
        }

        .song-info-display::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,228,181,0.5), transparent);
        }

        .autoplay-toggle {
            position: relative;
            flex-direction: column;
            align-items: flex-end;
            height: 34px;
        }

        .autoplay-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
            visibility: hidden;
        }

        .autoplay-slider {
            position: relative;
            border-radius: 4px;
            cursor: pointer;
            width: calc(100% - 23px);
            height: 32px;
            margin-top: -13.5px;
            background-color: #8b0000;
            transition: .4s;
            color: white;
            font-family: monospace;
            text-shadow: 2px 2px 0px #8b0000;
            display: flex;
            align-items: center;
            padding: 2px 10px;
            justify-content: flex-end;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.3),
            inset 2px 2px 0px rgba(0,0,0,0.3),
            inset -2px -2px 0px rgba(255,255,255,0.3);
        }
        
        .autoplay-slider:active {
            box-shadow: inset 2px 2px 0px rgba(0,0,0,0.3),
            inset -2px -2px 0px rgba(255,255,255,0.3);
        }
        
        .line {
            height: 8px;
            width: 100%;
            background-color: rgba(0,0,0,0.5);
            box-shadow: inset 2px 2px 0px rgba(0,0,0,0.3),
            inset -2px -2px 0px rgba(255,255,255,0.3);
        }

        .autoplay-slider:before {
            position: absolute;
            content: "AUS";
            height: 26px;
            width: 40px;
            left: 6px;
            bottom: 5.5px;
            background-color: white;
            transition: .4s;
            border-radius: 2px;
            color: #8b0000;
            display: flex;
            align-items: center;
            justify-content: center;
            text-shadow: none;
            font-size: 12px;
             box-shadow: inset -2px -2px 0px rgba(0,0,0,0.3),
                       inset 2px 2px 0px rgba(255,255,255,0.3);
        }

        input:checked + .autoplay-slider {
            background-color: #c41e3a;
            justify-content: flex-start;
        }

        input:checked + .autoplay-slider:before {
            transform: translateX(calc(100% + 60px));
            content: "AN";
        }


        .buttons {
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding: 0px 0px;
        }
        
        .stop-button {
            margin-top: 27px;
            padding: 10px 20px 13px 20px;
            background: #c41e3a;
            color: white;
            border: 3px solid #8b0000;
            border-radius: 5px;
            font-family: monospace;
            font-size: 16px;
            cursor: pointer;
            box-shadow: inset -2px -2px 0px rgba(0,0,0,0.3),
                       inset 2px 2px 0px rgba(255,255,255,0.3);
            text-shadow: 2px 2px 0px #8b0000;
            display: block;
            width: 100%;
            height: calc(100% - 102px);
        }

        .stop-button::before {
            content: '';
            position: absolute;
            top: -5px;
            left: 0;
            right: 0;
            height: 5px;
            background: rgba(255,255,255,0.8);
            border-radius: 5px 5px 0 0;
        }

        .stop-button:hover {
            background: #d42e4a;
        }

        .stop-button:active {
            box-shadow: inset 2px 2px 0px rgba(0,0,0,0.3),
                       inset -2px -2px 0px rgba(255,255,255,0.3);
        }
        
        
        @media screen and (max-width: 890px) {
            .song-info {
                flex-direction: column;
                gap:0px;
            }
        
            .displays {
                width:100%;
            }
        
            .song-info-label {
                font-size: 10px;
                text-transform: uppercase;
            }

            .song-info-display {
                font-size: 12px;
            }

            .buttons {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: row;
            }

            .autoplay-toggle {
                position: relative;
                flex-direction: column;
                align-items: flex-end;
                height: 34px;
            }

            .autoplay-toggle input {
                opacity: 0;
                width: 0;
                height: 0;
                visibility: hidden;
            }

            .autoplay-slider {
                width: 34px;
                margin-top: -16%;
                margin-left: 10px;
            }

            input:checked + .autoplay-slider:before {
                transform: translateX(0px);
            }
            
            .stop-button {
                margin-top: 0px;
                margin-left: 20px;
            }
        }
        
        @media screen and (max-width: 300px) {
            .song-info {
                flex-direction: column;
                gap:0px;
            }
        
            .displays {
                width:100%;
            }
        
            .song-info-label {
                font-size: 10px;
                text-transform: uppercase;
            }

            .song-info-display {
                font-size: 12px;
            }

            .buttons {
                flex-direction: column;
            }

            .autoplay-toggle {
                position: relative;
                flex-direction: column;
                align-items: flex-end;
                height: 34px;
            }

            .autoplay-toggle input {
                opacity: 0;
                width: 0;
                height: 0;
                visibility: hidden;
            }

            input:checked + .autoplay-slider:before {
                transform: translateX(0px);
            }
        }