@layer base {
  html {
    scroll-behavior: smooth;
    overflow-x: clip;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }
  body {
    overscroll-behavior-y: auto;
    overflow-x: clip;
    touch-action: pan-y;
  }
  main > :first-child {
    margin-top: 0 !important;
  }
  main > :last-child {
    margin-bottom: 0 !important;
  }

  section {
    scroll-margin-top: 5rem;
  }

  :focus-visible {
    outline: 2px solid #4fdbc8;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

::-webkit-scrollbar {
  display: none;
}