:root {
  --bg-color: white;
  --fg-color: black;

  --body-bg:           #ebe3d2;
  --accent-line-color: #004080;

  --a-color:                 #336700;
  --a-hover-color:           #3ea100;
  --bg-selection-color:      #338fff;
  --blockquote-color:        #6a737d;
  --blockquote-border-color: #dfe2e5;
  --border-color:            black;
  --code-bg-color:           var(--hi-bg);
  --em-color:                black;
  --fg-selection-color:      white;
  --header-color:            #006b8f;
  --pre-bg-color:            var(--hi-bg);
  --strong-color:            black;
  --table-border-color:      black;
  --tr-bg-color:             #fbfdff;
  --alternating-row-color:   #eef0f2;

  --terminal-fg: black;
  --terminal-bg: white;

  /* https://github.com/morhetz/gruvbox/blob/master/autoload/gruvbox.vim */
  --hi-fg:      var(--fg-color);
  --hi-bg:      #f5f5e2;
  --hic-gray:   #928374;
  --hic-red:    #fb4934;
  --hic-green:  #79740e;
  --hic-blue:   #076678;
  --hic-yellow: #b57614;
  --hic-purple: #8f3f71;
  --hic-aqua:   #427b58;
  --hic-orange: #af3a03;

  --hi-comment:      var(--hic-gray);
  --hi-const:        var(--hic-purple);
  --hi-string:       var(--hic-green);
  --hi-char:         var(--hic-purple);
  --hi-number:       var(--hic-purple);
  --hi-bool:         var(--hic-purple);
  --hi-float:        var(--hic-purple);
  --hi-identifier:   var(--hic-blue);
  --hi-function:     var(--hic-green);
  --hi-statement:    var(--hic-red);
  --hi-conditional:  var(--hic-red);
  --hi-repeat:       var(--hic-red);
  --hi-operator:     var(--hi-fg);
  --hi-keyword:      var(--hic-red); /* Label and Exception are keywords */
  --hi-preproc:      var(--hic-aqua);
  --hi-type:         var(--hic-yellow);
  --hi-storageclass: var(--hic-orange);
  --hi-structure:    var(--hic-aqua);
  --hi-typedef:      var(--hic-aqua);
  --hi-ignore:       var(--hi-fg);
}

/*## Global ##*/

@font-face {
  font-family: 'Tabler';
  src: url('/font/tabler-icons-subset.ttf') format('truetype');
}

body {
  background-color: var(--body-bg);
  border-color: var(--border-color);
  color: var(--fg-color);
  min-height: calc(100vh - 16px);
  overflow-wrap: break-word;

  /* Stuff to make sure the font is rendered correctly on Safari
   * https://stackoverflow.com/a/56065714/12036073 */
  font-rendering: optimizeLegibility;
  font-weight: 400;
  -webkit-font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}
body, td, th { font-size: 18px; font-family: 'Tabler', sans-serif; }
*            { line-height: 1.3em; }

/*## No-CSS compatibility ##*/

  /* Inside _header we use <span class="br"></span>, instead of <br>, because if your browser
   * doesn't support CSS, we want most stuff to be aligned on a single line, rather than preserve
   * the "vertical" layout */
.br { display: block; }
.brt { display: block; height: 0.8em; }
  /* Without CSS, certain stuff look bad or confusing, so with this I can add elements which
   * add elements for helping with website usage, but which shouldn't be seen otherwise */
.nocss-aid { display: none; }

nav, article > #article-container { background-color: var(--bg-color); }

  /* Lists with line-separated items (ORDERED_LIST, UNORDERED_LIST) */
li > div:only-child,
li > div:only-child > img {
  display: block;
  margin: 1em 0em;
}

/*## Wrapper ##*/

#content-wrapper {
  min-height: calc(100vh - 16px);
  display: flex;
  flex-direction: row;
  border-right: 3px solid var(--accent-line-color);
}

