:root {
  --dark-green: #0c160b;
  --gold: #ffbf66;
  --green: #22401e;
}

@font-face {
  font-family: "PP Hatton";
  src: url("../fonts/PPHatton-Ultralight.otf") format("OpenType");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "PP Hatton";
  src: url("../fonts/PPHatton-Medium.otf") format("OpenType");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "PP Hatton";
  src: url("../fonts/PPHatton-Bold.otf") format("OpenType");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "PP Hatton";
  src: 
    url("../fonts/PPHatton-UltralightItalic.otf") format("OpenType"),
    url("../fonts/PPHatton-MediumItalic.otf") format("OpenType"),
    url("../fonts/PPHatton-BoldItalic.otf") format("OpenType");
  font-style: italic;
  font-weight: 200 500 700;
  font-display: swap;
}

html {
  background-color: var(--green);
  font-family: system-ui, sans-serif;
  font-size: 16px;
}

body {
  color: var(--gold);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0 1rem;

  @media only screen and (width >= 768px) {
    padding: 0 2rem;
  }

  & > section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: auto;
    text-align: center;

    & img.logo {
      max-width: 200px;
      width: 100%;

      @media only screen and (width >= 768px) {
        max-width: 300px;
      }
    }

    & h1 {
      font-family: "PP Hatton";
      font-size: 1.75rem;
      font-weight: 700;
      text-transform: uppercase;

      @media only screen and (width >= 768px) {
        font-size: 2.625rem;
      }

      & small {
        display: block;
        font-size: 1rem;
        font-weight: 100;
        letter-spacing: 3px;
        margin: 0.5rem 0;

        @media only screen and (width >= 768px) {
          font-size: 2rem;
        }

        &:before,
        &:after {
          content: "—";
          padding: 0 5px;
        }
      }
    }

    & h2 {
      font-family: "PP Hatton";
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 3px;

      @media only screen and (width >= 768px) {
        font-size: 1.125rem;
      }
    }

    & a {
      display: inline-block;

      & svg {
        fill: var(--gold);
        max-width: 50px;
        transform: scale(1);
        transition: transform 0.5s ease-in-out;
        width: 100%;
      }

      &:hover,
      &:active,
      &:focus {
        & svg {
          transform: scale(1.1);
          transition: transform 2s ease-in-out;
        }
      }
    }
  }
}

footer {
  font-size: 0.875rem;
  line-height: 1.5;
  opacity: 0.8;
  padding: 1rem 0;
  text-align: center;
}