:root {
  --off-black: #010101;
  --dark-green: #192816;
  --light-green: #fcfaf9;
  --mid-teal: #2c566c;
  --dark-blue: #13375a;
  --mid-blue: #8dcbe1;
  --light-blue: #b9e1fa;
}

@font-face {
  font-family: "Ranade";
  src: url("../assets/fonts/Ranade-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Ranade";
  src: url("../assets/fonts/Ranade-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Frick";
  src: url("../assets/fonts/Frick0.3-Regular.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "BebasNeue";
  src: url("../assets/fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/Inter-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "ArchivoExpanded";
  src: url("../assets/fonts/ArchivoExpanded-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "ArchivoExpanded";
  src: url("../assets/fonts/ArchivoExpanded-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "ArchivoExpanded";
  src: url("../assets/fonts/ArchivoExpanded-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

body {
  background-color: var(--dark-green);
  color: var(--light-green);
  font-family: cursive;
  font-size: large;
  padding: 1.5rem;
  margin: 0;
  font-synthesis: none;
}

main {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(17rem, 1fr));

  * {
    hyphens: auto;
    word-break: break-word;
    max-width: 70ch;
  }
}

h1 {
  font-size: 3rem;
}

:is(h1, h2, h3, h4) {
  font-family: fantasy;
  font-weight: bold;
  text-transform: uppercase;
}

strong {
  font-size: larger;
}

.uppercase {
  text-transform: uppercase;
}

.option-1 {
  font-family: "Switzer", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "BebasNeue", cursive;
  }
}

.option-2 {
  font-family: "Switzer", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "Frick", cursive;
  }
}

.option-3 {
  font-family: "Switzer", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "Switzer", cursive;
    font-weight: 900;
  }
}

.option-4 {
  font-family: "Inter", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "BebasNeue", cursive;
  }
}

.option-5 {
  font-family: "Inter", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "Frick", cursive;
  }
}

.option-6 {
  font-family: "Inter", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "Inter", cursive;
    font-weight: 900;
  }
}

.option-7 {
  font-family: "ArchivoExpanded", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "BebasNeue", cursive;
  }
}

.option-8 {
  font-family: "ArchivoExpanded", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "Frick", cursive;
  }
}

.option-9 {
  font-family: "ArchivoExpanded", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "ArchivoExpanded", cursive;
    font-weight: 900;
  }
}

.option-20 {
  display: none;
  font-family: "Ranade", cursive;

  :is(h1, h2, h3, h4) {
    font-family: "Ranade", cursive;
  }
}