@font-face {
  font-family: 'syne';
  src: url('fonts/Syne-Regular.woff2') format('woff2'),
       url('fonts/Syne-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

  }
  100% {
      background-position: 0% 0%;

  }
}

body {
  font-family: 'Syne', sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  
  background: radial-gradient(circle, #000000, #333333, #606060);
  background-size: 300% 300%;  /* Enlarging gradient for smoother shifts */
  animation: animateBackground 60s infinite alternate ease-in-out;
}





a {
  color: white;
}
a:hover{
color: black;
  background: white;
}

.container {
  width: 90%;
  max-width: 400px;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.album-art-container {
  position: relative;
  cursor: pointer; /* Makes it clear the container is interactive */
}
.album-art-container:hover {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.album-art {
  width: 100%;
  flex-shrink: 0;
}
/* ✅ Play button - Always centered when paused */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.8); /* ✅ White circular background */
  border-radius: 50%; /* ✅ Ensure it's always a perfect circle */
  border: none;
  width: 80px; /* ✅ Matched size with controls */
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease, opacity 0.3s ease;
}

/* ✅ Ensure SVG inside Play button is correctly sized */
.play-button svg {
  width: 40px;
  height: 40px;
  fill: black;
  transition: fill 0.3s ease;
}

/* ✅ Invert colors on hover */
.play-button:hover {
  background: black;
}

.play-button:hover svg {
  fill: white;
}

/* ✅ Control buttons (Prev, Pause, Next) - Ensure Circular Shape */
.control-button {
  width: 55px;
  height: 55px;
  background: rgba(255, 255, 255, 0.8); /* ✅ White circle */
  border-radius: 50%; /* ✅ Ensure Circular Shape */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, opacity 0.3s ease;
  opacity: 0; /* ✅ Initially hidden */
}

/* ✅ Ensure SVG icons inside buttons are properly sized */
.control-button svg {
  width: 24px;
  height: 24px;
  fill: black;
  transition: fill 0.3s ease;
}

/* ✅ Invert colors on hover */
.control-button:hover {
  background: black;
}

.control-button:hover svg {
  fill: white;
}

/* ✅ Hide controls (Prev, Pause, Next) initially */
.controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* ✅ Ensure Play button is always visible when paused */
.album-art-container.audio-paused .play-button {
  opacity: 1;
  visibility: visible;
  display: flex;
}

/* ✅ Hide Play button when playing */
.album-art-container.audio-playing .play-button {
  display: none;
}

/* ✅ Show Pause, Prev, and Next buttons ONLY on hover */
.album-art-container.audio-playing:hover .controls {
  opacity: 1;
}

/* ✅ Hide Pause button when not hovered */
.album-art-container.audio-playing .control-button {
  opacity: 0;
}

/* ✅ Show Pause button ONLY on hover when playing */
.album-art-container.audio-playing:hover .control-button {
  opacity: 1;
}


/* ✅ Progress bar styling */
.progress-container {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  cursor: pointer;
}

.progress-bar {
  width: 0%;
  height: 5px;
  background: rgba(255, 255, 255, 0.8);
  transition: width 0.2s ease;
}

/* ✅ Playlist styling */
.playlist {
  flex-grow: 1;
  overflow-y: auto;
  padding: 15px;
  list-style: none;
  color: white;
  text-align: left;
}

.playlist li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  transition: background 0.3s ease, color 0.3s ease;
}

.playlist li:first-child {
  padding-top: 5px;
}

.playlist li.active,
.playlist li:hover {
  background: white;
  color: black;
  border-radius: 5%;
}


.container-rip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
}

.letter {
  position: absolute;
  width: 10px; 
  height: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s ease-out;
}