:root {
  --line: 1px solid #ccc;
  --gap: 10px;
  --content-gap: 16px;
  --content-color: #555;
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Bitter', serif;
  font-size: 14px;
  color: var(--content-color);
  line-height: 24px;
  /* Font rendering sorted by quality: Linux, Windows, macOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main {
  width: 1060px;
  margin: 20px auto 0;
}
article {
  max-width: 760px;
  float: left;
  margin: 0 auto; /* centers when viewport is small */
}
aside {
  width: 260px;
  float: right;
  position: sticky;
  top: -260px;
  padding-bottom: 20px;
  margin: 0 auto; /* centers when viewport is small */
}
aside h3,
aside h3 a {
  text-decoration: none;
}
aside h4 {
  margin-top: 20px;
  color: #666;
  font-weight: 400;
}
aside h4.subtitle {
  margin-top: 0px;
}
aside hr {
  margin-top: var(--gap);
  border: 0;
  height: 1px;
  background-color: #ccc;
  margin: var(--gap) 0;
}
aside li a {
  text-decoration: none;
}
aside p {
  margin-top: var(--gap);
  color: #6a737d;
}
footer {
  clear: both;
  text-align: center;
  border-top: var(--line);
  /* margin-top: var(--gap); */
  padding: var(--gap);
}
div.content {
}
div.content::after {
  content: "";
  clear: both;
  display: table;
}

a {
  color: #4385a7;
  /* color: #4ea4c0; */
}
p {
  margin: 0 0 var(--content-gap) 0;
  padding: 0px;
}
article p code,
article pre,
article li code {
  font-family: Monaco, monospace, Courier, "Courier New";
  font-size: 12px;
}
article p code,
article li code {
  border: 1px solid #ddd;
  background-color: #eee;
  padding: 1px 3px;
}
article pre,
article p code {
  line-height: 21px;
  font-style: normal;
}
article pre {
  padding: 15px 20px;
  border: var(--line);
  background-color: #fafafa;
  overflow-x: auto;
}
article .gist,
article .gist .highlight {
  background-color: #fafafa;
}

article pre .hljs {
  background-color: initial;
  padding: initial;
}
article pre > code {
}
ul,
ul li,
ul ul li,
ol,
ol li,
ol ol li {
  margin: 0;
  padding: 0;
  text-indent: 0;
  list-style: none;
}
article li,
article ul li {
  margin-left: 16px;
  list-style: disc;
}
article ol li {
  list-style: decimal;
}
ul, ol {
  line-height: 20px;
}
article ul ul {
  margin-bottom: 0px;
  margin-left: 16px;
}
article h3 + ul,
article h4 + ul,
article h5 + ul {
  margin-top: var(--gap);
}
h1 {
  margin: 0 0 var(--gap) 0;
  padding: 0;
  font-size: 30px;
  line-height: 36px;
}
h2 {
  margin: 30px 0 0 0;
  padding: 0;
  font-size: 24px;
  line-height: 32px;
}
h3 {
  margin: 0;
  padding: 0;
  font-size: 18px;
}
h4 {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
h5 {
  margin: 0;
  padding: 0;
}
h6 {
  margin: 0;
  padding: 0;
}
/* SUBTITLE */
h1 + h2 {
  margin-top: -10px;
  padding-top: 0px;
  color: #999;
}
h1 + h2 a.anchor {
  display: none;
}
article blockquote {
  border-left: 4px solid #eee;
  padding-left: var(--gap);
  font-style: italic;
  color: #777;
  margin: var(--content-gap) 20px;
  font-size: 18px;
  line-height: 31px;
}
article blockquote code {
  font-size: 16px;
}
article .deprecated {
  color: #7a3333;
  border: 1px solid #7a3333;
  padding: 8px 16px;
  margin: var(--content-gap) 0;
  background-color: #ffd5d5;
}
article .canonical {
  color: #33337a;
  border: 1px solid #33337a;
  padding: 8px 16px;
  margin: var(--content-gap) 0;
  background-color: #d5d5ff;
}
article img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
article figure {
  margin: 0px;
  padding: 0px;
}
article figcaption {
  text-align: center;
  color: #666;
  font-style: italic;
}
body.tag-narrative article p + p {
    text-indent: 32px;
    margin-top: -16px;
}
article hr {
  border: none;
  text-align: center;
  margin: 0 0 var(--content-gap) 0;
  color: var(--content-color);
}
article hr:after {
  font-size: 18px;
  content: "∗ ∗ ∗";
  display: inline-block;
}
article h2,
article ul,
article ol {
  margin-bottom: var(--gap);
}
article ul,
article ol {
  line-height: 24px;
}

article > table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto var(--content-gap) auto;
}
article > table td,
article > table th {
    border: 1px solid #ccc;
    padding: 5px 10px;
}
article > table tr {
  background-color: #ffffff;
}
article > table tr:nth-child(even) {
  background-color: #f6f6f6;
}

