.song-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--dblue);
  border: 2px solid var(--tblue);
  border-radius: 15px;
  gap: 20px;
  padding: 10px;

  min-width: 0;
  max-width: 100%;
}

/* THIS IS THE IMG SL, not the entire thing omg my names are so confusing */
.song-cover {
  width: 100px;
  height: 100px;
  border-radius: 15px;
  object-fit: cover;
}

.music-player {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 100%;
}

.song-title {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.2rem);
  color: var(--white);
}

.song-desc {
  margin: 0;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  color: var(--white);
}

.version-select {
  background: transparent;
  border: 1px solid var(--lblue);
  color: var(--white);
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  border-radius: 8px;
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.play-btn, .pause-btn {
  all: unset;
  cursor: pointer;
  width: 20px;
  height: 20px;
  transition: transform 0.1s ease;
}

.play-btn:hover,
.pause-btn:hover {
  transform: scale(1.15);
}

/* SLIDERRRR CUSTOMISATION */
.seek-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: var(--glassviolet);
  outline: none;
  margin-bottom: 12px;
}

.seek-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--glassviolet),
    var(--dyellow)
  );
  border-radius: 5px;
}

.seek-slider::-moz-range-track {
  height: 6px;
  background: linear-gradient(
    90deg,
    var(--glassviolet),
    var(--dyellow)
  );
  border-radius: 5px;
}

.seek-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: #6f78ff;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  transition: 0.15s;
  margin-top: -8px; /* centers thumb with track */
}

.seek-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #6f78ff;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  transition: 0.15s;
}

.seek-slider:hover::-webkit-slider-thumb {
  transform: scale(1.1);
}

.seek-slider:hover::-moz-range-thumb {
  transform: scale(1.1);
}