:root {
  --font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size: 14pt;
  --line-height: 1.6em;

  --spacing: 1.2rem;
  --max-width: 100%;

  --background: white;
  --background-dark: #f5f5f5;
  --background-highlight: #e5e5e5;
  --text: #2c323d;

  --blue: #1789e7;
  --grey: #ABB2BF;

  --code-font-family: 'menlo', monospace;
  --code-comment: #ABB2BF;
  --code-keyword: #BA72D1;
  --code-string: #95BF77;
  --code-number: #CC9765;
  --code-function: #5DA5E1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #2c323d;
    --background-dark: #3e4452;
    --background-highlight: #3e4452;
    --text: #ABB2BF;

    --grey: #575D68;

    --code-comment: #575D68;
  }
}

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

h1, h2, h3, h4, h5, h6, p, div, pre, ul, ol, img, svg, table, blockquote {
  margin: var(--spacing) auto;
  max-width: var(--max-width);
  display: block;
  /*border: 1px solid red;*/
}

details summary {
  margin: var(--spacing) auto;
  max-width: var(--max-width);
  font-weight: bold;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: var(--spacing);
  padding-top: var(--spacing);
}

h1:first-child {
  margin-top: 0;
}

a { color: var(--blue); text-decoration: none; }

code {
  color: var(--text);
  display: inline-block;
  font-family: var(--code-font-family);
  background-color: var(--background-highlight);
  padding: 0.2em 0.4em;
  line-height: 1em;
  border-radius: 0.4em;
  font-size: 0.8em;
  vertical-align: middle;
}

pre code {
  font-size: .8em;
  line-height: 1.4em;
  display: block;
  overflow: auto;
  padding-left: calc(var(--spacing)*1.4);
  background: transparent;
}

pre code .kn,
pre code .kd,
pre code .k,
pre code .kt,
pre code .nb { color: var(--code-keyword); }
pre code .s { color: var(--code-string); }
pre code .c1 { color: var(--code-comment); }
pre code .kc,
pre code .n,
pre code .mi { color: var(--code-number); }
pre code .nf { color: var(--code-function); }

blockquote p {
  margin: 0;
  margin-left: calc(var(--spacing)*1.4);
  border-left: 4px solid var(--blue);
  padding-left: var(--spacing);
  font-style: italic;
}

.katex-display {
  display: block;
  margin: 0 auto;
  font-size: 1.4em;
}
.katex-html { display: none; }

ul, ol {
  padding: 0;
}

ul ul, ol ol {
  margin-top: 0;
  margin-bottom: 0;
}

ul li,
ol li {
  margin-left: calc(var(--spacing)*2);
}

ul ul li,
ol ol li {
  margin-left: var(--spacing);
}

ul li {
  list-style-type: none;
  position: relative;
}

ul li::before {
  content: '*';
  position: absolute;
  color: var(--grey);
  left: calc(var(--spacing)*-1);
  font-size: 1.6em;
  line-height: 1.3em;
}

ol li::marker { color: var(--grey); }

.footnotes hr { border: 1px solid var(--grey); }
.footnotes ol { font-size: 0.8em; padding-left: var(--spacing); }
.footnotes ol li { margin: 0; }
.footnotes ol li p { margin: 0; }