:root {
  --background: hsla(0, 0%, 10%, 100%);
  --foreground: hsla(0, 0%, 70%, 100%);
  --dark: hsla(0, 0%, 30%, 100%);
  --gray: hsla(0, 0%, 55%, 100%);
  --light: hsla(0, 0%, 90%, 100%);
}

@font-face {
  font-display: swap;
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/css/ibm-plex-mono-v19-latin-regular.woff2') format('woff2');
}

body {
  font-family: "IBM Plex Mono", monospace;
  background: var(--background);
  color: var(--foreground);
  /* 14px < 2% of viewport > 16px */
  /* font-size: clamp(14px, 2vw, 16px); */
  font-size: 16px;
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

header, main, footer {
  max-width: 70ch;
  padding: 2ch;
  margin: auto;
}  

a {
  color: var(--gray);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: var(--light);
}

em {
  color: var(--dark);
}

span {
  color: var(--dark);
}

div {
  padding-bottom: 2ch;
}

strong {
  font-weight: normal;
  color: var(--dark);
}

h1, h2, h3, h4 {
  font: inherit;
  font-weight: normal;
  color: var(--light);
  margin-bottom: 0;
  padding-bottom: 0;
}

.hr {
  color: var(--dark);
  text-align: center;
}

ul {
  list-style-type: '- ';
  padding-left: 2ch;
}

  li::marker {
    color: var(--dark);
  }

dt, dd {
  display: inline-block;
  margin: 0;
}

dt {
  color: var(--gray);
}

pre {
  font-family: "IBM Plex Mono", monospace;
  color: var(--dark);
  /* Remove whitespace at the beginning of line */
  /* white-space: pre-line; */
}

nav, nav a {
  color: var(--dark);
}

footer {
  text-align: center;
  color: var(--dark);
}