:root {
  --text-color: rgba(255, 255, 255, 0.92);
  --link-color: rgb(0, 102, 204);
  --bg-color: rgba(0, 0, 0, 0.92);
}

@font-face {
  font-family: font-style;
  src: local("Segoe UI"),
       local("Roboto"),
       local("Helvetica Neue"),
       local("Helvetica"),
       local("Arial");
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "font-style", sans-serif;
  font-size: 2rem;
  margin: 1.3rem;
  font-feature-settings: "kern";
}

header {
  text-align: center;
}

header a {
  color: var(--text-color);
  font-size: 1.6rem;
  padding: 0.5rem
}
header a:visited {
  color: inherit;
}

/* *Inline* code */
code {
  color: crimson;
  font-size: 1.8rem;
  background-color: #f9fafa;
  border-color: #d2d2d7;
  border-width: 1px;
  border-radius: .3rem;
  padding-left: .25rem;
  padding-right: .25rem;
  padding-top: 1px;
  padding-bottom: 1px;
}

/* Large screens */
@media only screen and (min-width: 1080px) {
  body {
    font-size: 1.2rem;
  }
  header a {
    font-size: 1.25rem;
  }
  code {
    font-size: 1.0rem;
  }
}

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: .011em;
}

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

hr {
  height: 1px;
  border: none;
  background-color: white;
}

ul {
  list-style-type: none;
}

time {
  font-size: 1rem;
  font-style: italic;
}

/* What I'm using to style maths equations */
span.math {
  font-style: italic;
  font-family: "Times New Roman", Times, serif;
}

td, th {
  padding: 1rem;
  text-align: center;
}

dl > dt {
  margin: 0.25rem auto;
}

object {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* What I'm using to make a <code> *block* element */
pre code {
  font-size: 1.2rem;
  overflow: scroll;
  display: block;
  background-color: #262626;
  color: #ffd7af;
}

/* Syntax highlighting */
pre code span.line-num {
  color: #8a8a8a;
}

pre code span.keyword {
  color: #d75f5f;
}

pre code span.operator {
  color: #ff8700;
}

/* Mostly for literal values, but is also used for imports for some reason */
pre code span.value {
  color: #d787af;
}

/* Also used for null for some reason */
pre code span.string {
  color: #87af87;
}

pre code span.function {
  color: #afaf00;
}

pre code span.init {
  color: #87afaf;
}

pre code span.import {
  color: #ffaf00;
}