:root {
  --main-bg-color: #161616;
  --lighter-bg-color: #1c1c1c;
  --lightest-bg-color: #282828;
  --main-fg-color: #c2c2c2;
  --lighter-fg-color: #eaeaea;
  --subtle-fg-color: #666666;
  --main-accent-color: #ff8a00;
  --lighter-accent-color: #ff9f33;
  --inline-code-color: #c2c2c2;
  --code-font-weight: 500;
  --code-font-size: 1em;
}

*{
  font-family: sans-serif;
}

body {
  background-color: var(--main-bg-color);
  color: var(--main-fg-color);
}

#header {
  background-color: var(--lighter-bg-color);
  margin-bottom: 2em;
}

#header h1, h2, h3, h4, h5 {
  white-space: nowrap;
}

#header-left {
  padding: 0 1em;
  /* Don't ask why, but seems to be sweet-spot so this header part */
  /* doesn't "jump" between mobile and desktop view. */
  padding-top: 0.0025em;
}

#header-middle {
  display: flex;
  flex-wrap: wrap;
}

#header-middle h3{
  padding: 0 1em;
  margin-top: -0.25em;
}

#header-right
{
  display: none;
}

@media only screen and (min-width: 992px) {
  #header {
    display: grid;
    grid-template-columns: minmax(min-content, 1fr) 1fr minmax(min-content, 1fr);
    align-items: center;
    background-color: var(--lighter-bg-color);
    margin-bottom: 2em;
  }

  #header-left {
    grid-column: 1;
    padding: 0 1em;
  }

  #header-middle {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-grow: 1;
    flex-wrap: nowrap;
  }

  #header-middle h3 {
    margin: 0;
  }

  #header-right {
    grid-column: 3;
    padding: 0 1em;
  }
}

#content {
    padding: 0 1em;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--lighter-fg-color);
}

h1.title {
  font-size: 2em;
  padding-bottom: 0.5em;
}

/* Special handling for index post headers and dates */
.index-posts .outline-3 h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0;
}

.index-post-date {
  color: var(--subtle-fg-color);
  font-size: 0.9em;
  margin-top: 0.5em;
}

/* Special handling for post dates */
.post-date {
  color: var(--subtle-fg-color);
  font-size: 1em;
  /* Since this is below the title (with size 2em), this should be fine. */
  margin-top: -1em;
  padding-bottom: 0.5em;
  text-align: center;
}

.org-dl dt {
  display: none;
}

.org-dl dd {
  padding: 0;
  margin: 0;
  /* This should be below post-date, which is also -1em, so should be fine. */
  margin-top: -1em;
  padding-bottom: 0.5em;
  text-align: center;
}

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

a:hover {
  color: var(--lighter-accent-color);
}

#footer {
  background-color: var(--lighter-bg-color);
  padding: 1em;
  margin-top: 2em;
}

blockquote {
  border-left: 4px solid var(--lightest-bg-color);
  padding-left: 1em;
  margin-left: 0;
}

ul, ol {
  padding-left: 1.5em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid var(--lightest-bg-color);
}

th, td {
  padding: 0.5em;
}

th {
  background-color: var(--lighter-bg-color);
  color: var(--lighter-fg-color);
}

.figure {
  /* org publish default is 1em */
  padding: 0.25em;
}

/* images should scale down on small screens */
img {
  max-width: 100%;
  height: auto;
}

/* container around tags */
span.tag {
  background-color: var(--main-bg-color);
  padding: 0.125em 0.25em;
  margin-left: 0.5em;
  font-family: monospace;
}

/* actual tags */
span.tag span {
  background-color: var(--lighter-bg-color);
  color: var(--main-fg-color);
  border-radius: 0.25em;
  padding: 0.2em 0.4em;
}

/* Inline code */
code {
  background-color: var(--lighter-bg-color);
  color: var(--inline-code-color);
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-family: monospace;
  font-weight: var(--code-font-weight);
  font-size: var(--code-font-size);
}

/* Code blocks */
pre {
    /* org publish default is 1.2em */
    margin: 0;
}