.author-biography {
  color: var(--content-color);
  border-top: var(--line);
  padding: 20px 20px var(--gap) 20px;
  margin-top: var(--gap);
}
.author-biography img {
  float: left;
  width: 60px;
  height: 60px;
  margin-right: 20px;
  border-radius: 60px;
}
.author-biography p {
  font-size: 12px;
  line-height: 20px;
}
.author-biography::after {
  content: "";
  clear: both;
  display: table;
}
.post-meta {
  color: #999;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: var(--gap);
}
.post-meta::after {
  content: "";
  clear: both;
  display: table;
}
.post-meta .read-time {
  float: left;
}
.post-meta .published {
  float: right;
}

.listing .unimportant a {
  color: #999;
}
.listing dt {
  display: inline-block;
}
.listing dd {
  display: inline-block;
  margin-left: 0px;
  font-style: italic;
  color: #999;
}
.listing dd time::before{
  content: " — ";
}
#comments {
  border-top: var(--line);
  padding-top: var(--gap);
  margin-top: var(--gap);
}
#comments .subtitle {
  font-weight: 700;
  margin-bottom: var(--gap);
  display: block;
  color: inherit;
}
#comments .comments {
  display: grid;
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  margin-bottom: var(--gap);
}
#comments .comment {
  border-width: 1px;
  padding: var(--gap);
  background-color: #fafafa;
  border-color: #eee;
  border-style: solid;
  text-decoration: none;
}
#comments .comment strong {
}
#comments .comment p {
  margin: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
}
#comments .hn {
  color: #ff6600;
}
#comments .hn {
  border-color: #ff6600;
  background-color: #f6f6ef;
}
#comments .reddit {
  color: #369;
}
#comments .reddit {
  border-color: #369;
  background-color: #cee3f8;
}
#comments::after {
  content: "";
  clear: both;
  display: table;
}

#tags {
  border-top: var(--line);
  padding: var(--gap) 0 0 0;
  text-transform: uppercase;
  font-size: 12px;
  color: #999;
}
#tags a {
  margin-left: 6px;
  display: inline-block;
  text-decoration: none;
}

.series-links {
  padding: var(--gap) 0;
}
.series-links-top {
  border-top: var(--line);
  border-bottom: var(--line);
  margin-bottom: var(--gap);
}
.series-links-bottom {
  border-top: var(--line);
  margin: var(--gap) 0 0 0;
}
.series-links a {
  text-decoration: none;
}
.series-links a.previous {
  float: left;
}
.series-links a.next {
  float: right;
}
.series-links::after {
  content: "";
  clear: both;
  display: table;
}

::selection {
  background-color: #4385a7;
  color: #fff;
}

article iframe.video-embed {
  max-width: 100%;
}

article h1 a.anchor,
article h2 a.anchor,
article h3 a.anchor,
article h4 a.anchor,
article h5 a.anchor,
article h6 a.anchor {
  visibility: hidden;
  padding-left: 5px;
  text-decoration: none;
  color: #ccc;
  user-select: none;
}
article h1:hover a.anchor,
article h2:hover a.anchor,
article h3:hover a.anchor,
article h4:hover a.anchor,
article h5:hover a.anchor,
article h6:hover a.anchor {
  visibility: visible;
}
#book-banner {
  display: block;
  border: 1px dotted #ccc;
  padding: var(--gap);
  margin: 0 0 var(--gap) 0;
  background-color: #fafafa;
  text-align: center;
  text-decoration: none;
}



/* ############### MEDIA QUERIES ############### */

@media (max-width: 1116px) {
  main, article, aside {
    width: initial;
  }
  article, aside {
    padding-right: 20px;
    padding-left: 20px;
    float: none;
  }
  #avatar {
    width: 64px;
    height: 64px;
    float: left;
    margin-right: 16px;
  }
  aside h4::after {
    content: "";
    clear: both;
    display: table;
  }
  aside {
    max-width: 760px; /* behave similar to main <article> */
    border-top: var(--line);
    padding-top: 20px;
    margin-top: var(--gap);
  }
  aside h3,
  aside h4 {
    line-height: 32px;
  }
  .author-biography {
    /* too redundant with #avatar */
    display: none;
  }
}

.print-only {
  display: none;
}

@media print {
  .series-links,
  #comments,
  #tags,
  #disqus_thread,
  aside {
    display: none;
  }
  article {
    width: auto;
    padding: 0px;
  }
  article > .canonical {
    display: none;
  }
  main {
    width: auto;
    margin: 0;
  }
  .author-biography {
    page-break-inside: avoid;
    display: block;
    padding-right: 0px;
    padding-left: 0px;
  }
  article pre {
    white-space: pre-wrap;
  }
  /* footer username/url appears while printing because it's now hidden in aside */
  .print-only {
    display: initial;
  }
  body,
  a {
    color: black;
  }
}