#content-wrapper.content-wrapper-vertical               { border: none; flex-direction: column; }
.content-wrapper-vertical > #sidebar                    { max-width: initial; margin: 0; }
.content-wrapper-vertical .sidebar-section:not(#header) { display: none; }
.content-wrapper-vertical > article                     { margin-top: 8px; }

/*## Wrapper > Sidebar ##*/

#sidebar {
  background-color: var(--body-bg);
  font-size: 1.2em;
  margin-right: 8px;
  max-width: 11.2em;
}
#sidebar a { border: none; }

.sidebar-section {
  border: 3px solid var(--accent-line-color);
  box-sizing: border-box;
  padding: 1rem 1rem;
}
.sidebar-section ~ .sidebar-section { margin-top: 8px; }

/*### Wrapper > Sidebar > header ###*/

#header { border-right: none;
  font-size: 1.5em;
}
#expandNavbarBtn { float: right; margin-left: 1em; }

/*### Wrapper > Sidebar > index ###*/

#index { border-right: none; border-bottom: none; }
.index-list {
  margin: 0 0 0.5em 0.3em;
  padding-left: 0.5em;
  display: block;
  border-left: 2px solid var(--border-color);
}
.index-list-item, .index-list-item:hover {
  line-height: 1.2em;
  display: block; /* Compatibility with Chrome 49.0.2623.112 (for old machines) */
}

/*### Wrapper > Sidebar > settingsWrapper ###*/

#settingsWrapper { border-top: none; border-bottom: none;
  font-size: 1.2em;
  line-height: 1em;
  text-align: center;
}
#settingsWrapper > .setting-btn { font-size: 0.6em; }

/*### Wrapper > Sidebar > footer ###*/

#footer { border-left: none; border-top: none;
  font-size: 0.7em;
  overflow-x: hidden;
  white-space: nowrap;
  text-align: center;
}

/*## Wrapper > Article ##*/

article {
  border-top: 3px solid var(--accent-line-color);
  box-sizing: border-box;
  flex: 1;
  max-width: 56em; /* Equivalent to 50em on 19px font-size */
  margin-bottom: 1em;
  overflow: auto;

  margin-left: auto;
  margin-right: auto;
}
article > #article-container {
  /* Top padding is 1.7em * 0.67em = (h1 font size) * (h1 default margin size) */
  padding: 1.139em 1em 0 1em;
}
article > #article-container > h1:first-child {
  margin-top: 0;
}
.article-wide {
  max-width: initial;
  margin-left: initial;
  margin-right: initial;
}

/*### Wrapper > Article > page navigation ###*/

#pagenav {
  filter: opacity(64%);
  font-size: 0.8em;
  margin: 0 0 3rem 2rem;
}
#pagenav + h2, #pagenav + h3, #pagenav + h4 { margin-top: 0; }

/*### Wrapper > Article > contents ###*/

#contents-container {
  float: right;
  margin-left: 2.5em;
  background-color: var(--bg-color);
  padding-right: 0.5em;
}
#contents-container > h2 { margin-top: -1rem; }

/*### Wrapper > Article > section gap ###*/

.gap, .gap-small {
  background-color: var(--body-bg);
  margin: 0 -1em;
}
.gap       { height: 1.5em; }
.gap-small { height: 0.5em; }

/*### Wrapper > Article > special paragraphs ###*/

.special-par {
  position: relative;
  padding: 0.5em;
  padding-left: calc(32px + 1em);
}
.special-par-icon {
  vertical-align: middle;
  position: absolute;
  left: 0.5em;
  top: calc(50% - 16px);
}

