@font-face {
  font-family: "Alegreya";
  src: url("fonts/alegreya-regular.woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/alegreya-bold.woff2");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Alegreya";
  src: url("fonts/alegreya-italic.woff2");
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Vollkorn";
  src: url("fonts/vollkorn-regular.woff2");
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: "Vollkorn";
  src: url("fonts/vollkorn-bold.woff2");
  font-style: normal;
  font-weight: 700;
}
@font-face {
  font-family: "Vollkorn";
  src: url("fonts/vollkorn-italic.woff2");
  font-style: italic;
  font-weight: 400;
}

body {
  color-scheme: dark;
  background: #000;
  color: #fff;
  font-family: Vollkorn, ui-serif, serif;
  font-size: var(--font-size-2);
  line-height: 1.3;
  margin: auto;
  padding: var(--size-8) var(--size-1);
}

h1 {
  font-variant-caps: small-caps;
  text-align: center;
  font-size: var(--font-size-4);
  margin: 0 0 var(--size-5) 0;
}
h2 {
  font-variant-caps: small-caps;
  font-size: var(--font-size-3);
  margin: var(--size-5) 0 var(--size-3) 0;
}
h3 {
  font-size: var(--font-size-3);
  margin: var(--size-4) 0 var(--size-3) 0;
}

p {
  margin: var(--size-1) 0;
}

a {
  text-decoration: underline dashed;
  text-decoration-color: var(--blue-4);
  color: inherit;
}
a:visited {
  text-decoration-color: var(--purple-4);
}
a:hover {
  text-decoration: none;
}

kbd {
  display: inline-block;
  font-family: inherit;
  font-size: var(--font-size-1);
  border: var(--border-size-1) solid #fff;
  padding: var(--size-1);
}

dl {
  display: grid;
  grid-template-columns: fit-content(var(--size-content-1)) 1fr;
  column-gap: var(--size-2);
  row-gap: var(--size-1);
  overflow-x: auto;
  overflow-y: hidden;
}
dt {
  font-variant-caps: small-caps;
}
dd {
  margin: unset;
}

.name {
  font-style: italic;
}