.mixtapeContainer {
  position: relative;
  width: 80%; /* Adjust this to your desired width */
  max-width: 100%; /* Ensures the image does not exceed its natural size */
  margin: 0 auto; /* Centers the container */
}

.maxtapeImage {
  width: 100%; /* Ensures the image fills the container */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes extra space under the image */
}

.maxtapeSticker {
  position: absolute;
  top: 26.5%; /* Positions the label vertically in the middle */
  left: 50%; /* Positions the label horizontally in the middle */
  transform: translate(-50%, -50%); /* Centers the label precisely */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
  padding: 10px; /* Padding around the label text */
  font-size: 2.5vw; /* Responsive font size based on viewport width */
  white-space: nowrap; /* Ensures text doesn't wrap */
  width:57%;
  text-align:center;
  font-weight:700;
  height:10%;
  box-shadow:1px 1px 3px #303032;
  color: black;
}

.maxtapeLabel {
  position: absolute;
  top: 23.5%; /* Positions the label vertically in the middle */
  left: 50%; /* Positions the label horizontally in the middle */
  transform: translate(-50%, -50%); /* Centers the label precisely */
  padding: 10px; /* Padding around the label text */
  font-size: 2.5vw; /* Responsive font size based on viewport width */
  white-space: nowrap; /* Ensures text doesn't wrap */
  width:57%;
  text-align:center;
  font-weight:700;
  height:10%;
  color: black;
}

.spotifyButton {
  position: absolute;
  top: 76%; /* Positions the label vertically in the middle */
  left: 32%; /* Positions the label horizontally in the middle */
  transform: translate(-50%, -50%); /* Centers the label precisely */
  padding: 0px; /* Padding around the label text */
  width:10%;
  display:block;
  height:auto;
  border-radius:50%;
  box-shadow:1px 1px 3px #303032;
  border: 2px solid #ff7e00;
}

.applePlayButton {
  position: absolute;
  top: 76%; /* Positions the label vertically in the middle */
  left: 57%; /* Positions the label horizontally in the middle */
  transform: translate(-50%, -50%); /* Centers the label precisely */
  padding: 0px; /* Padding around the label text */
  width:10%;
  display:block;
  height:auto;
  border-radius:50%;
  box-shadow:1px 1px 3px #303032;
  border: 2px solid #ff7e00;
}

.youtubePlayButton {
  position: absolute;
  top: 76%; /* Positions the label vertically in the middle */
  left: 45%; /* Positions the label horizontally in the middle */
  transform: translate(-50%, -50%); /* Centers the label precisely */
  padding: 0px; /* Padding around the label text */
  width:10%;
  display:block;
  height:auto;
  border-radius:50%;
  box-shadow:1px 1px 3px #303032;
  border: 2px solid #ff7e00;
}

.loading{
  filter: grayscale(1);
  mask-image: linear-gradient(rgb(0 0 0 / 36%), #0000002e);
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


.tippy-box[data-theme~='grad'] {
  color: white;
  border: white;
  border-width: 1px;
  font-weight: bold;
  font-size: large;
  background:linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
  background:linear-gradient(to right top, #051937, #004d7a, #008793, #0e3b29, #140439);
  box-shadow: 0 1px 4px -2px black,inset 0 2px 1px -1px rgba(255,255,255,0.1);
  text-shadow: 4px 4px 6px rgba(13, 15, 18, 1);
}



/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

@media screen and (min-width: 700px) {
  .maxtapeLabel {
     font-size: 32px;
     width:500px;
     left: 350px;
  }

  .maxtapeSticker {
     width:500px;
     left: 350px;
  }

  .mixtapeContainer {
    width: 700px;
  }

  .maxtapeImage{
    width: 700px;
  }

  .spotifyButton {
    width: 64.6667px;
    left: 230px;
    top: 357px;
  }

  .applePlayButton {
    width: 64.6667px;
    left: 415px;
    top: 357px;
  }

  .youtubePlayButton {
    width: 64.6667px;
    left: 322.5px;
    top: 357px;
  }

}




.pulse-button:hover{
    border: 3px solid #ff1800;
}

.pulse-button {
  cursor: pointer;
  border: none;
  background: #5a99d4;
  box-shadow: 0 0 0 0 rgba(90, 153, 212, 0.5);
  -webkit-animation: pulse 1.5s infinite;
}


@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
  }
}