:root {
  --base-font-size: 16px;
  --spacing: calc(1.1 * var(--base-font-size));
  --font-display: Railroad, system-ui;
  --font-sans: Heebo, ui-sans-serif, system-ui;
  --font-serif: Bitter, ui-serif, Georgia, Cambria, Times New Roman, Times, serif;
}

@font-face {
  font-family: "Heebo";
  src: url("/fonts/Heebo.woff2") format("woff2");
}

@font-face {
  font-family: "Bitter";
  src: url("/fonts/Bitter.woff2") format("woff2");
}

@font-face {
  font-family: "Bitter";
  src: url("/fonts/Bitter-Italic.woff2") format("woff2");
  font-style: italic;
}

body {
  font-size: var(--base-font-size);
  font-family: var(--font-serif);
  line-height: 1.6em;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--theme);
  color: var(--theme);
}

article a {
  text-decoration: underline;
  color: var(--color);
  text-decoration-color: var(--theme);
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
pre {
  overflow-wrap: break-word;
  margin: 1em 0em var(--spacing) 0em;
}

p:last-child,
blockquote:last-child,
ul:last-child,
ol:last-child,
pre:last-child {
  margin-bottom: 0px;
}

h1 {
  font-size: 2.625em;
  line-height: 1.2em;
  font-family: var(--font-sans);
  color: var(--theme);
}

h2 {
  font-size: 2.0625em;
  line-height: 1.2em;
}

h3 {
  font-size: 1.625em;
  line-height: 1.2em;
  font-family: var(--font-sans);
}

h4 {
  font-size: 1.25em;
}

h5 {
  font-size: 0.8125em;
}

a {
  color: var(--theme);
  text-decoration: none;
  text-underline-offset: 3px;
}

ol,
ul {
  padding-left: 1.2em;
  margin-bottom: var(--spacing);
}

ol li,
ul li {
  margin: 0.5em 0em;
}

blockquote {
  padding: var(--spacing);
  background-color: #eeeeee;
  border-radius: 8px;
}

cite {
  display: block;
}