@import url("/assets/css/reset.css") layer(reset);

:root {
    --serif: "STIX Two Text", serif;
    --sans-serif: "Atkinson Hyperlegible", sans-serif;
}

@font-face {
  font-family: "STIX Two Text";
  src: url('/assets/fonts/STIXTwoText.woff2') format('woff2') tech(variation),
        url('/assets/fonts/STIXTwoText.woff2') format('woff2-variations');
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 1-1000;
  font-stretch: 50% 200%;
  font-display: fallback;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('/assets/fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
  font-weight: 400;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: fallback;
}

body {
  font-family: var(--sans-serif);
  font-weight: 400;
}

@layer defaults {
    h1, h2, h3, h4, h5 {
        font-family: var(--serif);
        font-weight: 800;
        margin-bottom: 1em;
    }
    h1 {
        font-size: 5em;
    }
    h2 {
        font-size: 4em;
    }
    #main-blog {
      margin: 0 auto;
      max-width: 1200px;
    }

    #main-blog p {
      color: #011b20;
      font-style: normal;
      text-wrap: pretty;
      margin-bottom: 1em;
      max-width: 65ch;
      font-size: 1.75em;
    }
}


.font-b {
  font-family: "InterVariable", sans-serif;
  font-weight: 400;
  max-width: 75ch;
}