html {
  font-family: Helvetica, Arial, sans-serif;
  line-height: var(--line-height);
  font-size: calc(1rem + 0.25vw);
  color: var(--color-dark);
  background-color: var(--color-light);
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  background-color: inherit;
  box-sizing: border-box;
  border-color: var(--color-dark);
  border-style: solid;
  border-width: 0;
  scroll-behavior: smooth;
}

/* Headings */
h1, h2, h3, h4, h5 {
  line-height: var(--line-height-small);
}

h1, .u-h1 { font-size: var(--s3) }
h2, .u-h2 { font-size: var(--s2) }
h3, .u-h3 { font-size: var(--s1) }
h4, .u-h4 { font-size: var(--s0) }
h5, .u-h5 { font-size: var(--s-1) }

/* Inline text */
small {
  font-size: var(--s-1);
  line-height: 1;
}

mark {
  display: inline-block;
  padding: 0.125em 0.25em;
  line-height: var(--line-height-small);
  filter: invert(100%);
  line-height: 1;
}

kbd {
  display: inline-block;
  border-width: var(--border-thin);
  border-radius: var(--border-radius);
  font-size: var(--s-1);
  padding: 0 0.25em;
  vertical-align: middle;
}

/* Lists */
ol, ul {
  margin-left: var(--s1);
}

dl {
  display: grid;
  grid-gap: var(--s-2);
  grid-template-columns: max-content minmax(0, var(--measure));
}

dt {
  font-weight: bold;
}

/* Buttons */
::-moz-focus-inner {
  border: 0;
  padding: 0;
}

button {
  line-height: var(--line-height-small);
  border-width: var(--border-thin);
  border-color: var(--color-dark);
  padding: var(--s-1);
  background-color: var(--color-dark);
  color: var(--color-light);
  font-weight: bold;
  font-size: inherit;
  text-align: center;
}

/* Focus styles */
:focus {
  outline: var(--outline);
}

[tabindex="-1"]:focus {
  outline: none;
}

/* Hidden polyfill */
[hidden] {
  display: none;
}

/* Code */
code {
  font-family: monospace;
  padding: 0 0.25em;
  line-height: var(--line-height-small);
  background-color: var(--color-dark);
  color: var(--color-light);
  white-space: nowrap;
}

pre code {
  display: block;
  padding: var(--s1);
  white-space: pre-wrap;
}

/* Tables */
table {
  border-collapse: collapse;
}

th, td {
  border-width: var(--border-thin);
  padding: var(--s0);
}

/* Horizontal rule */
hr {
  display: block;
  border-bottom-width: var(--border-thick);
}

/* Forms */
input[type="text"], textarea, select {
  font-size: inherit;
  border-radius: 0;
  border: var(--border-thin) solid;
  padding: var(--s-2);
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: var(--s-4);
}

fieldset {
  border-width: var(--border-thin);
  padding: var(--s-1);
}

legend {
  font-weight: bold;
  padding: 0 var(--s-1);
}

/* Visually hidden */
.vh {
  border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}