html, body {
    height: fit-content;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden !important;
    background-color: #FAFCFF;
  }

  body {
    /* flex is needed to position elements in the direct center */
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #logo {
    width: 8rem;
    position: absolute;
    top: 30px;
    left: 30px;
  }

  main {
    /* flex is needed to position elements in the direct center */
    display: flex;
    flex-direction: column;
    margin: 0 3rem;
    text-align: center;
    align-items: center;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.1rem;
    font-weight: 400; /* regular */
  }

  .serif {
    font-family: "Noto Serif", serif;
    font-weight: 500; /* medium */
    font-style: normal;
    color: #081917;
  }

  .sans {
    font-family: "Noto Sans", sans-serif;
    font-weight: 400; /* regular */
    font-style: normal;
    color: #081917;
  }

  .italic {
    font-style: italic;
  }

  .bold {
    font-weight: 600; /* semi-bold */
  }

  section {
/* responsive */
    width: 100%;
    justify-content: center;
    height: auto;
    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(153px, 240px)); */
    gap: 15px;

    padding-top: 10px;
  }

/* LAPTOP BUTTON GRID */
  @media (max-width: 2880px) {
    section {
        grid-template-columns: repeat(3, minmax(153px, 240px));
      }
  }

  /* TABLET BUTTON GRID */
  @media (max-width: 1180px) {
    section {
        grid-template-columns: repeat(3, minmax(153px, 240px));
      }
  }

  /* PHONE BUTTON GRID */
  @media (max-width: 600px) {
    section {
        grid-template-columns: minmax(153px, 240px);
      }
  }

  .button {
    font-size: 14px;
    height: 38.5px;
    border-radius: 100px;
    padding: 8px 18px 8px 18px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D9E7E5;

    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #081917;
    transition: transform 0.3s ease-in-out;
  }

  .button:hover {
    /* background-color: #081917;
    color: #FAFCFF;
    transition:
    background-color 0.4s ease-in-out 0.1s,
    color 0.4s ease-in-out 0.1s,
    transform 0.3s ease-in-out; */

    transform: translateY(-10px);
  }

  .button-link {
    text-decoration: none;
    color: inherit;
    display: block;
  }