body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background: linear-gradient(135deg, #8B0000, #660000, #990000, #660000);
            background-size: 400% 400%;
            animation: gradientFlow 15s ease infinite;
            display: flex;
            flex-direction: column;
            font-family: 'Montserrat', sans-serif;
            overflow: hidden;
            position: relative;
        }

        @keyframes gradientFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 2rem 4rem;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 10;
        }

        .logo {
            font-family: 'Lobster', cursive;
            font-size: 5rem;
            font-weight: normal;
            color: #ffffff;
            text-shadow: 
                0 0 30px rgba(255, 255, 255, 0.3),
                2px 2px 4px rgba(0, 0, 0, 0.3);
            margin: 0;
            line-height: 1;
            letter-spacing: 2px;
        }

        .host-info {
            position: fixed;
            bottom: calc(2.5rem + 300px + 120px);
            left: 8rem;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 10;
            transition: opacity 0.3s ease;
        }

        .host-name {
            font-size: 3.5rem;
            font-weight: 400;
            margin-bottom: 0.5rem;
            line-height: 1.2;
			transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .host-title {
            font-size: 2rem;
            font-weight: 300;
            opacity: 0.9;
			transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .now-playing-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2.5rem 4rem;
            background: rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 10;
            display: flex;
            align-items: center;
            gap: 3rem;
        }

        .album-art {
            width: 300px;
            height: 300px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            background: rgba(0, 0, 0, 0.2);
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
        }

        .album-art::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(255,255,255,0.1) 0%, 
                rgba(255,255,255,0) 50%);
        }

        .album-art img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .album-art img.loaded {
            opacity: 1;
        }

        .album-art.error {
            position: relative;
            background: linear-gradient(45deg, #660000, #990000);
        }

        .album-art.error::after {
            content: '🎵';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            color: rgba(255, 255, 255, 0.8);
        }
		
		/* DJ section styles */
		.dj-section {
		   position: fixed;
		   top: 50%;
		   right: 4rem;
		   transform: translateY(-50%);
		   width: 400px;
		   z-index: 5;
		   perspective: 1000px;
		}

		.dj-image-container {
		   width: 400px;
		   height: 500px;
		   position: relative;
		   transform-style: preserve-3d;
		   transition: transform 1s ease;
		   border-radius: 30px;
		   background: rgba(0, 0, 0, 0.1);
		   box-shadow: 0 0 30px rgba(139, 0, 0, 0.2);
			transform-style: preserve-3d;
			transform: rotateY(-5deg) translateZ(0);
			animation: subtle-float 10s ease-in-out infinite;
		}

		.dj-image-side {
		   position: absolute;
		   width: 100%;
		   height: 100%;
		   backface-visibility: hidden;
		   border-radius: 30px;
		   overflow: hidden;
		   background: rgba(0, 0, 0, 0.1);
		   box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
		}

		.dj-image-front {
		   transform: rotateY(0deg);
		}

		.dj-image-back {
		   transform: rotateY(180deg);
		}

		.dj-image {
		   width: 100%;
		   height: 100%;
		   object-fit: cover;
		   opacity: 0.85;
		   filter: contrast(1.1) brightness(0.9) saturate(0.85) hue-rotate(-5deg);
		   mix-blend-mode: luminosity;
		}

		.texture-overlay {
		   position: absolute;
		   inset: 0;
		   background-image: repeating-linear-gradient(
			   45deg,
			   rgba(0, 0, 0, 0.05) 0px,
			   rgba(0, 0, 0, 0.05) 1px,
			   transparent 1px,
			   transparent 4px
		   );
		   mix-blend-mode: overlay;
		   opacity: 0.3;
		   pointer-events: none;
		}

		/* Now playing styles */
		#nowPlaying {
		   font-family: 'Montserrat', sans-serif;
		   color: rgba(255, 255, 255, 0.9);
		   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
		}

		#nowPlaying .label {
		   font-size: 1.5rem;
		   font-weight: 300;
		   margin-bottom: 0.5rem;
		}

		.song-title {
		   font-size: 3rem;
		   font-weight: 400;
		   color: rgba(255, 255, 255, 0.95);
		}

		/* Animation classes */
		.fade-out {
		   opacity: 0 !important;
		}

		.fade-in {
		   animation: fadeIn 0.5s ease-in;
		}

		@keyframes fadeIn {
		   from { opacity: 0; transform: translateY(10px); }
		   to { opacity: 1; transform: translateY(0); }
		}

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

		.snowflake {
		   position: fixed;
		   color: white;
		   font-size: 1em;
		   text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
		   animation: snowfall linear infinite;
		   z-index: 1;
		}

		@keyframes snowfall {
		   0% { transform: translateY(-10vh) rotate(0deg); }
		   100% { transform: translateY(100vh) rotate(360deg); }
		}
		
		@keyframes subtle-float {
			0%, 100% {
				transform: rotateY(-5deg) translateZ(0) translateY(0);
			}
			50% {
				transform: rotateY(-4deg) translateZ(10px) translateY(-5px);
			}
		}