@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-Light.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-Regular.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-Medium.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-Semibold.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-Semibold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-Bold.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-ExtraBold.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-ExtraBold.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-LightItalic.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-LightItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-Italic.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-Italic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-MediumItalic.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-MediumItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-SemiboldItalic.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-SemiboldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-BoldItalic.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-BoldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Stooonks Serif";
  src: url("/font-preview-assets/StooonksSerif-ExtraBoldItalic.woff2") format("woff2"),
       url("/font-preview-assets/StooonksSerif-ExtraBoldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}

#tagline {
  width: 100%;
  margin: 20px auto;
  font-size: 0.9em;
}

#tagline-title {
  white-space: nowrap;
}

#tagline-sub {
  display: inline-block;
  max-width: 420px;
}

.explainer-copy {
  font-family: "Stooonks Serif", serif;
  font-size: 0.92em;
  line-height: 1.5;
  text-align: justify;
  white-space: pre-line;
}

@media (max-width: 600px) {
  .explainer-copy {
    text-align: start;
  }
}

@media (max-width: 600px) {
  #tagline-title {
    white-space: normal;
  }
}