:root {
  --player-height: 115px;
  --player-background-color: #003554; 
  --controls-button-bg-color: #006494; 
  --controls-button-bg-active: #9a031e; 
  --controls-button-text-color: rgba(220, 220, 220, 1); 
  --controls-button-bg-hover-color: #00a6fb; 
  --playlist-button-text-color: #f5e6df;
  --playlist-border-color: hotpink; 
  --mute-button-bg-color: transparent;
  --playlist-font-family: Verdana, serif;
  --playlist-text-color: #dcdcdc; 
  --playlist-bg: #2c2f48; 
  --playlist-bg-hover: #10316B; 
  --playlist-bg-active: #014f86; 
  
    --tooltip-bg-color: black; /* Background color of the tooltip */
  --tooltip-text-color: white; /* Text color of the tooltip */
  --tooltip-padding: 5px 10px; /* Padding of the tooltip */
  --tooltip-border-radius: 5px; /* Border radius of the tooltip */
  --tooltip-font-size: 12px; /* Font size of the tooltip */
  --tooltip-transition: opacity 0.3s; /* Transition effect of the tooltip */
  --tooltip-distance: -35px; /* Distance of tooltip from the top */
}


.parent-container {
  width: 425px;
}

#mini-audio-player {
  height: var(--player-height);
  position: relative;
  background: var(--player-background-color);
  border: 2px solid black;
 min-width:425px;
  max-width:500px;
}

#playlist {
  position: absolute;
  z-index: -1 !important;
  width: 78%;
  margin-top: 0;
  padding: 0;
  list-style: none;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  height: 68px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 2px solid black;
  overflow: scroll;
  color: var(--playlist-text-color);
  letter-spacing: 1px;
  background: red;
}

#mini-audio-player.playing #playlist {
  margin-top: -70px;
  overflow:hidden;
}
#playlist.open #playlist ul {
   height: 70px;
}

#playlist ul {
  margin: 0;
  list-style: none;
  height: 70px;
  overflow: scroll;
  width: 100%;
}

#playlist li {
  height: 70px;
  padding-left: 30px;
  display: grid;
  align-content: center;
  cursor: pointer;
  background:var(--playlist-bg);
  border-bottom:1px solid rgba(255,255,255,0.5)
}
#playlist li.active {
  background:var(--playlist-bg-active);
    
}
#playlist li:hover{
  background:var(--playlist-bg-hover);
    
}


#playlist li h2, #playlist li h3 {
  margin: 0;
  line-height: 1;
}

#playlist li h2 {
  font-size: 18px;
  text-transform:uppercase;
  padding-bottom:3px;
}

#playlist li h3 {
  font-size: 16px;
  text-transform:lowercase;
}

#mini-audio-player .spinning-album {
  position: absolute;
  z-index: 3;
  top: -40px;
  left: -30px;
  width: 125px;
  aspect-ratio: 1/1;
}

#mini-audio-player.playing .spinning-album {
  top: -90px;
  transform: scale(1.10);
}
#record {transition: all 0.5s ease-in-out;}

.spinning-album img {
  width: 100%;
}

#mini-audio-player.playing img {
  animation: spin 5s linear infinite;
}

#record, #playlist {
  transition: all 0.5s ease-in-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.player-controls {
  position: absolute;
  width: calc(100% - 60px); 
  right: 0;
  top: 5px;
  z-index: 2;
  height: 100px;
  transition: all 0.5s ease-in-out;
}
.player-controls button {
  font-size:20px !important;
  text-transform:uppercase;
  border-radius:5px;
 
}
#loopBtn.is-active, #autoPlayToggleBtn.is-active {
  background:var(--controls-button-bg-active)}
.range {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

.play-songs {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

#currentTime, #duration {
  font-size: 8px;
  color: white;
}

.separator {
  padding-left: 5px;
  padding-right: 5px;
  color: white;
}

.player-controls button {
  background: var(--controls-button-bg-color);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  color: var(--controls-button-text-color);
  font-size: 18px;
  margin: 0;
  cursor: pointer;
  border-width: 0px;
  transition: all 0.5s ease-in-out;
}

@media only screen and (max-width: 768px) {
  #mini-audio-player {
    transform:scale(0.60)
  }
}

.player-controls button:hover {
  background: var(--controls-button-bg-hover-color);
}

#loopBtn {
  margin-left:10px;
  margin-right:5px;
}
#playPauseBtn {margin-left:2px;margin-right:2px;}

.range {
  display: flex;
  align-items: center;
  width: 60%;
  margin-top: 15px;
  margin-bottom: 10px;
}

input[type="range"] {
  width: 100%;
}

#currentTime, .separator, #duration {
  font-size: 15px;
  color: white;
}

#currentTime {
  padding-left: 20px;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Add underline effect */
}

.tooltip::after {
  content: attr(data-tooltip); /* Get the default tooltip content from data attribute */
  position: absolute;
  background-color: var(--tooltip-bg-color, black); /* Default background color */
  color: var(--tooltip-text-color, white); /* Default text color */
  padding: var(--tooltip-padding, 5px 10px);
  border-radius: var(--tooltip-border-radius, 5px);
  font-size: var(--tooltip-font-size, 12px);
  white-space: nowrap; /* Prevent tooltip from breaking into multiple lines */
  visibility: hidden; /* Hide tooltip by default */
  opacity: 0; /* Make tooltip transparent */
  transition: var(--tooltip-transition, opacity 0.3s); /* Add transition effect */
  top: var(--tooltip-distance, 10px); /* Show tooltip 10px from the top */
  left: 50%;
  transform: translateX(-50%);
}

/* Change the tooltip text when the element has the class is-active */
.tooltip.is-active::after {
  content: attr(data-active-tooltip); /* Get the active tooltip content from data attribute */
}

.tooltip:hover::after {
  visibility: visible; /* Show tooltip on hover */
  opacity: 1; /* Make tooltip fully opaque */
}


@media only screen and (max-width: 768px) {
}



body {
margin: 0;
  background: grey; /* Set background color */
  height: 100vh; /* Ensure full viewport height */
  font-size: calc(15px + 0.5vw);
 display: flex;
  align-items: center;       
  justify-content: center;

  flex-direction: column;
  overflow: hidden;
  color:white;
}
.link {color:white;font-weight:800;letter-spacing:1px;text-decoration:none;
transition: all 0.5s ease-in-out
}
.link:hover {color:#003554}
.copy {text-align:center}