:root {
  /* font stacks */
  --fontstack-serif: 'Averia Serif Libre', cursive;
  --fontstack-sans: 'Averia Serif Libre', cursive;

  /* heading scales */
  --h1-font-size: 3.052em;
  --h2-font-size: 2.441em;
  --h3-font-size: 1.953em;
  --h4-font-size: 1.563em;
  --h5-font-size: 1.25em;
}

html {
  font-size: 24px;
}
body {
  background-color: #212424;
  color: #E1E1E1;
  font-family: var(--fontstack-serif);
  line-height: 1.4;
  margin: 0 auto;
  max-width: 40em;
  padding: 1em;
  box-sizing: border-box;
}


/***
 * Basics
 * ======
 */
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}
small {
  font-size: 0.75em;
}
p {
  margin: 1.025em 0;
}
blockquote {
  background: rgba(255, 255, 255, 0.05);
  border-left: solid;
  margin: 1em 0;
  padding-left: 1em;
  padding: 0.5em 1em;
}


/***
 * Headers 
 * ======= 
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fontstack-sans);
  margin: 2.75rem 0 1rem 0;
  color: darkcyan;
  font-weight: 700;
  line-height: 1.2;
  text-transform: capitalize;
}
h1 {
  font-size: var(--h1-font-size);
  margin-top: 1em 0 0.5em 0;
}
h1::before {
  content: '# ';
}
h2 {
  font-size: var(--h2-font-size);
}
h2::before {
  content: '## ';
}
h3 {
  font-size: var(--h3-font-size);
}
h3::before {
  content: '### ';
}
h4 {
  font-size: var(--h4-font-size);
}
h4::before {
  content: '#### ';
}
h5 {
  font-size: var(--h5-font-size);
}
h5::before {
  content: '##### ';
}


/***
 * Links
 * =====
 */
a {
  color: aqua;
}


/***
 * Code
 * ====
 */
pre {
  padding: 0.5em 0.2em;
}
pre, code {
  background-color: rgba(0, 0, 0, 0.8);
  color: tomato;
  letter-spacing: 0.5px;
  font-size: 16px;
  line-height: 1;
  overflow-y: scroll;
}


/***
 * Lists
 * =====
 */
dd {
  margin: 0 0 0.5em 2em;
}

/***
 * Tables
 * ======
 */
table {
  border-collapse: collapse;
  border: 1px solid;
}
th, td {
  padding: 0.5rem 1rem;
  text-align: left;
  border-bottom: 1px solid;
}
th {
  font-size: 1.5em;
  font-weight: bolder;
}
tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.3);
}
tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.8);
}
.u-full-width {
  left: 50%;
  position: relative;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}