@font-face {
  font-family: 'Inter';
  font-display: optional;
  font-weight: 100 900;
  src: url('/-/shared/inter.woff2') format('woff2');
}

@layer base {
  html {
    --nav-height: 72px;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
  }

  html, body {
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 2rem);
  }

  navigation-menu {
    --nav-height: inherit;
    &:not(:defined){
      display: block;
      width: 100%;
      height: var(--nav-height);
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000000;
      &[no-blend]{ background-color: rgb(255 255 255 / 95%); }
    }
  }

  body {
    margin: 0;
    position: relative;
    font: 1rem / 1.5 'Inter', arial, sans-serif;
    letter-spacing: -0.02rem;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: normal;
  }

  h1, h2, h3 { line-height: 1.2; }

  main section { padding: 4rem max((100% - 1200px) / 2 + 2rem, 2rem); }

  main > section:first-of-type { padding-top: var(--nav-height); }

  .sr-only {
    display: block;
    width: 1px;
    height: 1px;
    margin: -1px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    opacity: 0.01;
  }
}