@font-face {
  font-family: "Deutsch";
  src: url("/static/fonts/Deutsch.woff2") format("woff2");
}
@font-face {
  font-family: "Asgard";
  src: url("/static/fonts/Asgard_Fat.woff2") format("woff2");
}
@font-face {
  font-family: "Asgard-Thin";
  src: url("/static/fonts/Asgard_Regular.woff2") format("woff2");
}

html,
body {
  margin: 0;
  overflow-x: hidden;
}

.backLayer1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-image: url(/static/images/soloevelynn_background.webp);
  background-size: contain;
  background-repeat: repeat;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: brightness(0.5);
}
.backLayer2 {
  position: absolute;
  top: 50vh;
  left: 55vw;
  width: 75vw;
  height: 100vh;
  background-image: url(/static/images/eveup_0.webp);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(6px 6px 8px #212277);
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}
.backLayer3 {
  position: absolute;
  top: 15vh;
  left: 15vw;
  width: 30vw;
  height: 30vh;
  background-image: url(/static/images/eveup_1.webp);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(6px 6px 8px #212277);
}
.backLayer4 {
  position: absolute;
  top: 65vw;
  left: 85vw;
  width: 30vw;
  height: 30vw;
  background-image: url(/static/images/eveup_2.webp);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter: drop-shadow(6px 6px 8px #212277);
}
.contentContainer0 {
  position: relative;
  margin-top: 92vh;
  left: 0;
  width: 100%;
  height: auto;
  background: linear-gradient(90deg, #0e0f17 0%, #0c0e36 35%, #0b0c10 100%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  row-gap: 0rem;
  column-gap: 4vw;
  padding-top: 4vw;
  padding-right: 4vw;
  padding-bottom: 4vw;
  padding-left: 4vw;
  box-sizing: border-box;
  overflow: hidden;
}

@media (min-width: 1200px) {
  .contentContainer0 {
    column-gap: 8vw;
  }
}

@keyframes bobTiltApexSmooth {
  0% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -50%) translateY(-10px) rotate(-15deg);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0) rotate(0deg);
  }
}

@keyframes pulseGlow {
  0% {
    filter: drop-shadow(0 0 5px #2228bd);
  }

  50% {
    filter: drop-shadow(0 0 20px #090d3a);
  }

  100% {
    filter: drop-shadow(0 0 5px #2228bd);
  }
}

.bob-tilt {
  animation: bobTiltApexSmooth 2.5s ease-in-out infinite;
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

.glow-on {
  filter: drop-shadow(0 0 5px #2228bd);
}

a {
  text-decoration: none;
  color: inherit;
}

.backLayerH1_1 {
  font-family: "Asgard", sans-serif;
  font-size: 6vw;
  color: #f5f7ff;
  position: absolute;
  top: 44vw;
  left: 15vw;
  display: inline-block;
  transition:
    filter 0.5s ease,
    transform 0.5s ease;
  transform-origin: center;
  cursor: default;
  user-select: none;
  text-decoration: none;
}
.backLayerH1_1.expand {
  transform: scale(1.05);
}
.backLayerH1_1_span_1 {
  color: #fff600;
}

.albumContainer {
  position: relative;
  height: 16vw;
}

.albumArt {
  position: relative;
  width: 10vw;
  height: 10vw;
  background-image: url(/static/images/soloevelynn_albumart.webp);
  background-size: contain;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  transition: transform 0.25s ease;
  cursor: pointer;
}

.albumArt1 {
  background-image: url(/static/images/cold_front_albumart.webp);
}
.albumArt2 {
  background-image: url(/static/images/NOTLOWERCASE_albumart.webp);
}
.albumArt3 {
  background-image: url(/static/images/totallycoolremix_albumart.webp);
}
.albumArt4 {
  background-image: url(/static/images/dyevelynnmix25_albumart.webp);
}
.albumArt5 {
  background-image: url(/static/images/isthisahouse_albumart.webp);
}

.albumName {
  font-family: "Asgard", sans-serif;
  font-size: 2vh;
  color: #f5f7ff;
  position: relative;
  top: -19vw;
  left: 12vw;
  display: inline-block;
  transition:
    filter 0.5s ease,
    transform 0.5s ease;
}

.albumName.expand {
  transform: scale(1.15);
}

.albumBar {
  position: relative;
  top: -10vw;
  left: 11vw;
  display: inline-block;
  background-color: #fff600;
  border-radius: 5px;
  width: 0.4vw;
  height: 10vw;
  padding: 0 0 0 0;
}

.albumBar1 {
  background-color: #d7a38a;
}
.albumBar2 {
  background-color: #ae45da;
}
.albumBar3 {
  background-color: #fc448a;
}
.albumBar4 {
  background-color: #d7d6fe;
}
.albumBar5 {
  background-color: #4f779a;
}

.trackText {
  font-family: "Asgard-Thin", sans-serif;
  font-size: 1.2vw;
  color: #f5f7ff;
  position: relative;
  top: -20vw;
  left: 12.5vw;
  display: block;
  transition:
    filter 0.5s ease,
    transform 0.5s ease,
    color 0.5s ease;
  width: 13vw;
}

.expand {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .contentContainer0 {
    margin-top: 56vw;
  }
  .backLayer1 {
    width: 102%;
    height: 102%;
    left: 49%;
  }
  .contentContainer0 {
    padding-top: 6vw;
    row-gap: 1.5rem;
    overflow: hidden;
  }
  .albumArt {
    width: 30vw;
    height: 30vw;
  }
  .albumBar {
    top: -29vw;
    left: 32vw;
    width: 0.8vw;
    height: 28vw;
  }
  .albumName {
    top: -54vw;
    left: 35vw;
  }
  .albumContainer {
    height: 30vw;
  }
  .trackText {
    top: -56vw;
    left: 36vw;
    height: auto;
    width: 25vw;
    font-size: 3.5vw;
    margin: 0 0 4px 0;
  }
  .trackContainer {
    display: flex;
    flex-wrap: wrap;
    height: 12vh;
    flex-direction: column;
    width: 60%;
  }
}