:root {
  --font-size: 14pt;
  --line-height: 1.2;
  --font-size-sm: 12pt;
  --font-size-xs: 10.5pt;

  --root-font-size: 62.5%;
  --root-line-height: 1.15;

  --font-std: "Averia Libre", sans-serif;
  --font-heading: "Averia Sans Libre", serif;
  --font-mono: monospace;

  --color-bg: #5e60a2;
  --color-content: #f8f7ff;
  --color-nav: #eae7ce;
  --color-text: black;
  --color-black: black;

  --border-std: 8px;

  --step-xs: 4px;
  --step-sm: 8px;
  --step-md: 16px;
  --step-lg: 32px;
  --step-xl: 64px;
}

@font-face {
  font-family: "Averia Sans Libre";
  font-weight: normal;
  font-style: normal;
  src: url(/static/font/AveriaSansLibre-Regular.ttf);
}

@font-face {
  font-family: "Averia Sans Libre";
  font-weight: bold;
  font-style: normal;
  src: url(/static/font/AveriaSansLibre-Bold.ttf);
}

@font-face {
  font-family: "Averia Libre";
  font-weight: normal;
  font-style: normal;
  src: url(/static/font/AveriaLibre-Regular.ttf);
}

@font-face {
  font-family: "Averia Libre";
  font-weight: normal;
  font-style: italic;
  src: url(/static/font/AveriaLibre-Italic.ttf);
}

@font-face {
  font-family: "Averia Libre";
  font-weight: bold;
  font-style: normal;
  src: url(/static/font/AveriaLibre-Bold.ttf);
}

@font-face {
  font-family: "Averia Libre";
  font-weight: bold;
  font-style: italic;
  src: url(/static/font/AveriaLibre-BoldItalic.ttf);
}

pre, code {
  font-family: var(--font-mono);
}

pre {
  background: var(--color-nav);
  padding: var(--step-sm);
  box-shadow: var(--color-black) var(--step-sm) var(--step-sm);
  margin: var(--step-md);
  overflow-x: auto;
}

hr {
  border-bottom: 1px solid var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-heading);
  margin-top: var(--step-lg);
  margin-bottom: var(--step-xs);
}

h1 {
  text-transform: unset;
  border-bottom: 3px solid var(--color-bg);
}

body {
  background-color: var(--color-bg);
  padding: 0;
  margin: 0;
  font-family: var(--font-std);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

img {
  display: block;
  max-width: 100%;
  max-height: 50vh;
  margin-left: auto;
  margin-right: auto;
}

sup {
  /*
   * Courtesy of
   * https://stackoverflow.com/questions/1530685/how-can-i-keep-consistent-line-height-with-superscript-elements/1530819#1530819
   */
  vertical-align: top;
  font-size: var(--font-size-xs);
}

blockquote {
  padding-left: var(--step-sm);
  font-style: italic;
  border-left: 8px solid var(--color-bg);
  margin: 0;
}

table {
  width: 100%;

  tr {
    td {
      font-size: var(--font-size-sm);
    }
  }
}

#nav {
  background-color: var(--color-nav);
  overflow-x: auto;
  margin-bottom: var(--step-md);

  a {
    color: var(--color-text);
    &:visited {
      color: var(--color-text);
    }
  }

  ol {
    list-style-type: none;
    padding-left: var(--step-sm);
    width: max-content;
  }

  ol > li {
    padding-left: var(--step-sm);
    padding-right: var(--step-sm);
    display: inline;

    &:first-child {
      padding-left: 0;
    }
  }

  h1 {
    display: inline;
    border: none;
    font-size: 16pt;
  }
}

#main-content {
  background-color: var(--color-content);
  margin: 0;
  max-width: 800px;
  margin-right: auto;
  margin-left: var(--step-lg);
  margin-bottom: var(--step-md);
  padding: var(--step-sm);
  border-radius: var(--border-std);
  flex: 1;
}

@media(max-width: 800px) {
  :root {
    --font-size: 13pt;
  }

  #main-content {
    max-width: unset;
    width: auto;
    margin: var(--step-md);
  }
}