/* Two faces over one variable file, rather than one face with a weight range:
   bold text (h2) must match the 800 face, as it did when this came from
   Google Fonts, not render at 700. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2?v=1') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2?v=1') format('woff2');
}

@layer styles {
  :root {
    --font-family: 'Montserrat', sans-serif;

    --space--extra-small: 1rem;
    --space--small: 1.5rem;
    --space--medium: 3rem;
    --space--large: 5rem;

    --content-width: 1050px;

    --page__margin: var(--space--small);

    --image-carousel-max-width: 600px;
    --image-slide-arrow-color: #ccc;
    --carousel-arrow-margin: 40px;

    --green-1: #325e2b;
    --green-2: #547834;
    --green-3: #83822b;

    --text-color: var(--green-3);
    --link-color: var(--green-3);
    --link-color--hover: var(--green-1);
  }

  @media (min-width: 900px) {
    :root {
      --page__margin: var(--space--medium);
    }
  }

  @media (min-width: 1200px) {
    :root {
      --page__margin: 0;
    }
  }

  .link {
    color: inherit;
    text-decoration: underline;
  }
}