@font-face {
  font-family: "TrebuchetMS";
  src: url("../fonts/TrebuchetMS.woff2") format("woff2"),
    url("../fonts/TrebuchetMS.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

@font-face {
  font-family: "TrebuchetMS";
  src: url("../fonts/TrebuchetMSBold.woff2") format("woff2"),
    url("../fonts/TrebuchetMSBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

@font-face {
  font-family: "TrebuchetMS";
  src: url("../fonts/TrebuchetMSItalic.woff2") format("woff2"),
    url("../fonts/TrebuchetMSItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  text-rendering: optimizeLegibility;
  font-display: swap;
}

:root {
  /* colors */
  --clr-light: white;
  --clr-dark: black;
  --clr-gray: gray;
  --clr-green: #8EB630;
  --clr-accent: var(--clr-green);
  --clr-accent-light: var(--clr-green);
  --clr-background: var(--clr-light);
  --btn-clr: var(--clr-accent);
  --btn-clr-light: var(--clr-accent-light);

  /* @link https://utopia.fyi/type/calculator?c=375,16,1.2,1440,18,1.25,8,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.6944rem, 0.6854rem + 0.0384vw, 0.72rem);
  --step--1: clamp(0.8333rem, 0.8099rem + 0.1002vw, 0.9rem);
  --step-0: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1274rem + 0.3099vw, 1.4063rem);
  --step-2: clamp(1.44rem, 1.3281rem + 0.4775vw, 1.7578rem);
  --step-3: clamp(1.728rem, 1.5628rem + 0.705vw, 2.1973rem);
  --step-4: clamp(2.0736rem, 1.8366rem + 1.0111vw, 2.7466rem);
  --step-5: clamp(2.4883rem, 2.1556rem + 1.4196vw, 3.4332rem);
  --step-6: clamp(2.986rem, 2.5263rem + 1.9614vw, 4.2915rem);
  --step-7: clamp(3.5832rem, 2.956rem + 2.676vw, 5.3644rem);
  --step-8: clamp(4.2998rem, 3.4527rem + 3.6142vw, 6.7055rem);

  --space-3xs: clamp(0.25rem, 0.228rem + 0.0939vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.478rem + 0.0939vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.706rem + 0.1878vw, 0.875rem);
  --space-s: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.434rem + 0.2817vw, 1.6875rem);
  --space-l: clamp(2rem, 1.912rem + 0.3756vw, 2.25rem);
  --space-xl: clamp(3rem, 2.868rem + 0.5634vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8239rem + 0.7512vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7359rem + 1.1268vw, 6.75rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.14rem + 0.4695vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.368rem + 0.5634vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.618rem + 0.5634vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7579rem + 1.0329vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.2359rem + 1.1268vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.5158rem + 2.0657vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.4718rem + 2.2535vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.0317rem + 4.1315vw, 6.75rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.5599rem + 1.8779vw, 2.25rem);

  --contain: 1440px;
  --contain-text: 80ch;
  --ease: cubic-bezier(0.645, 0.045, 0.355, 1);
  --gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem));
  --flow: var(--space-m-l);
  --flow-s: var(--space-s-m);
  --flow-xs: var(--space-3xs-2xs);

  --border-radius: 4px;
  --border-width: 1px;
  --outline-offset: 0px;

  --underline-offset: 4px;
  --outline-offset-link: 3px;
  --outline-width-link: 2px;

  --outline-offset-btn: 1px;
  --outline-width-btn: 2px;
  --btn-padding: .5rem 1rem .5rem 1rem;

  --input-padding: .5rem .5rem;

  --system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* typography */
.default {
  line-height: 1.2;
  font-weight: normal;
}

.prose {
  line-height: 1.6;
  font-weight: normal;
}

.strong {
  line-height: 1.2;
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.fs--2 {
  font-size: var(--step--2);
}

.fs--1 {
  font-size: var(--step--1);
}

.fs-0 {
  font-size: var(--step-0);
}

.prose.fs-0 {
  line-height: 1.5;
}

.fs-1 {
  font-size: var(--step-1);
}

.fs-2 {
  font-size: var(--step-2);
}

.fs-3 {
  font-size: var(--step-3);
}

.fs-4 {
  font-size: var(--step-4);
}

.fs-5 {
  font-size: var(--step-5);
}

.fs-6 {
  font-size: var(--step-6);
}

.fs-7 {
  font-size: var(--step-7);
}

.fs-8 {
  font-size: var(--step-8);
}

a.btn:visited,
a.btn {
  display: inline-block;
  background-color: var(--clr-green);
  color: var(--clr-dark);
  text-decoration: none;
  padding: var(--space-s) var(--space-m);
  font-size: var(--step-3);
}

@media (hover: hover) {

  a.btn:visited:hover,
  a.btn:hover {
    color: var(--clr-dark);
  }
}