body {
  margin: auto;
  width: 99vw;
  background-color: #ffd6f4;
  font-family: "Iosevka", "monospace";
  color: DimGrey;
}
.page {
  max-width: max(80ch, 95%);
  margin: 0 max(1.5em, 5%);
  padding: 0 20px;
  margin-bottom: 15em;
}

@font-face {
  font-family: "Iosevka";
  src: url("Iosevka.woff2");
}
@font-face {
  font-family: "Gloria";
  src: url("gloria.ttf");
}

h1 {
  font-family: "Gloria", "cursive";
  font-size: 4em;
  margin: 0.5em -1.5em 1.5em -1.5em;
  padding-left: 1em;
  max-width: 100%;
}

#energy {
  color: HotPink;
  text-shadow: 0 0 10px white;
}

#tagline {
  float: right;
  position: relative;
  right: 0;
  top: -6em;
}

.strike {
  text-decoration: line-through;
}

h2 {
  color: DeepPink;
  margin-top: 3em;
  margin-left: -0.5em;
  text-shadow: 0 0 2px white;
}

.rainbow {
  background-image: linear-gradient(
    -225deg,
    red 0%,
    orange 20%,
    yellow 40%,
    green 60%,
    blue 80%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size: 110%;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

audio {
  width: 50%;
  background-color: hotpink;
}
audio::-webkit-media-controls-panel {
  color: hotpink;
  background-color: hotpink;
}