/* TODO(jez) Support pandoc .numberLines */
/* TODO(jez) Support pandoc tables */
/* TODO(jez) Support pandoc footnotes */

:root {
  --solarized-base03:    #002b36;
  --solarized-base02:    #073642;
  --solarized-base01:    #586e75;
  --solarized-base00:    #657b83;
  --solarized-base0:     #839496;
  --solarized-base1:     #93a1a1;
  --solarized-base2:     #eee8d5;
  --solarized-base3:     #fdf6e3;
  --solarized-yellow:    #b58900;
  --solarized-orange:    #cb4b16;
  --solarized-red:       #dc322f;
  --solarized-magenta:   #d33682;
  --solarized-violet:    #6c71c4;
  --solarized-blue:      #268bd2;
  --solarized-cyan:      #2aa198;
  --solarized-green:     #859900;

  --solarized-base03-99: rgba(0, 43, 54, 0.99);
  --solarized-base02-99: rgba(7, 54, 66, 0.99);
}

@media (prefers-color-scheme: light) {
  :root {
    --solarized-base03:    #fdf6e3;
    --solarized-base02:    #eee8d5;
    --solarized-base01:    #93a1a1;
    --solarized-base00:    #839496;
    --solarized-base0:     #657b83;
    --solarized-base1:     #586e75;
    --solarized-base2:     #073642;
    --solarized-base3:     #002b36;

    --solarized-base03-99: rgba(253, 246, 227, 0.99);
    --solarized-base02-99: rgba(238, 232, 213, 0.99);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

html,
body {
  background: var(--solarized-base03);
  color: var(--solarized-base0);
  font-size: 16px;
  /* Largest value of line height such that box-drawing characters touch. */
  line-height: 1.35;
  font-family: Menlo, Monaco, monospace;
  padding: 0;
}

@media screen and (max-width: 767px) {
  html,
  body {
    font-size: 14px;
  }
}

::selection {
  background: var(--solarized-base02-99);
}

main {
  box-sizing: content-box;
  max-width: 72ch;
  margin: 0 auto;
  padding-left: 2ch;
  padding-right: 2ch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1rem;
  margin: 1.35rem 0;
  color: var(--solarized-orange);
  font-weight: normal;
}

h1,
h2 {
  margin-top: 2.7rem;
}

h1 {
  font-size: 2rem;
}


h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  color: var(--solarized-green);
}

h1::before { content: '# '; }
h2::before { content: '## '; }
h3::before { content: '### '; }
h4::before { content: '#### '; }
h5::before { content: '##### '; }
h6::before { content: '###### '; }

p {
  margin: 1.35rem 0;
}

strong {
  color: var(--solarized-orange);
  font-weight: normal;
}

code {
  color: var(--solarized-cyan);
}

a {
  color: var(--solarized-green);
  text-decoration: none;
}
a:hover {
  color: var(--solarized-violet);
}
a:not([href^="#cb"])::before {
  content: '[';
}
a:not([href^="#cb"])::after {
  content: ']';
}
a:hover::before,
a:hover::after {
  color: var(--solarized-green);
}

blockquote {
  margin: 1.35rem 0;
  position: relative;
  padding-left: 2ch;
  overflow: hidden;
  color: var(--solarized-blue);
  font-style: italic;
}
blockquote p:first-child {
  margin-top: 0;
}
blockquote p:last-child {
  margin-bottom: 0;
}
blockquote em {
  font-style: normal;
}
blockquote::after {
  content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>";
  white-space: pre;
  position: absolute;
  top: 0;
  left: 0;
}

ol, ul {
  list-style: none;
  margin: 1.35rem 0;
  padding: 0;
}
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

li {
  position: relative;
}
ul > li {
  padding-left: 2ch;
}
ol > li {
  padding-left: 4ch;
}

li::after {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--solarized-blue);
}

ul > li::after {
  content: '•';
}

ol {
  counter-reset: ol;
}
ol > li::after {
  content: counter(ol) ".";
  counter-increment: ol;
}

hr {
  position: relative;
  height: 1.35rem;
  margin: 1.35rem 0;
  border: 0;
}

