body {
  font-family: "Roboto Flex", serif;
  overflow-x: hidden;
}

/* <!-- TEXT ---------------------------------------------------------------------------------------------> */
h1 {
  font-size: 8rem;
  font-weight: 900;
  line-height: 90%;
}

h2 {
  font-size: 4rem;
  font-weight: 900;
}

h3 {
  font-size: 3rem;
  font-weight: 900;
}

h4 {
  font-size: 3rem;
  font-weight: 900;
}

.subheader {
  font-size: 2rem;
  font-weight: 700;
}

p.date, p.location {
  font-size: 1.75rem;
  font-weight: 700;
}

p.headline {
  font-size: 4rem;
  font-weight: 900;
}

.paragraph {
  font-size: 1.75rem;
  margin-bottom: 1em;
  font-weight: 300;
  letter-spacing: 0.125rem;
  line-height: 120%;
  hyphens: none;
}

.bold {
  font-weight: bold;
  font-size: 2rem;
}

/* <!-- BUTTONS ----------------!> */
/* Dark version */
.btn-dark {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #0B1C41;
  color: white;
  padding: 0.75rem 1.875rem;
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  margin: 0.625rem;
  transition: background-color 0.3s;
  height: 90%;
}

.btn-dark:hover {
  background-color: white;
  color: #0B1C41;
}

/* Blue version */
.btn-blue {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #1C449B;
  color: white;
  padding: 0.75rem 1.875rem;
  font-size: 2.5rem;
  font-weight: 900;
  text-align: center;
  margin: 0.625rem;
  transition: background-color 0.3s;
  height: 90%;
}

.btn-blue:hover {
  background-color: #0B1C41;
  color: white;
}

/* <!-- MEDIA QUERIES ---------------------------------------------------------------------------------------------> */
/* <!-- Laptop ----------------!> */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  h1 {
    font-size: 8rem;
  }

  h2 {
    font-size: 4rem;
  }

  h3 {
    font-size: 2.5rem;
  }

  h4 {
    font-size: 2.5rem;
  }

  .subheader {
    font-size: 2.5rem;
  }

  p.date, p.location {
    font-size: 1.75rem;
  }

  p.headline {
    font-size: 4rem;
  }

  .paragraph {
    font-size: 1.5rem;
  }

  .bold {
    font-size: 1.75rem;
  }

  .btn-dark {
    padding: 0.75rem 1.5rem;
    font-size: 2.5rem;
  }

  .btn-blue {
    padding: 0.75rem 1.5rem;
    font-size: 2.5rem;
  }

}

/* <!-- Desktop/Laptop + Upscale (125% Scale) ----------------!> */
@media (max-width: 1536px) and (min-width: 1535px) and (min-resolution: 120dpi) and (max-resolution: 121dpi) {
  h1 {
    font-size: 7rem;
  }

  h2 {
    font-size: 4rem;
  }

  h3 {
    font-size: 2.5rem;
  }

  h4 {
    font-size: 2.5rem;
  }

  .subheader {
    font-size: 2rem;
  }

  p.date, p.location {
    font-size: 1.75rem;
  }

  p.headline {
    font-size: 4rem;
  }

  .paragraph {
    font-size: 1.5rem;
  }

  .bold {
    font-size: 1.75rem;
  }

  .btn-dark {
    padding: 0.5rem 1rem;
    font-size: 2rem;
  }

  .btn-blue {
    padding: 0.75rem 1.5rem;
    font-size: 2.5rem;
  }
}

/* <!-- Desktop/Laptop + Upscale (150% Scale) ----------------!> */
@media (max-width: 1280px) and (min-width: 1279px) and (min-resolution: 144dpi) and (max-resolution: 145dpi) {
  h1 {
    font-size: 6rem;
  }

  h2 {
    font-size: 4rem;
  }

  h3 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 2rem;
  }

  .subheader {
    font-size: 1.5rem;
  }

  p.date, p.location {
    font-size: 1.75rem;
  }

  p.headline {
    font-size: 4rem;
  }

  .paragraph {
    font-size: 1rem;
  }

  .bold {
    font-size: 1.25rem;
  }

  .btn-dark {
    padding: 0.5rem 1rem;
    font-size: 1.75rem;
  }

  .btn-blue {
    padding: 0.5rem 1rem;
    font-size: 1.75rem;
  }
}

/* <!-- Mobile ----------------!> */
@media only screen and (max-width: 767px),
only screen and (orientation: portrait) {
  h1 {
    font-size: 5rem;
  }

  h2 {
    font-size: 3rem;
    line-height: 90%
  }

  h3 {
    font-size: 2.5rem;
  }

  h4 {
    font-size: 2.5rem;
  }

  .subheader {
    font-size: 1.25rem;
    text-align: center;
  }

  p.date, p.location {
    font-size: 1.25rem;
  }

  p.headline {
    font-size: 4rem;
  }

  .paragraph {
    font-size: 1.5rem;
  }

  .bold {
    font-size: 1.75rem;
  }

  .btn-dark {
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
  }

  .btn-blue {
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
  }
}