:root {
  /* Text sizes. */
  --line-height: 1.5;
  --font-size-base: 1rem; /* 1rem = 16px if font root is 100% ands browser defaults are used. */
  --font-size-h1: 2.027rem; /* ~32px */
  --font-size-h2: 1.802rem; /* ~29px */
  --font-size-h3: 1.602rem; /* ~26px */
  --font-size-h4: 1.424rem; /* ~23px */
  --font-size-h5: 1.266rem; /* ~20px */
  --font-size-h6: 1.125rem; /* 18px */
  --font-size-sm: 0.889rem; /* ~14px */
  --font-size-xs: 0.79rem; /* ~13px */
  --font-size-xxs: 0.702rem; /* ~11px */

  --font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --code-background: var(--color-surface);

  --p-margin--y: var(--spacing-md);
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
}

p {
  margin-top: var(--p-margin--y);
  margin-bottom: var(--p-margin--y);
}

small {
  font-size: 80%;
  font-weight: normal;
}

big {
  font-size: 120%;
  font-weight: normal;
}

mark {
  padding: var(--spacing-xs);
  background-color: var(--color-mark-background);
}

code {
  font-family: var(--font-monospace);
  font-size: 90%;
  padding: 0.2em 0.4em;
  word-break: break-all;
  border-radius: var(--radius-xs);
  background-color: var(--code-background);
}

pre code {
  /* Fixes unwanted padding for first and last line of code. */
  padding: unset;
}

html {
  /* Initial for (R)EM. */
  font-size: 16px;
}