:root {
  --font-primary: 'fabfont', 'DejaVu Sans Mono', monospace;
  --color-background: #F5F5F0;
  --color-text: #000000;
  --color-blockquote-bg: #f3f3f3;
  --color-blockquote-border: #808080;
  --color-code-bg: #dadada;
  --color-pre-bg: #ffffff;
}

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

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

@font-face {
  font-family: 'fabfont';
  src: url('/font/DejaVuSansMono.woff2');
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: var(--font-primary);
  font-size: 16px;
  max-width: 1000px;
  padding-top: 1ch;
  padding-left: 2%;
  padding-right: 3%;
  margin: 0 auto;
  background: var(--color-background);
  color: var(--color-text);
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: justify;
}

a {
  color: var(--color-text);
  font-weight: bold;
}

sup {
  vertical-align: 0.3em;
  font-size: 0.65em;
}

.heading {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 4ch;
}

.title {
  text-decoration: none;
}

pre {
  font-family: var(--font-primary);
  background-color: var(--color-pre-bg);
  border: 1px solid var(--color-text);
  padding: 1ch 2%;
  overflow-x: auto;
}

code {
  background-color: var(--color-code-bg);
  padding: 0 0.3ch;
}

blockquote {
  background-color: var(--color-blockquote-bg);
  border: 1px dashed var(--color-blockquote-border);
  width: 97.5%;
  font-style: italic;
  text-align: justify;
  padding: 2ch 1ch;
  margin: 0 0 2ch 0;
}

blockquote div {
  text-transform: none;
  text-align: right;
  width: 100%;
  font-style: normal;
}

img {
  border: 1px solid black;
  margin-bottom: 1ch;
}

.ref {
  padding-bottom: 0;
}

footer {
    padding-top: 1ch;
    padding-bottom: 1ch;
}

@media (max-width: 500px) {
  body {
    font-size: 13px;
  }
}