/* html & body */

:where(html) {
  box-sizing: border-box;
  min-width: 300px;
  overflow-x: auto;
  overflow-y: auto;
  background-color: var(--html-bg, white);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-text-size-adjust: 100%;
  /* text-size-adjust: 100%; */
  font-family: var(--font-sans);
  font-feature-settings: var(--font-features);
  font-weight: var(--weight-base);
  /* line-height: var(--font-line-height-base); */
  color: var(--body-text-color);
  accent-color: var(--accent);
  /* base font size */
  /* font-size: calc(var(--font-range-lower-unitless, 15) * 1px); */
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  /* this is for debugging */
  /* outline: 2px solid lime; */
}

:not(:defined) {
  visibility: hidden
}
* {
  -webkit-tap-highlight-color: transparent
}

:where(html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input) {
  -webkit-appearance: none;
  appearance: none;
  /* border: 0; */
  margin: 0;
  padding: 0;
}

:where(ul[role=list],ol[role=list]) {
  list-style: none;
}

:where(img,picture) {
  max-inline-size: 100%;
  display: block;
}

:where(input,button,textarea,select) {
  font-family: inherit;
  font-feature-settings: inherit;
  -webkit-appearance: none;
  appearance: none
}

/*
suppress the focus outline on elements that cannot be accessed via keyboard
this prevents an unwanted focus outline from appearing around elements that might still respond to pointer events.
source: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss
 */
[tabindex='-1']:focus {
  outline: none !important;
}

@media (prefers-reduced-motion:reduce) {
  *,::before,::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}
/* 
iconify-icon {
  display: inline-block;
  font-size: inherit;
} */