body {
    font-family: 'Poppins', sans-serif;
   scroll-behavior: smooth;
}
.glass-effect {
    background: rgba(41, 41, 41, 0.164);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.text-outline {
    -webkit-text-stroke: 2px rgba(255,255,255,0.9);
    color: transparent;
}
.countdown-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(185, 232, 37, 0.3);
    box-shadow: 0 0 10px rgba(185, 232, 37, 0.2);
}




.glass-effect {
    background: rgba(41, 41, 41, 0.164);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.video-progress {
    @apply w-full h-1 bg-white/20 rounded overflow-hidden cursor-pointer;
}
.video-progress-filled {
    @apply h-full bg-white/90 rounded transition-all duration-100;
    width: 0%;
}
.video-controls {
    @apply absolute bottom-0 left-0 right-0 bg-black/80 p-2 opacity-0 transition-opacity duration-200;
}
.video-container:hover .video-controls {
    @apply opacity-100;
}
.video-time {
    @apply text-xs text-white/90 select-none;
}
.playlist-item {
    @apply relative;
}
.playlist-item.active::before {
    content: '▶';
    @apply absolute -left-2 text-primary text-xs;
}
.video-container:hover .video-progress {
    @apply h-[3px];
}
.video-container:hover .video-progress-filled {
    @apply h-[3px];
}
.video-progress:hover {
    @apply h-[5px];
}
.video-progress:hover .video-progress-filled {
    @apply h-[5px];
}
.video-controls button:hover {
    @apply bg-white/10 rounded;
}

/* Volume Slider Styles */
input[type="range"] {
    @apply appearance-none bg-white/20 rounded-lg h-1;
}

input[type="range"]::-webkit-slider-thumb {
    @apply appearance-none w-3 h-3 bg-white rounded-full cursor-pointer;
}

input[type="range"]::-moz-range-thumb {
    @apply w-3 h-3 bg-white rounded-full cursor-pointer border-0;
}

input[type="range"]::-ms-thumb {
    @apply w-3 h-3 bg-white rounded-full cursor-pointer;
}