.question-par  { border-left: 2px solid #4a85cb; }
.warn-par      { border: 2px dashed #fac848; }
.important-par { border: 2px solid #f46062; }

/*### Wrapper > Article > page-specific ###*/

/*#### Exercise solution ####*/

.exercise-solution { float: right; font-weight: bold; }

/* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 https://stackoverflow.com/a/47560151/12036073 */
h2 ~ .exercise-solution { font-size: 1.4em; margin-top: 0.6em; }
h3 ~ .exercise-solution { font-size: 1.1em; margin-top: 0.8em; }

/*#### Face in about page ####*/

#about-image {
  float: right;
  margin: 2em 1em 0 0;
  max-width: 7.6em;
}

/*#### Markdown overrides ####*/

.footnotes { font-size: 0.9em; margin-top: 3em; }
a[rev="footnote"] { border: none; }

.language-terminal {
  color: var(--terminal-fg);
  background-color: var(--terminal-bg);
}

/*#### No-property ####*/

.nodisplay { display: none !important; }
.no-wrap {
  color: inherit;
  vertical-align: baseline;
  white-space: nowrap;
}

/*### Wrapper > Article > buttons ###*/

.btn:hover   { cursor: pointer; }
.btn:active  { transform: scale(0.9); }

.setting-btn {
  text-align: center;
  display: inline-block;
  line-height: 1em;
  border: 1px solid var(--border-color);
  padding: 0.4em;
}

.btn, .h-anchor {
  /* Thanks https://stackoverflow.com/a/4407335/12036073 */

  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Safari */
  -khtml-user-select: none;    /* Konqueror HTML */
  -moz-user-select: none;      /* Old versions of Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;
}

/*### Wrapper > Article > footer ###*/

article > #article-container > footer {
  margin: 0 -1em;
  padding: 0.5em;
  border: 3px solid var(--accent-line-color);
  border-left: none;
  border-right: none;
  text-align: center;
}

/*### Wrapper > Article > h, h-anchor ###*/

h1, h2, h3, h4, h5, h6 {
  color: var(--header-color);
  display: inline-block;
  line-height: 1.25em;
  border-bottom: 2px solid var(--border-color);
}
h1 { display: block; font-size: 1.7em; margin-block-end: 0.5em; }

h1 + *, h1 ~ h1, .h-anchor + * { margin-top: 0; }
.h-anchor { color: var(--fg-color); border: none; }

/* Slightly smaller than browser defaults https://stackoverflow.com/a/70720104/12036073 */
h2 + .h-anchor { font-size: 1.4em; }
h3 + .h-anchor { font-size: 1.1em; }

/*### Wrapper > Article > a ###*/

a, a strong {
  border-bottom: 1px dashed;
  color: var(--a-color);
  text-decoration: none;
}
a:hover, a strong:hover { color: var(--a-hover-color); }
sup a, dt a { border: none; }
a *         { color: var(--fg-color); }

code > a, code > a:hover {
  color: var(--fg-color);
  text-decoration: none;
  border: none;
}

/*### Wrapper > Article > i, em, strong ###*/

i, em { color: var(--em-color); }
strong { color: var(--strong-color); }

/*### Wrapper > Article > blockquote ###*/

blockquote {
  border-left: 0.25em solid var(--blockquote-border-color);
  color: var(--blockquote-color);
  margin: 0 0 16px 0;
  padding: 0 1em;
}
blockquote > :first-child { margin-top: 0; }
blockquote > :last-child  { margin-bottom: 0; }

/*### Wrapper > Article > dt, dd ###*/

dt, dd {
  border: 2px solid var(--border-color);
  border-bottom: none;
  border-top: none;
  padding: 0 0.5em;
}
dt   { font-size: 1.2em; padding-top: 0.2em; }
dt * { vertical-align: middle; }
dd {
  line-height: 1.5em;
  margin: 0 0 1em 0;
  padding: 0 0 0.4em 49px;
}

/*### Wrapper > Article > img, hr ###*/

img {
  box-sizing: border-box;
  max-width: 100%;
}
img, hr           { border: 1px solid var(--border-color); }
dt img, .svg      { box-sizing: border-box; max-height: 1em; }
.pixelated-render { image-rendering: pixelated; }
.oldschool-badge  { height: 38px; }
.flag             { max-width: 1.3em; } /* Compatibility with Chrome 49.0.2623.112 (for old machines) */

.file-type-icon   { min-width: 1.3em; vertical-align: middle; }
.borderless, .oldschool-badge, .file-type-icon { border: none; }

/*### Wrapper > Article > code, pre ###*/

/* The following CSS is a modified version of sindresorhus's github-markdown-css repo: https://github.com/sindresorhus/github-markdown-css */
code, pre {
  font-family: monospace;
  font-size: 85%;
}

pre {
  overflow: auto;
  word-break: normal;
  word-wrap: normal;
}

code {
  background-color: var(--pre-bg-color);
  margin: 0;
  padding: 0 0.4em;
}
pre code {
  border: 0;
  display: inline-block;
  font-size: 100%;
  overflow: visible;
  padding: 0;
  word-wrap: normal;
}
pre > code {
  white-space: pre-wrap;
  word-break: break-all;
  padding: 0.9em;
  width: 100%;
  box-sizing: border-box;
}

table code {
  font-size: 0.7em;
  white-space: normal;
}
dd code { font-size: 0.8em; }

.HI-comment      { color: var(--hi-comment); }
.HI-const        { color: var(--hi-const); }
.HI-string       { color: var(--hi-string); }
.HI-char         { color: var(--hi-char); }
.HI-number       { color: var(--hi-number); }
.HI-bool         { color: var(--hi-bool); }
.HI-float        { color: var(--hi-float); }
.HI-identifier   { color: var(--hi-identifier); }
.HI-function     { color: var(--hi-function); }
.HI-statement    { color: var(--hi-statement); }
.HI-conditional  { color: var(--hi-conditional); }
.HI-repeat       { color: var(--hi-repeat); }
.HI-operator     { color: var(--hi-operator); }
.HI-keyword      { color: var(--hi-keyword); /* Label and Exception are keywords */ }
.HI-preproc      { color: var(--hi-preproc); }
.HI-type         { color: var(--hi-type); }
.HI-storageclass { color: var(--hi-storageclass); }
.HI-structure    { color: var(--hi-structure); }
.HI-typedef      { color: var(--hi-typedef); }
.HI-ignore       { color: var(--hi-ignore); }
.HI-comment *    { color: inherit; } /* If text inside a comment is matched, don't show it */

/*### Wrapper > Article > table ###*/

table {
  border-collapse: collapse;
  margin: 1em 0;
  overflow: auto;
}
td, th { word-break: normal !important; padding: 0.5em; }
tr { background-color: var(--tr-bg-color); }
thead > tr, tr:nth-child(2n) { background-color: var(--alternating-row-color); }
th { border: 1px solid  var(--table-border-color); font-size: 1.1em; font-weight: bold; }
td + td { border-left: 1px dashed var(--table-border-color); }
td:empty { height: 1em; }

/*## Wrapper > Scroll Button ##*/

#scrollBtn {
  font-size: 1.66rem;
  padding: 0 0.15em;
  bottom: 1rem;
  right: 1rem;
  z-index: 1;
  transition-duration: 0.5s;
  background-color: var(--bg-color);
  display: none;
  position: fixed;
  border: 1px solid;
}

/*## Small screen support ##*/

@media screen and ((max-width: 610px) or (max-height: 610px)) {
  article { max-width: calc(100vw - 16px - 3px); margin-top: 8px; }
  table td, table th { word-break: break-all; }

  #about-image { max-width: 4.38em; }

  #content-wrapper { border: none; flex-direction: column; }
  #sidebar { max-width: initial; margin: 0; }
  /* page-width.js */
  #changeWidthBtn { display: none; }
}

/*## Printing support ##*/

@media print {
  h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img,
  nav, #scrollBtn, .gap, .gap-small { display: none !important; }

  body { margin: 0; }
  body, article {
    background-color: white;
    border: none !important;
  }

  pre, code { white-space: pre-wrap !important; }
  .language-terminal { color: var(--fg-color); background-color: var(--bg-color); }
  .slide, .absolute-slide { transform: none !important; margin: 0; }
}