@layer reset {
  *,
  *::before,
  *::after {
      box-sizing: border-box;
  }

  * {
      margin: 0;
  }

  html {
      block-size: 100%;

      /* Disable font size inflation on mobile. */
      text-size-adjust: none;
      -webkit-text-size-adjust: none;
  }

  html:focus-within {
      scroll-behavior: smooth;
  }

  body {
      min-block-size: 100dvh;

      /* Font synthesis is largely undesirable, disable it to make it more obvious when font styles are missing. */
      font-synthesis: none;
      -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3,
  h4 {
      text-wrap: balance;
  }

  p {
      text-wrap: pretty;
  }

  /* Remove list styles on ul */
  ol,
  ul {
      list-style: none;
  }

  /* Setup the ability for main page landmarks to use container queries */
  body > :is(header, footer),
  main,
  section,
  article {
      container-type: inline-size;
  }

  /* Remove default popover styles */
  [popover] {
      margin: 0;
      padding: 0;
  }

  /* Make the link underlines and normal underlines skip the "hooky" letters and symbols (q, y, j, g). Makes them look more natural. */
  a:not([class]) {
      text-decoration-skip-ink: auto;
  }

  /* Make images easier to work with */
  img,
  picture,
  video,
  canvas,
  svg {
      display: block;
      max-inline-size: 100%;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
      font: inherit;
      letter-spacing: inherit;
      word-spacing: inherit;
      color: currentColor;
  }

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
      html:focus-within {
          scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
      }
  }
}