body {
  font-family: var(--type-serif);
  font-size: var(--type-size);
  font-weight: var(--type-weight);
  line-height: var(--type-height);
  font-variant-numeric: var(--type-numeric);
  background-color: var(--color-background);
  color: var(--color-text);
}

svg circle,
svg path {
  stroke: var(--color-text);
  stroke-width: 0.075em;
}

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

  &:focus,
  &:hover {
    border-bottom: calc(var(--type-size) / 10) dotted var(--color-link);
    color: var(--color-link);
  }
}

header {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
  margin-bottom: 2em;
}

footer {
  margin: 2em 0;
}

small {
  font-weight: 300;
}

abbr {
  text-transform: lowercase;
  font-family: var(--type-caps);
}

blockquote {
  padding-left: 1em;
  border-left: 0.1em solid var(--color-border);
  font-weight: 300;
}

mark {
  padding: 0.1em;
  border-radius: 0.25em;
  background-color: var(--color-mark);
  color: var(--color-text);
}

hr {
  border-top: 0.1em solid var(--color-text);
}

img {
  display: block;
  max-width: 100%;
  margin: 1em 0;
  border-radius: 0.25em;
}

table.table {
  color: var(--color-text);
}