html, body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  font-family: arial, sans-serif;
}
section {
  padding: 5rem max((100% - 1200px) / 2 + 2rem, 2rem);
}

#hero {
  padding-top: 0;
  padding-bottom: 2rem;
  color: white;
  background-color: #1B262E;
  #navigation-menu {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 100%;
    min-height: 3rem;
    padding-block: 1rem;
    img {
      display: block;
      width: auto;
      height: 2rem;
    }
  }
  h1 {
    width: min(100%, 600px);
    margin: 6rem auto 0;
    color: white;
    font-size: clamp(3rem, 6.7vw - 1rem, 4rem);
  }
}

#no-auth-account-id {
  padding: 3rem max((100% - 600px) / 2, 2rem) 0;
  p {
    padding: 1rem 2rem;
    background-color: pink;
    border: 2px solid red;
    color: firebrick;
    border-radius: .25rem;
    a { color: inherit; }
  }
}

#contact {
  padding: 3rem max((100% - 600px) / 2, 2rem) 5rem;
  fieldset {
    display: grid;
    padding: 0;
    margin: 1.5rem 0;
    grid: auto / 1fr 1fr;
    gap: 2rem;
    border: none;
  }
  input:is([type="text"], [type="email"]){
    padding: .75rem 1rem;
    margin: 0 -.375rem;
    background-color: #EEF6FB;
    font-size: inherit;
    font-family: inherit;
    border: none;
    border-radius: .375rem;
    outline: none;
    &::placeholder {
      color: #93A5B2;
      opacity: 1;
    }
  }
  label {
    display: flex;
    flex-flow: column;
    gap: 1rem;
    &.required-field span::after {
      content: " *";
      color: red;
    }
  }
  fieldset.confirmation {
    grid: auto / 1fr;
    font-size: .875rem;
    &:nth-child(1 of .confirmation){ margin-top: 3rem; }
    p { margin: 0; }
    a {
      color: #2493E1;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
    input[type="checkbox"] {
      flex: 0 0 auto;
      appearance: none;
      width: 1.5rem;
      height: 1.5rem;
      padding: 0;
      margin: 0;
      border: 1px solid gray;
      border-radius: .375rem;
      cursor: pointer;
      &:checked {
        border-color: #1B262E;
        background: center / contain url("data:image/svg+xml, \
          %3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E \
            %3Cpath d='M2.5 6.5L5 9M5 9L10 3' stroke='%23fff' stroke-linecap='round'/%3E \
          %3C/svg%3E \
        "), #1B262E;
      }
    }
    label {
      flex-flow: row;
    }
  }
  button {
    display: inline-block;
    padding: 1em 2em;
    color: white;
    background-color: #1B262E;
    border: none;
    border-radius: .4rem;
    font-weight: 900;
    font-size: 1.125rem;
    font-family: inherit;
    text-decoration: none;
    transition: opacity .2s;
    cursor: pointer;
    &:hover { opacity: .85; }
  }
}