@font-face {
  font-family: "Crimson Pro";
  font-style: normal;
  src: url("/fonts/CrimsonPro-Variable_wght.ttf");
}
@font-face {
  font-family: "Crimson Pro";
  font-style: italic;
  src: url("/fonts/CrimsonPro-Italic-Variable_wght.ttf");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  src: url("/fonts/WorkSans-Variable_wght.ttf");
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  src: url("/fonts/WorkSans-Italic-Variable_wght.ttf");
}

:root {
  --serif-font: "Crimson Pro";
  --sans-serif-font: "Work Sans";
  --monospace-font: monospace;
  --background: #fafafa;
  --bg-highlight: #e6e6e6;
  --text: #212121;
  --accent: #3b00ea;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #212121;
    --bg-highlight: #353535;
    --text: #dadada;
    --accent: #ea91ff;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background: #fafafa;
    --text: #212121;
    --accent: #3b00ea;
  }
}

::selection {
  background-color: var(--text);
  color: var(--background);
}
::-moz-selection {
  background-color: var(--text);
  color: var(--background);
}

html {
  font-family: var(--sans-serif-font);
  color: var(--text);
  scrollbar-width: thin;
}

body {
  background-color: var(--background);
  max-width: 820px;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

main {
  display: flex;
  flex: auto;
  flex-direction: column;
  padding: 1rem;
}

#intro,
#not-found {
  min-height: calc(100vh - 2rem);
  justify-content: center;
  align-items: center;
}

#intro h1 {
  font-size: 6rem;
  font-weight: inherit;
  margin: 0;
  margin-bottom: 2rem;
}

#not-found h1 {
  font-size: 10rem;
  margin: 0;

  &::before {
    content: "";
  }
}

footer {
  padding: 1rem;
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: end;
  gap: 1.5rem;
  padding: 1rem;
}

.article {
  display: flex;
  flex-flow: row;
  align-items: center;
}
.article > time {
  font-family: var(--monospace-font);
  font-size: 1rem;
}
.article > a {
  display: inline-block;
  margin: 0.5rem;
}

article > header {
  margin-bottom: 3rem;
}
article > header time {
  color: var(--accent);
  font-size: 1.1rem;
}

.footnote-definition-label {
  color: var(--accent);
}
.footnote-definition p {
  display: inline;
  margin: 0 0 0 0.5rem;
}

h1 {
  font-family: var(--serif-font);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--serif-font);

  &::before {
    content: "# ";
    color: var(--accent);
  }
}

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

time {
  font-family: var(--serif-font);
}

img,
video {
  max-width: 90%;
  height: auto;
  padding: 0.25rem;
  border: solid 1px var(--accent);
}

blockquote {
  margin: 0 0 0 1.25rem;
  padding: 0 0 0 0.5rem;
  border-inline-start: 0.2rem solid var(--accent);
  color: var(--text);
  font-style: italic;
}

pre {
  background-color: var(--bg-highlight);
  border: 1px solid var(--accent);
  max-height: 30rem;
  padding: 0.5rem;
  overflow: auto;
  font-style: monospace;
  white-space: pre;
}
pre code {
  color: inherit;
}

p code,
li code,
div code {
  background-color: var(--bg-highlight);
  color: var(--accent);
}

table {
  border-collapse: collapse;
  margin: 1.5rem 0;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

td,
th {
  border: 1px solid var(--accent);
  text-align: start;
  padding: 0.5rem;
}

th {
  background-color: var(--bg-highlight);
  font-weight: bold;
}

table caption {
  text-align: left;
  font-weight: bold;
  margin: 0 0 0.4rem 1rem;
}