pre.src {
  background-color: var(--lighter-bg-color);
  border: 1px solid var(--lightest-bg-color);
  border-radius: 0.25em;
  padding: 1em;
  overflow: auto;
  font-family: monospace;
  font-weight: var(--code-font-weight);
  font-size: var(--code-font-size);
}

/* Org export seems to use 'span's for specific types, */
/* which apparently use the font specified in '*' block at top. */
pre.src span{
  font-family: monospace;
  font-weight: var(--code-font-weight);
  font-size: var(--code-font-size);
}

/* Syntax highlighting - theme based on website's accent */
pre span.org-builtin {color: #ff8a00;}
pre span.org-comment-delimiter {color: #666666;}
pre span.org-comment {color: #666666;}
pre span.org-constant {color: #f4cf86;}
pre span.org-function-name {color: #c2c2c2;}
pre span.org-keyword {color: #ff306b;}
pre span.org-preprocessor {color: #00e0a7;}
pre span.org-string {color: #f4cf86;}
pre span.org-type {color: #ff8a00;}
pre span.org-variable-name {color: #c2c2c2;}

/* Other options that I might want to change in the future. */
/* pre span.org-outshine-level-1            {color:#c2c2c2;} */
/* pre span.org-outshine-level-2            {color:#c2c2c2;} */
/* pre span.org-outshine-level-3            {color:#c2c2c2;} */
/* pre span.org-outshine-level-4            {color:#c2c2c2;} */
/* pre span.org-outshine-level-5            {color:#c2c2c2;} */
/* pre span.org-outshine-level-6            {color:#c2c2c2;} */
/* pre span.org-outshine-level-7            {color:#c2c2c2;} */
/* pre span.org-outshine-level-8            {color:#c2c2c2;} */
/* pre span.org-outshine-level-9            {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-1  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-2  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-3  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-4  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-5  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-6  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-7  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-8  {color:#c2c2c2;} */
/* pre span.org-rainbow-delimiters-depth-9  {color:#c2c2c2;} */
/* pre span.org-sh-quoted-exec              {color:#c2c2c2;} */

/* Org defined languages. */
pre.src-C:before          { background-color: var(--lightest-bg-color); }
pre.src-D:before          { background-color: var(--lightest-bg-color); }
pre.src-J:before          { background-color: var(--lightest-bg-color); }
pre.src-R:before          { background-color: var(--lightest-bg-color); }
pre.src-abc:before        { background-color: var(--lightest-bg-color); }
pre.src-ada:before        { background-color: var(--lightest-bg-color); }
pre.src-ash:before        { background-color: var(--lightest-bg-color); }
pre.src-asm:before        { background-color: var(--lightest-bg-color); }
pre.src-asymptote:before  { background-color: var(--lightest-bg-color); }
pre.src-authinfo::before  { background-color: var(--lightest-bg-color); }
pre.src-awk:before        { background-color: var(--lightest-bg-color); }
pre.src-bash:before       { background-color: var(--lightest-bg-color); }
pre.src-calc:before       { background-color: var(--lightest-bg-color); }
pre.src-caml:before       { background-color: var(--lightest-bg-color); }
pre.src-clojure:before    { background-color: var(--lightest-bg-color); }
pre.src-conf:before       { background-color: var(--lightest-bg-color); }
pre.src-coq:before        { background-color: var(--lightest-bg-color); }
pre.src-cpp:before        { background-color: var(--lightest-bg-color); }
pre.src-csh:before        { background-color: var(--lightest-bg-color); }
pre.src-css:before        { background-color: var(--lightest-bg-color); }
pre.src-dash:before       { background-color: var(--lightest-bg-color); }
pre.src-delphi:before     { background-color: var(--lightest-bg-color); }
pre.src-ditaa:before      { background-color: var(--lightest-bg-color); }
pre.src-dot:before        { background-color: var(--lightest-bg-color); }
pre.src-ebnf2ps:before    { background-color: var(--lightest-bg-color); }
pre.src-emacs-lisp:before { background-color: var(--lightest-bg-color); }
pre.src-forth:before      { background-color: var(--lightest-bg-color); }
pre.src-fortran:before    { background-color: var(--lightest-bg-color); }
pre.src-gnuplot:before    { background-color: var(--lightest-bg-color); }
pre.src-groovy:before     { background-color: var(--lightest-bg-color); }
pre.src-haskell:before    { background-color: var(--lightest-bg-color); }
pre.src-hledger:before    { background-color: var(--lightest-bg-color); }
pre.src-html:before       { background-color: var(--lightest-bg-color); }
pre.src-idl:before        { background-color: var(--lightest-bg-color); }
pre.src-io:before         { background-color: var(--lightest-bg-color); }
pre.src-java:before       { background-color: var(--lightest-bg-color); }
pre.src-js:before         { background-color: var(--lightest-bg-color); }
pre.src-ksh:before        { background-color: var(--lightest-bg-color); }
pre.src-latex:before      { background-color: var(--lightest-bg-color); }
pre.src-ledger:before     { background-color: var(--lightest-bg-color); }
pre.src-lilypond:before   { background-color: var(--lightest-bg-color); }
pre.src-lisp:before       { background-color: var(--lightest-bg-color); }
pre.src-lua:before        { background-color: var(--lightest-bg-color); }
pre.src-makefile:before   { background-color: var(--lightest-bg-color); }
pre.src-matlab:before     { background-color: var(--lightest-bg-color); }
pre.src-maxima:before     { background-color: var(--lightest-bg-color); }
pre.src-mercury:before    { background-color: var(--lightest-bg-color); }
pre.src-metapost:before   { background-color: var(--lightest-bg-color); }
pre.src-mksh:before       { background-color: var(--lightest-bg-color); }
pre.src-modula-2:before   { background-color: var(--lightest-bg-color); }
pre.src-mscgen:before     { background-color: var(--lightest-bg-color); }
pre.src-nxml:before       { background-color: var(--lightest-bg-color); }
pre.src-ocaml:before      { background-color: var(--lightest-bg-color); }
pre.src-octave:before     { background-color: var(--lightest-bg-color); }
pre.src-org:before        { background-color: var(--lightest-bg-color); }
pre.src-oz:before         { background-color: var(--lightest-bg-color); }
pre.src-pascal:before     { background-color: var(--lightest-bg-color); }
pre.src-perl:before       { background-color: var(--lightest-bg-color); }
pre.src-picolisp:before   { background-color: var(--lightest-bg-color); }
pre.src-plain-tex:before  { background-color: var(--lightest-bg-color); }
pre.src-plantuml:before   { background-color: var(--lightest-bg-color); }
pre.src-posh:before       { background-color: var(--lightest-bg-color); }
pre.src-processing:before { background-color: var(--lightest-bg-color); }
pre.src-prolog:before     { background-color: var(--lightest-bg-color); }
pre.src-ps:before         { background-color: var(--lightest-bg-color); }
pre.src-python:before     { background-color: var(--lightest-bg-color); }
pre.src-ruby:before       { background-color: var(--lightest-bg-color); }
pre.src-sass:before       { background-color: var(--lightest-bg-color); }
pre.src-scala:before      { background-color: var(--lightest-bg-color); }
pre.src-scheme:before     { background-color: var(--lightest-bg-color); }
pre.src-screen:before     { background-color: var(--lightest-bg-color); }
pre.src-sed:before        { background-color: var(--lightest-bg-color); }
pre.src-sh:before         { background-color: var(--lightest-bg-color); }
pre.src-shell:before      { background-color: var(--lightest-bg-color); }
pre.src-simula:before     { background-color: var(--lightest-bg-color); }
pre.src-sql:before        { background-color: var(--lightest-bg-color); }
pre.src-sqlite:before     { background-color: var(--lightest-bg-color); }
pre.src-tcl:before        { background-color: var(--lightest-bg-color); }
pre.src-tex:before        { background-color: var(--lightest-bg-color); }
pre.src-verilog:before    { background-color: var(--lightest-bg-color); }
pre.src-vhdl:before       { background-color: var(--lightest-bg-color); }
pre.src-xml:before        { background-color: var(--lightest-bg-color); }