@tailwind base;
@tailwind components;
@tailwind utilities;

        .bg-spotify-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm23.1 72.1c-1.1 1.8-3.5 2.4-5.3 1.3-14.3-8.7-32.3-10.7-53.5-5.8-2.1.5-4.1-1-4.6-3-.5-2.1 1-4.1 3-4.6 23-5.4 42.9-3.1 58.8 6.7 1.8 1 2.4 3.5 1.3 5.3l.3-.1zm6.3-13.7c-1.4 2.2-4.3 2.9-6.5 1.5-16.4-10.1-41.5-13-61-7.1-2.5.6-5.1-.8-5.7-3.3-.6-2.5.8-5.1 3.3-5.7 22-6.3 49.8-3.1 68.5 8.2 2.2 1.4 2.9 4.3 1.5 6.5l-.1-.1zm.6-14.3c-19.6-11.7-51.9-12.8-70.6-7.1-3 .9-6.1-.8-7-3.8-.9-3 .8-6.1 3.8-7 21.2-6.4 56.6-5.1 79.1 8.2 2.7 1.6 3.5 5 1.9 7.7-1.6 2.7-5 3.5-7.7 1.9l-.5-.1z' fill='%231DB954' fill-opacity='0.1'/%3E%3C/svg%3E");
        }
        .bg-youtube-pattern {
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M98.3 30.2c-1.1-4.2-4.4-7.5-8.6-8.6C81.5 18.3 50 18.3 50 18.3s-31.5 0-39.7 3.3c-4.2 1.1-7.5 4.4-8.6 8.6C0 38.4 0 50 0 50s0 11.6 1.7 19.8c1.1 4.2 4.4 7.5 8.6 8.6 8.2 3.3 39.7 3.3 39.7 3.3s31.5 0 39.7-3.3c4.2-1.1 7.5-4.4 8.6-8.6 1.7-8.2 1.7-19.8 1.7-19.8s0-11.6-1.7-19.8zM40 60.5V39.5L65.5 50 40 60.5z' fill='%23FF0000' fill-opacity='0.1'/%3E%3C/svg%3E");
        }
        .slider-thumb::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1DB954;
            cursor: pointer;
        }
        .slider-thumb::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #1DB954;
            cursor: pointer;
        }