: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-string:       var(--hic-green);
  --hi-interp:       var(--hic-purple);
  --hi-number:       var(--hic-purple);
  --hi-function:     var(--hic-green);
  --hi-operator:     var(--hic-orange);
  --hi-keyword:      var(--hic-red);
  --hi-preproc:      var(--hic-aqua);
  --hi-type:         var(--hic-yellow);
  --hi-escape:       var(--hic-orange);
}

/*## 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', 'Liberation Sans', 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(--strong-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;
  max-width: 63rem;
  margin: 0 auto;
}
.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;

  line-height: 1.6em;
  padding-top: calc(1rem - 0.3em);
}
#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;
  border-right-color: var(--strong-color);
  border-bottom-color: var(--border-color);
}

/*## 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;
}
.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 ###*/

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

.special-par {
  position: relative;
  margin: 1em 0;
  padding: 2px;
}
.special-contents {
  border: inherit;
  border-style: solid;
}
.special-with-icon {
  padding: 0.5em;
  padding-left: calc(32px + 1em);
}

.question-par, .question-par > .special-contents {
  border-right: none; border-top: none; border-bottom: none;
}

.special-contents > .gap-small, .special-contents > .gap {
  display: none;
}
.special-par-icon {
  vertical-align: middle;
  position: absolute;
  left: calc(0.5em + 4px);
  top: calc(50% - 16px);
}

.note-par > .special-contents {
  padding: 0.5rem 1rem;
}
.note-par > h1:first-of-type,
.note-par > h2:first-of-type,
.note-par > h3:first-of-type,
.note-par > h4:first-of-type,
.note-par > h5:first-of-type,
.note-par > h6:first-of-type {
  margin-top: 1rem;
}

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

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

.exercise-solution { float: right; font-weight: bold; }
.exercise-solution ~ p { margin-top: 0; }

/* 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;
  border-bottom-color: var(--border-color);
  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;
}
dd + dt { margin-top: 1em; }
dt   { font-size: 1.2em; padding-top: 0.2em; }
dt * { vertical-align: middle; }
dd {
  line-height: 1.5em;
  margin: 0;
  padding: 0 0 0.4em 49px;
}

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

img {
  box-sizing: border-box;
  max-width: 100%;
}
p > img           { max-width: 60%; }
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, 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;
  line-height: 1em;
  tab-size: 4;
}

table pre > code {
  background-color: initial;
  padding: 0.2em;
}
dd code { font-size: 0.8em; }

.hl.erm { color:#ff0000; font-weight:bold; border:solid 1px red; margin-left: 3em; }
.hl.err { color:#ff0000; font-weight:bold; }
.hl.kwf { color:#750dc3; }

.hl.slc, .hl.com { color: var(--hi-comment); }
.hl.pps, .hl.sng { color: var(--hi-string); }
.hl.kwb, .hl.kwc { color: var(--hi-type); }
.hl.num          { color: var(--hi-number); }
.hl.ipl          { color: var(--hi-interp); }
.hl.kwd          { color: var(--hi-function); font-weight: bold; }
.hl.kwa          { color: var(--hi-keyword); }
.hl.opt          { color: var(--hi-operator); }
.hl.ppc          { color: var(--hi-preproc); }
.hl.esc          { color: var(--hi-escape); }
.hl.kwe          { color: inherit; }

/*### 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+1) { 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; }
}

/*## Snow ##*/

.snowContainer {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
}

.noSnow > .snowflake {
  display: none !important;
  animation: none !important;
}

.snowflake {
  pointer-events: none;
  position: fixed;

  width: 2px;
  height: 2px;
  background-color: white;
  box-shadow: 1px 1px 2px black;

  top: -3vh;

  animation:
    70s linear      0s infinite           snowfall,
    10s ease-in-out 0s infinite alternate snowsway;
}

@keyframes snowfall {
  from {
    top: -3vh;
  }
  to {
    top: 101vh;
  }
}

@keyframes snowsway {
  from {
    transform: translateX(-20px);
  };
  to {
    transform: translateX(20px);
  };
}

.snow-column-1  { left:  3%; }
.snow-column-2  { left:  5%; }
.snow-column-3  { left:  8%; }
.snow-column-4  { left: 13%; }
.snow-column-5  { left: 18%; }
.snow-column-6  { left: 23%; }
.snow-column-7  { left: 28%; }
.snow-column-8  { left: 35%; }
.snow-column-9  { left: 40%; }
.snow-column-10 { left: 45%; }
.snow-column-11 { left: 52%; }
.snow-column-12 { left: 58%; }
.snow-column-13 { left: 62%; }
.snow-column-14 { left: 68%; }
.snow-column-15 { left: 71%; }
.snow-column-16 { left: 79%; }
.snow-column-17 { left: 84%; }
.snow-column-18 { left: 87%; }
.snow-column-19 { left: 92%; }
.snow-column-20 { left: 97%; }

.snow-start-1  { animation-delay: 0s; }
.snow-start-2  { animation-delay: 2s; }
.snow-start-3  { animation-delay: 4s; }
.snow-start-4  { animation-delay: 7s; }
.snow-start-5  { animation-delay: 10s; }
.snow-start-6  { animation-delay: 15s; }
.snow-start-7  { animation-delay: 22s; }
.snow-start-8  { animation-delay: 26s; }
.snow-start-9  { animation-delay: 27s; }
.snow-start-10 { animation-delay: 31s; }
.snow-start-11 { animation-delay: 33s; }
.snow-start-12 { animation-delay: 36s; }
.snow-start-13 { animation-delay: 38s; }
.snow-start-14 { animation-delay: 40s; }
.snow-start-15 { animation-delay: 42s; }
.snow-start-16 { animation-delay: 45s; }
.snow-start-17 { animation-delay: 47s; }
.snow-start-18 { animation-delay: 50s; }
.snow-start-19 { animation-delay: 55s; }
.snow-start-20 { animation-delay: 60s; }

.snow-speed-1 { animation-duration: 65s, 10s; };
.snow-speed-2 { animation-duration: 66s, 10s; };
.snow-speed-3 { animation-duration: 68s, 10s; };
.snow-speed-4 { animation-duration: 70s, 10s; };
.snow-speed-5 { animation-duration: 71s, 10s; };
.snow-speed-6 { animation-duration: 73s, 10s; };
.snow-speed-7 { animation-duration: 75s, 10s; };
.snow-speed-8 { animation-duration: 77s, 10s; };
.snow-speed-9 { animation-duration: 81s, 10s; };