html {
  font-weight: var(--font-weight);
  font-size: 62.5%;
  line-height: var(--line-height);
  font-family: var(--font-family);
}

html,
body {
  min-height: 100vh;
  min-height: var(--doc-height);
}

body {
  --background-color: var(--neutral-color);
  --color: var(--on-neutral-color);

  overflow-x: hidden;
  background-color: var(--background-color);
  color: var(--color);
  font-size: clamp(1.5rem, 0.5vw + 1.4rem, 1.7rem);
  line-height: var(--font-content-line-height);

  > header,
  > main,
  > footer {
    display: block;
    position: relative;
    //width: 100%;
    //margin-right: auto;
    //margin-left: auto;
    //padding: var(--inner-v-spacing) var(--inner-h-spacing);
  }

  > footer {
    margin-top: var(--block-spacing);
    padding: var(--inner-v-spacing) var(--inner-h-spacing);
  }

  > main {
    > header {
      padding: var(--inner-v-spacing) var(--inner-h-spacing);
      /* + * {
         margin-top: var(--block-spacing);
       }*/
    }
    > footer {
      margin-top: var(--block-spacing);
      padding: var(--inner-v-spacing) var(--inner-h-spacing);
    }
  }
}

ul li {
  ul,
  ol {
    margin-left: var(--spacing);
  }
}

ol,
ul {
  padding-left: var(--spacing);
  margin-left: 1rem;
}

ul[role='list'],
ol[role='list'] {
  padding-right: 0;
  padding-left: 0;
  margin-left: 0;
}

ol + :is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article)),
ul + :is(:not(h1, h2, h3, h4, h5, h6, section, article, .section, .article)) {
  margin-top: calc(var(--flow-space-ratio) * 1em);
}

body,
table,
article,
section,
pre > code,
select[multiple],
.custom-scrollbar {
  scrollbar-gutter: auto;
  scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-background);
  scrollbar-width: thin;
}

body::-webkit-scrollbar,
article::-webkit-scrollbar,
section::-webkit-scrollbar,
table::-webkit-scrollbar,
pre > code::-webkit-scrollbar,
select::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track,
article::-webkit-scrollbar-track,
section::-webkit-scrollbar-track,
table::-webkit-scrollbar-track,
pre > code::-webkit-scrollbar-track,
select::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--scrollbar-color-background);
  border-radius: 6px;
}

body::-webkit-scrollbar-thumb,
article::-webkit-scrollbar-thumb,
section::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb,
pre > code::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
  border: 2px solid var(--scrollbar-color-thumb-border);
  border-radius: 6px;
  background-clip: content-box;
  background-color: var(--scrollbar-color-thumb);
  box-shadow: inset 0 0 6px rgb(0 0 0 /0.3);
}

*:focus-visible {
  outline: 2px dotted var(--on-neutral-color);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}