/* @tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  input[type='range']::-webkit-slider-thumb {
    @apply appearance-none w-5 h-5 bg-green-500 rounded-full;
  }

  input[type='range']::-moz-range-thumb {
    @apply appearance-none w-5 h-5 bg-green-500 rounded-full;
  }
} */
#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #4CAF50;
    border-radius: 50%;
  }
  #songImg {
    transition: transform 0.3s ease-in-out;
    border-radius: 9999px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  
  #songImg.playing {
    animation: wavePulse 2s ease-in-out infinite;
  }
  @keyframes wavePulse {
    0% {
      box-shadow:
        0 0 0 0 rgba(255, 99, 255, 0.7),
        0 0 0 10px rgba(32, 34, 175, 0.5),
        0 0 0 20px rgba(224, 11, 11, 0.356);
        transform: scale(1) rotate(0deg);
    }
    25% {
      box-shadow:
        0 0 0 0 rgba(255, 99, 255, 0.7),
        0 0 0 10px rgba(99, 102, 255, 0.5),
        0 0 0 20px rgba(0, 200, 255, 0.3);
        transform: scale(1.05) rotate(3deg);
    }
    50% {
      box-shadow:
        0 0 5px 5px rgba(255, 99, 255, 0.5),
        0 0 15px 15px rgba(99, 102, 255, 0.3),
        0 0 25px 25px rgba(0, 200, 255, 0.2);
        transform: scale(1) rotate(0deg);
    }
    75% {
      box-shadow:
        0 0 5px 5px rgba(255, 99, 255, 0.5),
        0 0 15px 15px rgba(99, 102, 255, 0.3),
        0 0 25px 25px rgba(0, 200, 255, 0.2);
        transform: scale(1.05) rotate(-3deg);
    }
    100% {
      box-shadow:
        0 0 0 0 rgba(255, 99, 255, 0.7),
        0 0 0 10px rgba(99, 102, 255, 0.5),
        0 0 0 20px rgba(223, 236, 35, 0.3);
        transform: scale(1) rotate(0deg);
    }
  }