@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

:root {
  --red: #A50021;
  --blue: #3B8BA0;
  --white: #F4F4F4;
}

body {
  font-family: "Space Grotesk", sans-serif;
  font-optical-sizing: auto;


  letter-spacing: 0.002em;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  display: flex;
  justify-content: center;
}


.main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  isolation: isolate;
}

.logo {
  width: 200px;
  height: fit-content;
  padding-bottom: 12px;
}

.paragraph {
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  margin-bottom: 30px;
}

.album-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  position: relative;
}

.snippet {
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 12px;
  align-self: flex-end;
}

.album {
  width: 160px;
  height: 160px;
  border-radius: 100%;

  /* OVERRIDES */
  filter: none !important;
  mix-blend-mode: normal !important;
  background: none !important;
}

.list {
  flex: auto;
  font-size: 12px;
  line-height: 16px;
}

.audio-container {
  display: flex;
  align-items: center;
  gap: 12%;
  isolation: isolate;

}

ul li::before {
  content: "  ";
  display: inline-block;
  width: 1em;
  margin-right: 0.3em;
  text-align: center;
}

.favorite {
  font-weight: bold;
}

.super-favorite {
  font-weight: bold;
}

.favorite::before {

  content: "🩶";
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 1px;
}

.super-favorite::before {
  content: "🖤";
  vertical-align: middle;
  display: inline-block;
  position: relative;
  top: 1px;
}


@media screen and (max-width: 480px) {
  .audio-container {
    gap: 8%;
  }

  .paragraph {
    margin-bottom: 40px;
  }

  .snippet {
    left: 0;
  }
}