@font-face {
  font-family: "robotoblack";
  src: url("../assets/fonts/roboto-black-webfont.woff2") format("woff2"),
    url("../assets/fonts/roboto-black-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "robotolight";
  src: url("../assets/fonts/roboto-light-webfont.woff2") format("woff2"),
    url("../assets/fonts/roboto-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "robotolight_italic";
  src: url("../assets/fonts/roboto-lightitalic-webfont.woff2") format("woff2"),
    url("../assets/fonts/roboto-lightitalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "roboto_monoregular";
  src: url("../assets/fonts/robotomono-variablefont_wght-webfont.woff2")
      format("woff2"),
    url("../assets/fonts/robotomono-variablefont_wght-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: "robotoblack";
  color: var(--bg-800);
  font-size: 45pt;
  text-align: center;
}

h2 {
  font-family: "robotoblack";
  color: var(--bg-800);
  font-size: 22pt;
  text-align: center;
  text-transform: capitalize;
}

h3 {
  font-family: "robotoblack";
  color: var(--bg-800);
  font-size: 22pt;
  text-align: center;
  text-transform: capitalize;
}

h4 {
  font-family: "robotoblack";
  font-size: 16pt;
  color: var(--bg-800);
  text-align: start;
}

h5 {
  font-family: "robotolight";
  text-transform: uppercase;
  font-size: 14pt;
}

.small-print {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-size: 12px;
  font-family: "robotolight", sans-serif;
  color: white;
}

label,
.small-info {
  text-align: start;
  font-size: 12px;
  font-family: "robotolight", sans-serif;
  color: var(--bg-500);
  text-transform: uppercase;
}

.error {
  height: 10px;
  text-align: start;
  font-size: 12px;
  font-family: "robotolight", sans-serif;
  color: red;
}

.details {
  text-align: start;
  font-size: 14pt;
  font-family: "roboto_monoregular", sans-serif;
  color: var(--bg-800);
  text-transform: capitalize;
}

@media (max-width: 800px) {
  h1 {
    font-size: 36pt;
  }

  h5 {
    font-size: 12pt;
  }

  label,
  .small-info,
  .error {
    font-size: 11px;
  }

  .details {
    font-size: 13pt;
  }
}

@media (max-width: 725px) {
  h3 {
    font-size: 20pt;
  }

  h4 {
    font-size: 14pt;
  }
}

@media (max-width: 500px) {
  h1 {
    font-size: 30pt;
  }

  h5 {
    font-size: 10pt;
  }

  label,
  .small-info,
  .error {
    font-size: 10px;
  }

  .details {
    font-size: 12pt;
  }
}

@media (max-width: 400px) {
  h1 {
    font-size: 25pt;
  }

  h4 {
    font-size: 12pt;
  }

  .small-print {
    font-size: 10px;
  }

  .details {
    font-size: 11pt;
  }
}