html,
body {
  background-color: var(--c-bg);
  transition: background-color var(--t-color);
}

html.dark {
  color-scheme: dark;
}

body {
  color: var(--c-text);
  font-size: 1rem;
  font-family: var(--font-family);
}

h2 {
  border-color: var(--c-border);
  transition: border-color var(--t-color);
}

a {
  color: var(--c-text-accent);
}

code {
  background-color: var(--c-bg-light);
  color: var(--c-text-lighter);
  font-family: var(--code-font-family);
  transition: background-color var(--t-color);

  p a & {
    color: var(--c-text-accent);
  }
}

kbd {
  border-color: var(--c-border-dark);
  transition: border-color var(--t-color);
}

blockquote {
  border-color: var(--c-border-dark);
  color: var(--c-text-quote);
  transition: border-color var(--t-color);
}

hr {
  border-color: var(--c-border);
  transition: border-color var(--t-color);
}

table {
  transition: border-color var(--t-color);
}

tr {
  &:nth-child(odd) {
    background-color: var(--c-bg-light);
    transition: background-color var(--t-color);

    code {
      background-color: var(--c-bg-dark);
    }
  }
}

th,
td {
  border-color: var(--c-border-dark);
  transition: border-color var(--t-color);
}