html {
  height: 100%;
}
html,
body {
  margin: 0px;
  padding: 0px;
}

html {
  font-size: var(--font-size);
  container: page / normal;
}

*,
*:before,
*:after {
  box-sizing: var(--box-sizing);
}

body {
  margin: 0px;
  padding: 0px;
  overflow-x: var(--page-overflow-x);
  min-width: var(--page-min-width);
  background: var(--page-background);
  font-family: var(--page-font);
  line-height: var(--line-height);
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--header-font);
  color: var(--header-color);
}

h1 {
  font-size: var(--h1);
}
h2 {
  font-size: var(--h2);
}
h3 {
  font-size: var(--h3);
}
h4 {
  font-size: var(--h4);
}
h5 {
  font-size: var(--h5);
}


/* iPad Input Shadows */
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
  -webkit-appearance: none;
  -moz-appearance: none; /* mobile firefox too! */
}

/* Scrollbars */
* {
  scrollbar-color: var(--thumb-background) var(--track-background);
  scrollbar-width: var(--scrollbar-width);
}

/* Extra for Chrome */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: var(--scrollbar-width);
  height: var(--scrollbar-height);
}

::-webkit-scrollbar-track {
  background: var(--track-background);
  border-radius: var(--track-border-radius);
}
::-webkit-scrollbar-thumb {
  cursor: pointer;
  border-radius: var(--thumb-border-radius);
  background: var(--thumb-background);
  transition: var(--thumb-transition);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: var(--thumb-inactive-background);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--thumb-hover-background);
}

a {
  color: var(--link-color);
  text-decoration: var(--link-text-decoration);
  text-decoration-skip-ink: auto;
}
a:hover {
  color: var(--link-hover-color);
  text-decoration: var(--link-hover-text-decoration);
}