/* Custom styles */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Bebas+Neue&display=swap');

body {
    font-family: 'Orbitron', monospace;
}

/* Custom slider styling */
.slider::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
    cursor: pointer;
    border: 2px solid #1f2937;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

.slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, #fbbf24, #f59e0b);
    cursor: pointer;
    border: 2px solid #1f2937;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
}

/* Animation for dramatic effect */
@keyframes dramaticPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.animate-pulse {
    animation: dramaticPulse 2s infinite;
}

/* Film grain effect */
.film-grain::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background-image: 
        radial-gradient(circle at 20% 80%, white 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, white 1px, transparent 1px),
        radial-gradient(circle at 40% 40%, white 1px, transparent 1px);
    background-size: 100px 100px, 80px 80px, 60px 60px;
    pointer-events: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

/* Cinematic text shadow for headers */
.cinematic-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.3);
}