hr::after {
  content: '- - - - -';
  position: absolute;
  top: 0;
  left: calc(50% - 4.5ch);
  margin-left: auto;
  margin-right: auto;
  color: var(--solarized-red);
}

/* ---- codeblocks ---------------------------------------------------------- */
pre,
code {
  font-family: Menlo, Monaco, monospace;
}

div.sourceCode,
pre:not(.sourceCode) {
  background: var(--solarized-base02);
  margin: 1.35rem -2ch;
  padding: 1.35rem 2ch;
  overflow-x: auto;
}

div.sourceCode ::selection,
pre:not(.sourceCode) ::selection {
  background: var(--solarized-base03-99);
}

pre code {
  color: var(--solarized-base0);
}

a.sourceLine {
  display: inline-block;
  color: inherit;
  text-decoration: inherit;
}

a.sourceLine::before {
  text-decoration: none;
}

a.sourceLine:empty {
  height: 1.35rem;
  position: absolute;
}

code.sourceCode {
  white-space: pre;
  position: relative;
}

/* https://github.com/jez/tufte-pandoc-css/blob/76e7b68630c7f681b7f6fc6acf8e670338cf43e6/pandoc-solarized.css */
/* But with dark colors instead of light */
code span.kw { color: var(--solarized-green); font-weight: normal; font-style: normal; } /* Keyword */
code span.dt { color: var(--solarized-yellow); font-weight: normal; font-style: normal; } /* DataType */
code span.dv { color: var(--solarized-cyan); font-weight: normal; font-style: normal; } /* DecVal */
code span.bn { color: var(--solarized-cyan); font-weight: normal; font-style: normal; } /* BaseN */
code span.fl { color: var(--solarized-cyan); font-weight: normal; font-style: normal; } /* Float */
code span.ch { color: var(--solarized-cyan); font-weight: normal; font-style: normal; } /* Char */
code span.st { color: var(--solarized-cyan); font-weight: normal; font-style: normal; } /* String */
code span.co { color: var(--solarized-base01); font-weight: normal; font-style: italic; } /* Comment */
code span.ot { color: var(--solarized-blue); font-weight: normal; font-style: normal; } /* Other */
code span.al { color: var(--solarized-red); font-weight: normal; font-style: normal; } /* Alert */
code span.fu { color: var(--solarized-blue); font-weight: normal; font-style: normal; } /* Function */
code span.er { color: var(--solarized-red); font-weight: normal; font-style: normal; } /* Error */
code span.wa { color: var(--solarized-orange); font-weight: normal; font-style: italic; } /* Warning */
code span.cn { color: var(--solarized-cyan); font-weight: normal; font-style: normal; } /* Constant */
code span.sc { color: var(--solarized-red); font-weight: normal; font-style: normal; } /* SpecialChar */
code span.vs { color: var(--solarized-base0); font-weight: normal; font-style: normal; } /* VerbatimString */
code span.ss { color: var(--solarized-red); font-weight: normal; font-style: normal; } /* SpecialString */
code span.im { color: var(--solarized-base0); font-weight: normal; font-style: normal; } /* Import */
code span.va { color: var(--solarized-blue); font-weight: normal; font-style: normal; } /* Variable */
code span.cf { color: var(--solarized-green); font-weight: normal; font-style: normal; } /* ControlFlow */
code span.op { color: var(--solarized-green); font-weight: normal; font-style: normal; } /* Operator */
code span.bu { color: var(--solarized-base0); font-weight: normal; font-style: normal; } /* BuiltIn */
code span.ex { color: var(--solarized-base0); font-weight: normal; font-style: normal; } /* Extension */
code span.pp { color: var(--solarized-orange); font-weight: normal; font-style: normal; } /* Preprocessor */
code span.at { color: var(--solarized-base0); font-weight: normal; font-style: normal; } /* Attribute */
code span.do { color: var(--solarized-base01); font-weight: normal; font-style: italic; } /* Documentation */
code span.an { color: var(--solarized-base01); font-weight: normal; font-style: italic; } /* Annotation */
code span.cv { color: var(--solarized-base01); font-weight: normal; font-style: italic; } /* CommentVar */
code span.in { color: var(--solarized-base01); font-weight: normal; font-style: italic; } /* Information */