@font-face {
  font-family: 'fira-mono';
  src: url('firamono.woff2') format('woff2'),
       url('firamono.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'open-sans';
  src: url('opensans.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

:root {
  /* font stacks */
  --font-family-serif: 'fira-mono', 'Courier New', Courier, monospace;
  --font-family-sans: 'open-sans', Trebuchet, Tahoma, Arial, sans-serif;

  /* font sizes */
  --font-sm: 0.64rem;
  --font-md: 0.8rem;
  --font-base: 1rem;
  --font-lg: 1.25rem;
  --font-xl: 1.563rem;
  --font-2xl: 1.953rem;
  --font-3xl: 2.441rem;
  --font-4xl: 3.052rem;

  /* colors */
  --c-dark: #212424;
  --c-dark-lighter: #2C2F2F;
  --c-dark-darker: #070707;
  --c-light: #E1E1E1;
  --c-primary: #008b8b;
  --c-primary-variant: #00FFFF;
  --c-secondary: #FF6347;
  --c-transparency-dark: rgba(0,0,0,0.5);
  --c-transparency-light: rgba(255,255,255,0.05);

  /* spacings */
  --spacer-3xs: 0.125rem;
  --spacer-2xs: 0.25rem;
  --spacer-xs: 0.5rem;
  --spacer-sm: 1rem;
  --spacer-md: 1.5rem;
  --spacer-lg: 2rem;
  --spacer-xl: 2.5rem;
  --spacer-2xl: 5rem;
}

@media (prefers-color-scheme: dark) {
  body {
    --background-color: var(--c-dark);
    --content-color: var(--c-light);
    --header-color: var(--c-primary);
    --link-color: var(--c-primary-variant);
    --code-color: var(--c-dark);
  }
}

@media (prefers-color-scheme: light) {
  body {
    --background-color: var(--c-light);
    --content-color: var(--c-dark);
    --header-color: var(--c-primary);
    --link-color: var(--c-primary);
    --code-color: var(--c-light);
  }
}

html {
  font-size: 20px;
}
body {
  background-color: var(--background-color, var(--c-dark));
  color: var(--content-color, var(--c-light));
  font-family: var(--font-family-serif);
  line-height: 1.2;
  margin: 0 auto;
  max-width: 40rem;
  padding: var(--spacer-md);
  box-sizing: border-box;
}


/***
 * Basics
 * ======
 */
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}
small {
  font-size: var(--font-md);
}
p {
  margin: var(--spacer-md) 0;
}
blockquote {
  background: var(--c-transparency-light);
  border-left: solid;
  margin: var(--spacer-sm) 0;
  padding: var(--spacer-xs) var(--spacer-sm);
}


/***
 * Headers 
 * ======= 
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  margin: var(--spacer-xl) 0 var(--spacer-sm) 0;
  color: var(--header-color, var(--c-primary));
  line-height: 1.2;
  text-transform: capitalize;
}
h1 {
  font-size: var(--font-4xl);
}
h1::before {
  content: '# ';
}
h2 {
  font-size: var(--font-3xl);
}
h2::before {
  content: '## ';
}
h3 {
  font-size: var(--font-2xl);
}
h3::before {
  content: '### ';
}
h4 {
  font-size: var(--font-xl);
}
h4::before {
  content: '#### ';
}
h5 {
  font-size: var(--font-lg);
}
h5::before {
  content: '##### ';
}


/***
 * Links
 * =====
 */
a {
  color: var(--link-color, var(--c-primary-variant));
}
a.footnote-ref {
  text-decoration: none;
}
sup {
  font-size: small;
  vertical-align: 50%;
}

/***
 * Code
 * ====
 */
pre {
  padding: 1rem;
  border: dashed 0.5px gray;
}
pre, code {
  background-color: var(--code-color);
  letter-spacing: 0.5px;
  font-size: var(--font-md);
  line-height: 1.25;
  overflow-y: scroll;
}

/***
 * Lists
 * =====
 */
ul, ol {
  margin-left: var(--spacer-lg);
}
ul li {
  list-style-type: disc;
}
ol li {
  list-style-type: decimal;
}
dd {
  margin: 0 0 var(--spacer-xs) var(--spacer-lg);
}

/***
 * Form Elements
 * =============
 */
button {
  background-color: var(--content-color);
  color: var(--background-color);
  font-size: var(--font-md);
  padding: var(--spacer-2xs) var(--spacer-sm);
  border: none;
  cursor: pointer;
  border-radius: 3px;
}


/***
 * Utilities
 * =========
 */

.u-full-width {
  left: 50%;
  position: relative;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
}


/***
 * Table
 * =====
 */
table {
  font-family: "Arial Black", Gadget, sans-serif;
  border: 2px solid #000000;
  background-color: #4A4A4A;
  width: 100%;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid #4A4A4A;
  padding: 3px 2px;
}
table tbody td {
  font-size: 13px;
  color: #E6E6E6;
}
table tr:nth-child(even) {
}
table thead {
  background: #000000;
  border-bottom: 3px solid #000000;
}
table thead th {
  font-size: 15px;
  font-weight: bold;
  color: #E6E6E6;
  text-align: center;
  border-left: 2px solid #4A4A4A;
}
table thead th:first-child {
  border-left: none;
}

table tfoot {
  font-size: 12px;
  font-weight: bold;
  color: #E6E6E6;
  background: #000000;
  background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
  background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
  background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
  border-top: 1px solid #4A4A4A;
}
table tfoot td {
  font-size: 12px;
}

/*
 * Figure
 * ======
 */
figcaption {
  margin-top: 1em;
  font-size: smaller;
  font-style: italic;
  text-align: center;
}