glytter.scss

    @font-face {
      src: url('./fonts/Firava.woff2') format('woff2-variations');
      font-display: swap;
      font-family: 'Firava';
      font-weight: 100 900;
    }

    @font-face {
      src: url('./fonts/FiravaItalic.woff2') format('woff2-variations');
      font-display: swap;
      font-family: 'Firava';
      font-style: italic;
      font-weight: 100 900;
    }

    @font-face {
      src: url('./fonts/AdobeBlank.ttf') format('truetype');
      font-display: swap;
      font-family: 'AdobeBlank';
    }

    @media (min-width: 700px) {
      body {
        --font-size: 1.5rem;
      }
    }

    :root {
      --font-family: "Firava";
    }

    *, *::before, *::after {
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: "Firava", "system-ui", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
      font-size: var(--font-size, 1rem);
      line-height: 1.75;
      margin: 0 auto;
      max-width: 72ch;
      width: 96vw;
    }

    footer {
      margin-bottom: 1rem;
    }

    h1 {
      line-height: 1.25;
      margin: .5rem 0 1rem 0;
    }

    h2 {
      font-size: 1.5rem;
      text-transform: uppercase;
    }

    h2,
    p {
      margin: .5rem 0;
    }

    ul {
      padding: 0;
      margin: 0 0 0 1.2rem;
    }

    input,
    button,
    textarea,
    select {
      font: inherit;
    }

    #fontfam {
      background: #fffae3;
      padding: 0 .25rem;
    }

    p#charmap {
      background: #fffae3;
      border-radius: .5rem;
      font-family: var(--font-family, sans-serif);
      /* letter-spacing: .02ch; */
      margin: 1rem 0;
      overflow-wrap: break-word;
      padding: 1rem;
    }