body {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  font-family: InterVariable, sans-serif;

  background-color: #000;
  color: #FFF;
}

.quote {
  line-height: 1;

  /* ... or `block` if it's active */
  display: none;

  font-weight: 800;
  font-size: calc(100vw / 19);

  text-align: center;
}

.quote.active {
  display: block;
}

.disclosure {
  display: inline-block;

  text-transform: uppercase;
  background: linear-gradient(135deg, #BDF, #36A);
  color: #000;
  border-radius: 0.3em;
  font-size: 45%;

  padding: 0.18em 0.4em;
  vertical-align: middle;
}

em {
  font-size: 70%;
  font-weight: 400;
  color: #CCC;
}

span.rainbow {
  color: transparent;

  background: linear-gradient(
    135deg,
    #E50000 0% 16.667%,
    #FF8D00 16.667% 33.333%,
    #FFEE00 33.333% 50%,
    #028121 50% 66.667%,
    #004CFF 66.667% 83.333%,
    #770088 83.333% 100%
  );

  background-clip: text;
  -webkit-background-clip: text;
}

span.bright {
  color: transparent;

  background: url(/hdr-white.jpg);
  background-size: cover;
  background-clip: text;

  -webkit-background-clip: text;
}

header {
  padding: 0.5em;
  color: #999;
}

header h1 {
  font: inherit;

  /* We'll set it to `block` when this `h1` is active. */
  display: none;
}

header h1.active {
  display: block;
}

main {
  flex: 1;
  align-self: stretch;
  justify-self: stretch;

  display: flex;
  align-items: center;
  justify-content: center;
}

footer {
  padding: 0.5em;
  font-size: 80%;
  color: #999;
}

a {
  color: #8AF;
}

a:visited {
  color: #C9C;
}

code {
  font-family: "Berkeley Mono", "Fira Mono", "Menlo", monospace;
}