/* ############### DARK MODE ############### */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #ddd;
  }
  aside p,
  aside h4 {
    color: #ddd;
  }
  a {
    color: #4ea4c0;
  }
  hr {
    color: #ddd;
  }
  .author-biography {
    color: #ccc;
    border-top-color: #ccc;
  }
  article pre {
    background-color: #111;
    border-color: #333;
  }
  article p code,
  article li code {
    color: #ddd;
    background-color: #333;
    border-color: #666;
  }
  blockquote {
    color: #ddd;
  }
  article > table td,
  article > table th {
      border-color: #333;
  }
  article > table tr {
    background-color: #000;
  }
  article > table tr:nth-child(even) {
    background-color: #111;
  }
  #book-banner {
    border: 1px dotted #333;
    background-color: #111;
  }
}
/* COPY PASTA */
body.dark {
  background-color: #000;
  color: #ddd;
}
body.dark aside p,
body.dark aside h4 {
  color: #ddd;
}
body.dark a {
  color: #4ea4c0;
}
body.dark hr {
  color: #ddd;
}
body.dark .author-biography {
  color: #ccc;
  border-top-color: #ccc;
}
body.dark article pre {
  background-color: #111;
  border-color: #333;
}
body.dark article p code,
body.dark article li code {
  color: #ddd;
  background-color: #333;
  border-color: #666;
}
body.dark blockquote {
  color: #ddd;
}
body.dark article > table td,
body.dark article > table th {
    border-color: #333;
}
body.dark article > table tr {
  background-color: #000;
}
body.dark article > table tr:nth-child(even) {
  background-color: #111;
}
body.dark #book-banner {
  border: 1px dotted #333;
  background-color: #111;
}







/* ############### HLJS THEMES ############### */

/**
 * GitHub Gist Theme
 * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
 */

.hljs {
  display: block;
  background: white;
  padding: 0.5em;
  color: #333333;
  overflow-x: auto;
}

.hljs-comment,
.hljs-meta {
  color: #969896;
}

.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
  color: #df5000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
  color: #a71d5d;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
  color: #0086b3;
}

.hljs-section,
.hljs-name {
  color: #63a35c;
}

.hljs-tag {
  color: #333333;
}

.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #795da3;
}

.hljs-addition {
  color: #55a532;
  background-color: #eaffea;
}

.hljs-deletion {
  color: #bd2c00;
  background-color: #ffecec;
}

.hljs-link {
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  /*
  vim-hybrid theme by w0ng (https://github.com/w0ng/vim-hybrid)
  */

  .hljs {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    background: #1d1f21;
  }

  .hljs::selection,
  .hljs span::selection {
    background: #373b41;
  }

  .hljs::-moz-selection,
  .hljs span::-moz-selection {
    background: #373b41;
  }

  .hljs {
    color: #c5c8c6;
  }

  .hljs-title,
  .hljs-name {
    color: #f0c674;
  }

  .hljs-comment,
  .hljs-meta,
  .hljs-meta .hljs-keyword {
    color: #707880;
  }

  .hljs-number,
  .hljs-symbol,
  .hljs-literal,
  .hljs-deletion,
  .hljs-link {
   color: #cc6666
  }

  .hljs-string,
  .hljs-doctag,
  .hljs-addition,
  .hljs-regexp,
  .hljs-selector-attr,
  .hljs-selector-pseudo {
    color: #b5bd68;
  }

  .hljs-attribute,
  .hljs-code,
  .hljs-selector-id {
   color: #b294bb;
  }

  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-bullet,
  .hljs-tag {
   color: #81a2be;
  }

  .hljs-subst,
  .hljs-variable,
  .hljs-template-tag,
  .hljs-template-variable {
    color: #8abeb7;
  }

  .hljs-type,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-quote,
  .hljs-section,
  .hljs-selector-class {
    color: #de935f;
  }

  .hljs-emphasis {
    font-style: italic;
  }

  .hljs-strong {
    font-weight: bold;
  }
}

/* ############### FONT ############### */

/*
Bitter ht Designed by Sol Matas
Licence: Free (OFL)
Release date: 2010
https://www.huertatipografica.com/en/fonts/bitter-ht
https://fonts.google.com/specimen/Bitter
*/
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 400;
  src:
    local('Bitter Regular'),
    local('Bitter-Regular'),
    url('/fonts/Bitter_400.woff2') format('woff2'),
    url('/fonts/Bitter_400.woff') format('woff'),
    url('/fonts/Bitter_400.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Bitter_400.svg#Bitter') format('svg'),
    url('/fonts/Bitter_400.ttf') format('truetype');
}
@font-face {
  font-family: 'Bitter';
  font-style: italic;
  font-weight: 400;
  src:
    local('Bitter Italic'),
    local('Bitter-Italic'),
    url('/fonts/Bitter_400i.woff2') format('woff2'),
    url('/fonts/Bitter_400i.woff') format('woff'),
    url('/fonts/Bitter_400i.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Bitter_400i.svg#Bitter') format('svg'),
    url('/fonts/Bitter_400i.ttf') format('truetype');
}
@font-face {
  font-family: 'Bitter';
  font-style: normal;
  font-weight: 700;
  src:
    local('Bitter Bold'),
    local('Bitter-Bold'),
    url('/fonts/Bitter_700.woff2') format('woff2'),
    url('/fonts/Bitter_700.woff') format('woff'),
    url('/fonts/Bitter_700.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Bitter_700.svg#Bitter') format('svg'),
    url('/fonts/Bitter_700.ttf') format('truetype');
}