/* One scroll language for every luv77 surface. Keep the document as the
   primary vertical scroll container so users never have to hunt for a second
   scrollbar inside a panel. */

:root {
  --page-scroll-thumb: rgba(164, 95, 88, 0.34);
  --page-scroll-thumb-hover: rgba(116, 63, 60, 0.56);
  --page-scroll-track: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  scrollbar-color: var(--page-scroll-thumb) var(--page-scroll-track);
  scrollbar-width: thin;
}

body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: var(--page-scroll-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--page-scroll-thumb);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: var(--page-scroll-thumb-hover);
  background-clip: padding-box;
}

[id] {
  scroll-margin-top: 90px;
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 76px;
  }

  [id] {
    scroll-margin-top: 76px;
  }
}

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