@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap');

@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(/fonts/viet.woff2) format('woff2');
}

@font-face {
    font-family: "Bitcount Grid Single";
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: url(/fonts/bitcount.woff2) format('woff2');
}

* {
    background-color: #0f0404;
    --common: #dbdbdb;
    --uncommon: #5adf86;
    --rare: #48a4e2;
    --legendary: #ffe143;
    font-family: "Be Vietnam Pro", "Arimo", sans-serif;
    font-optical-sizing: auto;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 80vh;
    color: white;
}

.song-row.expanded {
    height: 100vh !important;
}

.song-row {
    text-align: center;
    width: 100%;
    height: 10vh;
    transition: height 0.3s ease-in-out;
    cursor: pointer;
}

.song-row > h2 {
    transition: all 0.3s ease-in-out;
    text-shadow: 0px 5px 3px black;
}

.song-row > h2:hover,
.song-row > h2:focus {
    transform: translateY(-2px);
}

.song-row > h2:active {
    transform: translateY(1px);
}

.common {
    color: var(--common);
}

.uncommon {
    color: var(--uncommon);
}

.rare {
    color: var(--rare);
}

.legendary {
    color: var(--legendary);
}

.song-row .blurred {
    filter: blur(25px);
    -webkit-filter: blur(25px);
}

.song-row .blurred:hover {
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

.song-row.expanded .song-details {
    display: flex !important;
    flex-direction: row;
    padding: 4%;
    cursor: auto;
}

.song-row.expanded .song-details div {
    width: 50%;
}

.song-row .song-details {
    display: none;
    height: 50vh;
    width: 100%;
    color: white;
}

.hidden {
    display: none !important;
}

.intro {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 100dvh;           /* Takes up full screen height */
}

.intro button {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
    height: 100dvh;  
    width: 100%;
    color: white;
    font-size: x-large;
    border: 0;
    transition: all 0.3s ease-in-out;
}

.intro button:hover {
    font-size: xx-large;
    cursor: pointer;
}

.intro button:active {
    font-size: large;
    opacity: 80%;
}

.intro button span {
    padding: 0.5em;
}

.wavesurfer {
    position: relative;
    height: 128px; /* or whatever height you want */
    width: 50%;
}

#waveform {
      cursor: pointer;
      width: 90%;
}

#waveform > div:last-child {
    width: 200% !important;
}

#hover {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      pointer-events: none;
      height: 100%;
      width: 0;
      mix-blend-mode: overlay;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    #waveform:hover #hover {
      opacity: 1;
    }
    #time,
    #duration {
      position: absolute;
      z-index: 11;
      top: 50%;
      margin-top: -1px;
      transform: translateY(-50%);
      font-size: 11px;
      background: rgba(0, 0, 0, 0.75);
      padding: 2px;
      color: #ddd;
    }
    #time {
      left: 0;
      width: 50px;
    }
    #duration {
      right: -80%;
      width: 50px;
    }

.song-details {
    text-align: left;
}

.body-link {
    color: #ff607a;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.body-link:hover,
.body-link:focus {
    color: #ff9cad;
}

.body-link:active {
    opacity: .8;
}

.track-footer {
    display: block;
    border-top: 2px double white;
    font-size: smaller;
    width: 100%;
}

.downloads-accepted {
    width: 100% !important;
}

/* From Uiverse.io by zjssun */ 
.download-btn {
  position: relative;
  padding: 10px 22px;
  border-radius: 6px;
  border: none;
  color: #fff;
  cursor: pointer;
  background-color: #6c1c2a;
  transition: all 0.2s ease;
}

.download-btn:active {
  transform: scale(0.96);
}

.download-btn:before,
.download-btn:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.download-btn:hover:before {
  top: -70%;
  background-image: radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #6c1c2a 20%, transparent 30%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #6c1c2a 15%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
  background-position: 50% 120%;
  animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }

  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }

  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

.download-btn:hover::after {
  bottom: -70%;
  background-image: radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #6c1c2a 15%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%),
    radial-gradient(circle, #6c1c2a 20%, transparent 20%);
  background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 50% 0%;
  animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
  0% {
    background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
      70% -10%, 70% 0%;
  }

  50% {
    background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
      105% 0%;
  }

  100% {
    background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
      110% 10%;
    background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
}

/* From Uiverse.io by SujitAdroja */ 
.btn {
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgb(255, 255, 255);
  padding: 10px 20px;
  font-size: 17px;
  cursor: pointer;
  font-weight: bold;
  background: transparent;
  position: relative;
  transition: all 1s;
  overflow: hidden;
}

.btn:hover {
  color: #ff607a;
}

.btn::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  top: 0;
  left: -40px;
  transform: skewX(45deg);
  background-color: rgb(255, 255, 255);
  z-index: -1;
  transition: all 1s;
}

.btn:hover::before {
  width: 160%;
}