@import url("https://fonts.googleapis.com/css?family=Literata:400,400i,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Literata:400,400i,700&display=swap");
* {
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  color: inherit;
  text-decoration: inherit;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  transform: translateY(-$offset);
  opacity: 0;

  @at-root body.loaded  {
    opacity: 1;
    transform: translateY(0);
  }

}
*/
/* Black theme */
/*
$color-page-background: #000;
*/
/*
  transform: translateY(-$offset);
  opacity: 0;

  @at-root body.loaded  {
    opacity: 1;
    transform: translateY(0);
  }

}
*/
/* Black theme */
/*
$color-page-background: #000;
*/
#page-header {
  user-select: none;
  z-index: 1000;
  color: blue;
  width: 100%;
  height: 64px;
  background-color: #000;
  box-shadow: 0 -100px 8px 100px rgba(0, 0, 0, 0.7), 0 -100px 20px 100px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#page-header .container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
}
#page-header .container .toggle-nav {
  display: none;
}
#page-header .container .home-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48px;
  padding-left: 8px;
  padding-right: 8px;
  transition: background-color 0.15s ease;
}
#page-header .container .home-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
#page-header .container .home-link .logo {
  height: 32px;
  position: relative;
}
#page-header .container .home-link .title {
  background: url("/img/header-logo-text.png") no-repeat;
  background-size: 112px 48px;
  user-select: none;
  color: transparent;
  width: 112px;
  height: 48px;
  margin-left: 8px;
}
@media (false: dark) {
  body.story #page-header .container .home-link .title {
    background-image: url("/img/header-logo-text-dark.png");
  }
}
#page-header .container nav {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-header .container nav ul {
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: center;
  margin-left: 32px;
}
#page-header .container nav ul li {
  list-style-type: none;
  display: block;
}
#page-header .container nav ul li a {
  border-width: 0px;
  border-style: solid;
  border-color: transparent;
  transition: border-color 1s ease !important, border-width 1s ease !important;
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  transition: background-color 0.15s ease;
}
#page-header .container nav ul li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
#page-header .container nav ul li a span {
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.54);
}
body.story #page-header .container nav ul li a span {
  color: rgba(0, 0, 0, 0.54);
}
@media (prefers-color-scheme: dark) {
  body.story #page-header .container nav ul li a span {
    color: rgba(255, 255, 255, 0.54);
  }
}
#page-header .container nav ul.right {
  float: right;
}

body:not(.story) #page-header.expanded, body.story #page-header {
  background-color: transparent;
  height: 128px;
  box-shadow: none;
}

@media (min-width: 751px) {
  body.story #page-header {
    position: static;
    margin-bottom: -128px;
  }
}

body.loaded #page-header {
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

body.hero #page-header {
  position: fixed !important;
  width: 100%;
  top: 0;
  left: 0;
}
body.hero #page-header.expanded {
  background-color: transparent;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

@media (max-width: 900px) {
  #page-header .container .home-link .title {
    display: none;
  }
}
body.mini-header #page-header {
  background-color: transparent;
  height: 32px;
  opacity: 0.5;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
body.mini-header #page-header .home-link {
  height: 32px;
}
body.mini-header #page-header .home-link .logo {
  height: 24px;
}
body.mini-header #page-header .home-link .title {
  display: none;
}
body.mini-header #page-header nav ul li a {
  height: 32px;
  line-height: 32px;
}
body.mini-header #page-header nav ul li a span {
  font-size: 12px;
}
body.mini-header #page-header:hover {
  background-color: #242424;
  opacity: 1;
}

@media (max-width: 750px) {
  #page-header {
    position: static !important;
    background-color: #242424 !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }
  body.story #page-header {
    background-color: #fff !important;
  }
  #page-header .container {
    padding: 0;
    flex-direction: column !important;
    align-items: flex-start;
    height: 64px;
  }
  body.story #page-header .container {
    box-shadow: 0 2px 0 0 #ddd;
  }
  #page-header .container .toggle-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    transition: background-color 0.15s ease;
  }
  #page-header .container .toggle-nav img {
    display: block;
    width: 24px;
    height: 24px;
    transition: transform 0.15s ease;
  }
  #page-header .container .home-link {
    height: 64px;
    justify-content: center;
    width: 100%;
  }
  #page-header .container .home-link .title {
    display: block;
  }
  #page-header .container nav {
    background-color: #242424;
    flex-direction: column !important;
    align-items: flex-start;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  body.story #page-header .container nav {
    background-color: #fff;
  }
  #page-header .container nav ul {
    border-top: 2px solid #444;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  body.story #page-header .container nav ul {
    border-color: #ddd;
  }
  #page-header .container nav ul li {
    width: 100%;
  }
  #page-header .container nav ul li a {
    border-width: 0;
    height: 48px;
    line-height: 48px;
    width: 100%;
  }
  body.story #page-header .container nav ul li a {
    color: black;
  }
}
body.no-js .toggle-nav img,
#page-header.nav-visible .toggle-nav img {
  transform: rotate(180deg);
}
body.no-js nav,
#page-header.nav-visible nav {
  max-height: 392px !important;
}

body.no-js #page-header {
  background: #000 !important;
  box-shadow: 0 -100px 8px 100px rgba(0, 0, 0, 0.7), 0 -100px 20px 100px rgba(0, 0, 0, 0.5);
  height: auto !important;
  min-height: 80px !important;
}
body.no-js #page-header .toggle-nav {
  display: none;
}
body.no-js #page-header nav {
  position: static;
}
body.no-js #page-header .container {
  height: auto;
}

#page-header nav ul li a:hover {
  border-width: 0 0 2px 0;
}
@media (max-width: 750px) {
  #page-header nav ul li a:hover {
    border-width: 0;
  }
}
#page-header nav ul li a:hover span {
  color: white;
}

body[data-title=Apps] #page-header nav ul li.link-apps a,
body[data-title=Art] #page-header nav ul li.link-art a,
body[data-title=Articles] #page-header nav ul li.link-articles a,
body[data-title=Infographics] #page-header nav ul li.link-infographics a,
body[data-title=Posts] #page-header nav ul li.link-posts a,
body[data-title=Projects] #page-header nav ul li.link-projects a,
body[data-title="About Me"] #page-header nav ul li.link-about a,
body[data-section=app] #page-header nav ul li.link-apps a,
body[data-section=art] #page-header nav ul li.link-art a,
body[data-section=article] #page-header nav ul li.link-articles a,
body[data-section=infographic] #page-header nav ul li.link-infographics a,
body[data-section=post] #page-header nav ul li.link-posts a,
body[data-section=project] #page-header nav ul li.link-projects a {
  border-width: 0 0 4px 0;
}
@media (max-width: 750px) {
  body[data-title=Apps] #page-header nav ul li.link-apps a,
body[data-title=Art] #page-header nav ul li.link-art a,
body[data-title=Articles] #page-header nav ul li.link-articles a,
body[data-title=Infographics] #page-header nav ul li.link-infographics a,
body[data-title=Posts] #page-header nav ul li.link-posts a,
body[data-title=Projects] #page-header nav ul li.link-projects a,
body[data-title="About Me"] #page-header nav ul li.link-about a,
body[data-section=app] #page-header nav ul li.link-apps a,
body[data-section=art] #page-header nav ul li.link-art a,
body[data-section=article] #page-header nav ul li.link-articles a,
body[data-section=infographic] #page-header nav ul li.link-infographics a,
body[data-section=post] #page-header nav ul li.link-posts a,
body[data-section=project] #page-header nav ul li.link-projects a {
    border-width: 0 0 0 8px;
  }
}
body[data-title=Apps] #page-header nav ul li.link-apps a span,
body[data-title=Art] #page-header nav ul li.link-art a span,
body[data-title=Articles] #page-header nav ul li.link-articles a span,
body[data-title=Infographics] #page-header nav ul li.link-infographics a span,
body[data-title=Posts] #page-header nav ul li.link-posts a span,
body[data-title=Projects] #page-header nav ul li.link-projects a span,
body[data-title="About Me"] #page-header nav ul li.link-about a span,
body[data-section=app] #page-header nav ul li.link-apps a span,
body[data-section=art] #page-header nav ul li.link-art a span,
body[data-section=article] #page-header nav ul li.link-articles a span,
body[data-section=infographic] #page-header nav ul li.link-infographics a span,
body[data-section=post] #page-header nav ul li.link-posts a span,
body[data-section=project] #page-header nav ul li.link-projects a span {
  color: white;
  font-weight: bold;
}

body.story[data-title=Apps] #page-header nav ul li.link-apps a span,
body.story[data-title=Art] #page-header nav ul li.link-art a span,
body.story[data-title=Articles] #page-header nav ul li.link-articles a span,
body.story[data-title=Infographics] #page-header nav ul li.link-infographics a span,
body.story[data-title=Posts] #page-header nav ul li.link-posts a span,
body.story[data-title=Projects] #page-header nav ul li.link-projects a span,
body.story[data-title="About Me"] #page-header nav ul li.link-about a span,
body.story[data-section=app] #page-header nav ul li.link-apps a span,
body.story[data-section=art] #page-header nav ul li.link-art a span,
body.story[data-section=article] #page-header nav ul li.link-articles a span,
body.story[data-section=infographic] #page-header nav ul li.link-infographics a span,
body.story[data-section=post] #page-header nav ul li.link-posts a span,
body.story[data-section=project] #page-header nav ul li.link-projects a span {
  color: rgba(0, 0, 0, 0.87);
}
@media (prefers-color-scheme: dark) {
  body.story[data-title=Apps] #page-header nav ul li.link-apps a span,
body.story[data-title=Art] #page-header nav ul li.link-art a span,
body.story[data-title=Articles] #page-header nav ul li.link-articles a span,
body.story[data-title=Infographics] #page-header nav ul li.link-infographics a span,
body.story[data-title=Posts] #page-header nav ul li.link-posts a span,
body.story[data-title=Projects] #page-header nav ul li.link-projects a span,
body.story[data-title="About Me"] #page-header nav ul li.link-about a span,
body.story[data-section=app] #page-header nav ul li.link-apps a span,
body.story[data-section=art] #page-header nav ul li.link-art a span,
body.story[data-section=article] #page-header nav ul li.link-articles a span,
body.story[data-section=infographic] #page-header nav ul li.link-infographics a span,
body.story[data-section=post] #page-header nav ul li.link-posts a span,
body.story[data-section=project] #page-header nav ul li.link-projects a span {
    color: #fff;
  }
}

#page-header nav ul li.link-apps a {
  border-color: #8BC34A;
}

#page-header nav ul li.link-art a {
  border-color: #FFF;
}

#page-header nav ul li.link-articles a {
  border-color: #C33;
}

#page-header nav ul li.link-infographics a {
  border-color: #009688;
}

#page-header nav ul li.link-posts a {
  border-color: #dd6644;
}

#page-header nav ul li.link-projects a {
  border-color: #607D8B;
}

#page-header nav ul li.link-about a {
  border-color: white;
}

@media print {
  #page-header {
    display: none;
  }
}
/* Black theme */
/*
$color-page-background: #000;
*/
/* Black theme */
/*
$color-page-background: #000;
*/
/* TODO: SCSS has ways around this but I'm too lazy to bother. */
@-webkit-keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
@-moz-keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
@-o-keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
@keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
main.article article {
  font-size: 16px;
  /*
  .actions.app-info {

    a {
      height: $grid * 8;
      line-height: $grid * 8;
    }

    a.badge-button {
      padding: 0;
      height: $grid * 8;
      margin-top: -$grid;

      .badge {
        height: 72px;
      }

      &:hover {
        background-color: transparent;
      }

    }

  }
   */
}
main.article article .headline {
  padding: 8px 32px;
  padding-top: 0;
  position: relative;
  display: flex;
}
main.article article .headline * {
  display: block;
}
body.serif main.article article .headline {
  font-family: "Literata", serif;
}
main.article article .headline .section {
  margin-right: 16px;
}
main.article article .headline .section a {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 16px;
}
main.article article .headline .title {
  color: white;
  font-size: 32px;
  font-weight: bold;
  margin-right: 32px;
}
@media (prefers-color-scheme: dark) {
  main.article article .headline .title {
    color: rgba(255, 255, 255, 0.85);
  }
}
body.story main.article article .headline .title {
  color: rgba(0, 0, 0, 0.87);
}
@media (prefers-color-scheme: dark) {
  body.story main.article article .headline .title {
    color: rgba(255, 255, 255, 0.85);
  }
}
@media print {
  main.article article .headline .title {
    color: #000;
  }
}
main.article article .headline .publish-time {
  color: white;
  font-style: italic;
  text-align: right;
  opacity: 0;
  transition: opacity 0.2s ease;
  flex: 1;
  align-self: flex-end;
  padding-bottom: 4px;
}
main.article article .headline .publish-time time, main.article article .headline .publish-time .reading-time {
  display: inline-block;
  white-space: nowrap;
}
main.article article .headline .publish-time time.raw-time {
  display: none;
}
@media print {
  main.article article .headline .publish-time .reading-time {
    display: none;
  }
  main.article article .headline .publish-time time.relative {
    display: none;
  }
  main.article article .headline .publish-time time.raw-time {
    display: inline-block;
  }
}
main.article article .headline .publish-time .reading-time:after {
  content: "/";
  display: inline-block;
  padding: 0 4px;
}
body.story main.article article .headline .publish-time {
  color: rgba(0, 0, 0, 0.54);
}
@media (prefers-color-scheme: dark) {
  main.article article .headline .publish-time {
    color: rgba(255, 255, 255, 0.75) !important;
  }
}
@media (max-width: 750px) {
  main.article article .headline {
    flex-direction: column;
    padding: 8px 16px;
  }
  main.article article .headline .section, main.article article .headline .title, main.article article .headline .publish-time {
    display: block;
    position: static;
    margin-top: 1ex;
    align-self: flex-start;
  }
  main.article article .headline .title {
    font-size: 24px;
  }
}
@media (max-width: 500px) {
  main.article article .headline {
    padding-left: 16px;
    padding-right: 16px;
  }
}
main.article article.art .headline {
  margin-top: 1em;
  margin-bottom: 1em;
}
main.article article .body {
  background-color: #fff;
  box-shadow: 0 0 64px black;
}
body.story main.article article .body {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
  main.article article .body {
    background: #222;
    color: rgba(255, 255, 255, 0.85);
  }
}
@media print {
  main.article article .body {
    box-shadow: none !important;
  }
}
main.article article .actions,
main.article article .content,
main.article article .attribution,
main.article article .patreon-link,
main.article article .license {
  padding: 32px 48px;
  line-height: 1.8em;
}
body.serif main.article article .actions,
body.serif main.article article .content,
body.serif main.article article .attribution,
body.serif main.article article .patreon-link,
body.serif main.article article .license {
  font-family: "Literata", serif;
  line-height: 2em;
  hanging-punctuation: first;
}
main.article article .actions p + p,
main.article article .content p + p,
main.article article .attribution p + p,
main.article article .patreon-link p + p,
main.article article .license p + p {
  margin-top: 1.5em;
}
main.article article .actions a[href],
main.article article .content a[href],
main.article article .attribution a[href],
main.article article .patreon-link a[href],
main.article article .license a[href] {
  color: #dd6644;
}
main.article article .actions em,
main.article article .content em,
main.article article .attribution em,
main.article article .patreon-link em,
main.article article .license em {
  font-style: italic;
}
main.article article .actions strong,
main.article article .content strong,
main.article article .attribution strong,
main.article article .patreon-link strong,
main.article article .license strong {
  font-weight: bold;
}
main.article article .actions hr:after,
main.article article .content hr:after,
main.article article .attribution hr:after,
main.article article .patreon-link hr:after,
main.article article .license hr:after {
  content: "***";
  display: block;
  text-align: center;
  margin: 32px auto;
  padding-left: 2em;
  letter-spacing: 2em;
}
main.article article .actions blockquote,
main.article article .content blockquote,
main.article article .attribution blockquote,
main.article article .patreon-link blockquote,
main.article article .license blockquote {
  background-color: rgba(0, 0, 0, 0.02);
  border-left: 4px solid rgba(0, 0, 0, 0.15);
  margin: 24px 0;
  padding: 16px 24px;
}
main.article article .actions > h1, main.article article .actions > h2, main.article article .actions > h3, main.article article .actions > h4, main.article article .actions > h5, main.article article .actions > h6,
main.article article .content > h1,
main.article article .content > h2,
main.article article .content > h3,
main.article article .content > h4,
main.article article .content > h5,
main.article article .content > h6,
main.article article .attribution > h1,
main.article article .attribution > h2,
main.article article .attribution > h3,
main.article article .attribution > h4,
main.article article .attribution > h5,
main.article article .attribution > h6,
main.article article .patreon-link > h1,
main.article article .patreon-link > h2,
main.article article .patreon-link > h3,
main.article article .patreon-link > h4,
main.article article .patreon-link > h5,
main.article article .patreon-link > h6,
main.article article .license > h1,
main.article article .license > h2,
main.article article .license > h3,
main.article article .license > h4,
main.article article .license > h5,
main.article article .license > h6 {
  margin-left: -48px;
  margin-right: -48px;
  padding: 12px 48px;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions h1, main.article article .actions h2, main.article article .actions h3, main.article article .actions h4, main.article article .actions h5, main.article article .actions h6,
main.article article .content h1,
main.article article .content h2,
main.article article .content h3,
main.article article .content h4,
main.article article .content h5,
main.article article .content h6,
main.article article .attribution h1,
main.article article .attribution h2,
main.article article .attribution h3,
main.article article .attribution h4,
main.article article .attribution h5,
main.article article .attribution h6,
main.article article .patreon-link h1,
main.article article .patreon-link h2,
main.article article .patreon-link h3,
main.article article .patreon-link h4,
main.article article .patreon-link h5,
main.article article .patreon-link h6,
main.article article .license h1,
main.article article .license h2,
main.article article .license h3,
main.article article .license h4,
main.article article .license h5,
main.article article .license h6 {
    color: white;
  }
}
main.article article .actions * + h1, main.article article .actions * + h2, main.article article .actions * + h3, main.article article .actions * + h4, main.article article .actions * + h5, main.article article .actions * + h6,
main.article article .content * + h1,
main.article article .content * + h2,
main.article article .content * + h3,
main.article article .content * + h4,
main.article article .content * + h5,
main.article article .content * + h6,
main.article article .attribution * + h1,
main.article article .attribution * + h2,
main.article article .attribution * + h3,
main.article article .attribution * + h4,
main.article article .attribution * + h5,
main.article article .attribution * + h6,
main.article article .patreon-link * + h1,
main.article article .patreon-link * + h2,
main.article article .patreon-link * + h3,
main.article article .patreon-link * + h4,
main.article article .patreon-link * + h5,
main.article article .patreon-link * + h6,
main.article article .license * + h1,
main.article article .license * + h2,
main.article article .license * + h3,
main.article article .license * + h4,
main.article article .license * + h5,
main.article article .license * + h6 {
  margin-top: 2rem;
}
main.article article .actions > h1,
main.article article .content > h1,
main.article article .attribution > h1,
main.article article .patreon-link > h1,
main.article article .license > h1 {
  font-size: 24px;
  font-weight: bold;
}
main.article article .actions > h2,
main.article article .content > h2,
main.article article .attribution > h2,
main.article article .patreon-link > h2,
main.article article .license > h2 {
  font-size: 22px;
}
main.article article .actions > h3,
main.article article .content > h3,
main.article article .attribution > h3,
main.article article .patreon-link > h3,
main.article article .license > h3 {
  font-size: 16px;
  font-weight: bold;
}
main.article article .actions > h4,
main.article article .content > h4,
main.article article .attribution > h4,
main.article article .patreon-link > h4,
main.article article .license > h4 {
  font-size: 12.8px;
  font-weight: bold;
}
main.article article .actions :target,
main.article article .content :target,
main.article article .attribution :target,
main.article article .patreon-link :target,
main.article article .license :target {
  background-color: #fae7d1;
  -webkit-animation: target-fade 3s;
  -moz-animation: target-fade 3s;
  -o-animation: target-fade 3s;
  animation: target-fade 3s;
}
main.article article .actions .footnote,
main.article article .content .footnote,
main.article article .attribution .footnote,
main.article article .patreon-link .footnote,
main.article article .license .footnote {
  position: relative;
}
main.article article .actions .footnote a,
main.article article .content .footnote a,
main.article article .attribution .footnote a,
main.article article .patreon-link .footnote a,
main.article article .license .footnote a {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 2px 0 0 #ffc, inset 0 -0.2em 0 0 #ffc;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
main.article article .actions .footnote a[href],
main.article article .content .footnote a[href],
main.article article .attribution .footnote a[href],
main.article article .patreon-link .footnote a[href],
main.article article .license .footnote a[href] {
  box-shadow: 0 2px 0 0 #def, inset 0 -0.2em 0 0 #def;
}
main.article article .actions .footnote .hover,
main.article article .content .footnote .hover,
main.article article .attribution .footnote .hover,
main.article article .patreon-link .footnote .hover,
main.article article .license .footnote .hover {
  position: absolute;
  top: 1em;
  left: -8px;
  margin-top: 4px;
  background-color: #3b3b3b;
  border-radius: 4px;
  display: table;
  padding: 4px 8px;
  z-index: 1000;
  pointer-events: none;
  color: white;
  font-style: italic;
  font-size: 80%;
  line-height: 135%;
  opacity: 0;
  transition: opacity 0.15s ease;
}
main.article article .actions .footnote:hover a,
main.article article .content .footnote:hover a,
main.article article .attribution .footnote:hover a,
main.article article .patreon-link .footnote:hover a,
main.article article .license .footnote:hover a {
  background-color: #ffc;
}
main.article article .actions .footnote:hover a[href],
main.article article .content .footnote:hover a[href],
main.article article .attribution .footnote:hover a[href],
main.article article .patreon-link .footnote:hover a[href],
main.article article .license .footnote:hover a[href] {
  background-color: #def;
}
main.article article .actions .footnote:hover .hover,
main.article article .content .footnote:hover .hover,
main.article article .attribution .footnote:hover .hover,
main.article article .patreon-link .footnote:hover .hover,
main.article article .license .footnote:hover .hover {
  opacity: 1;
}
main.article article .actions img,
main.article article .content img,
main.article article .attribution img,
main.article article .patreon-link img,
main.article article .license img {
  max-width: 100%;
}
main.article article .actions code,
main.article article .content code,
main.article article .attribution code,
main.article article .patreon-link code,
main.article article .license code {
  /* I love Hack. */
  font-family: "Hack", "Roboto Mono", monospace;
  font-size: 0.8em;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.075);
  padding: 1px 3px;
  margin: 0 2px;
  overflow-wrap: break-word;
}
main.article article .actions code[data-lang],
main.article article .content code[data-lang],
main.article article .attribution code[data-lang],
main.article article .patreon-link code[data-lang],
main.article article .license code[data-lang] {
  color: rgba(0, 0, 0, 0.75);
}
main.article article .actions code[data-lang] .kd,
main.article article .content code[data-lang] .kd,
main.article article .attribution code[data-lang] .kd,
main.article article .patreon-link code[data-lang] .kd,
main.article article .license code[data-lang] .kd {
  color: #BF360C;
}
main.article article .actions code[data-lang] .k,
main.article article .content code[data-lang] .k,
main.article article .attribution code[data-lang] .k,
main.article article .patreon-link code[data-lang] .k,
main.article article .license code[data-lang] .k {
  color: #8A048C;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions code[data-lang] .k,
main.article article .content code[data-lang] .k,
main.article article .attribution code[data-lang] .k,
main.article article .patreon-link code[data-lang] .k,
main.article article .license code[data-lang] .k {
    color: #fb9efc;
  }
}
main.article article .actions code[data-lang] .kt,
main.article article .content code[data-lang] .kt,
main.article article .attribution code[data-lang] .kt,
main.article article .patreon-link code[data-lang] .kt,
main.article article .license code[data-lang] .kt {
  color: #1177aa;
  font-weight: bold;
}
main.article article .actions code[data-lang] .n,
main.article article .actions code[data-lang] .nc,
main.article article .content code[data-lang] .n,
main.article article .content code[data-lang] .nc,
main.article article .attribution code[data-lang] .n,
main.article article .attribution code[data-lang] .nc,
main.article article .patreon-link code[data-lang] .n,
main.article article .patreon-link code[data-lang] .nc,
main.article article .license code[data-lang] .n,
main.article article .license code[data-lang] .nc {
  color: black;
}
main.article article .actions code[data-lang] .nd,
main.article article .content code[data-lang] .nd,
main.article article .attribution code[data-lang] .nd,
main.article article .patreon-link code[data-lang] .nd,
main.article article .license code[data-lang] .nd {
  color: rgba(0, 0, 0, 0.5);
}
main.article article .actions code[data-lang] .na, main.article article .actions code[data-lang] .nc,
main.article article .content code[data-lang] .na,
main.article article .content code[data-lang] .nc,
main.article article .attribution code[data-lang] .na,
main.article article .attribution code[data-lang] .nc,
main.article article .patreon-link code[data-lang] .na,
main.article article .patreon-link code[data-lang] .nc,
main.article article .license code[data-lang] .na,
main.article article .license code[data-lang] .nc {
  font-weight: bold;
}
main.article article .actions code[data-lang] .nt,
main.article article .content code[data-lang] .nt,
main.article article .attribution code[data-lang] .nt,
main.article article .patreon-link code[data-lang] .nt,
main.article article .license code[data-lang] .nt {
  color: #CC1111;
}
main.article article .actions code[data-lang] .s, main.article article .actions code[data-lang] .s1,
main.article article .content code[data-lang] .s,
main.article article .content code[data-lang] .s1,
main.article article .attribution code[data-lang] .s,
main.article article .attribution code[data-lang] .s1,
main.article article .patreon-link code[data-lang] .s,
main.article article .patreon-link code[data-lang] .s1,
main.article article .license code[data-lang] .s,
main.article article .license code[data-lang] .s1 {
  color: #1b8e40;
}
main.article article .actions code[data-lang] .c, main.article article .actions code[data-lang] .cm, main.article article .actions code[data-lang] .cp, main.article article .actions code[data-lang] .c1, main.article article .actions code[data-lang] .cs,
main.article article .content code[data-lang] .c,
main.article article .content code[data-lang] .cm,
main.article article .content code[data-lang] .cp,
main.article article .content code[data-lang] .c1,
main.article article .content code[data-lang] .cs,
main.article article .attribution code[data-lang] .c,
main.article article .attribution code[data-lang] .cm,
main.article article .attribution code[data-lang] .cp,
main.article article .attribution code[data-lang] .c1,
main.article article .attribution code[data-lang] .cs,
main.article article .patreon-link code[data-lang] .c,
main.article article .patreon-link code[data-lang] .cm,
main.article article .patreon-link code[data-lang] .cp,
main.article article .patreon-link code[data-lang] .c1,
main.article article .patreon-link code[data-lang] .cs,
main.article article .license code[data-lang] .c,
main.article article .license code[data-lang] .cm,
main.article article .license code[data-lang] .cp,
main.article article .license code[data-lang] .c1,
main.article article .license code[data-lang] .cs {
  color: #888888;
  font-style: italic;
}
main.article article .actions code[data-lang] .m, main.article article .actions code[data-lang] .mb, main.article article .actions code[data-lang] .mf, main.article article .actions code[data-lang] .mh, main.article article .actions code[data-lang] .mi, main.article article .actions code[data-lang] .il, main.article article .actions code[data-lang] .mo,
main.article article .content code[data-lang] .m,
main.article article .content code[data-lang] .mb,
main.article article .content code[data-lang] .mf,
main.article article .content code[data-lang] .mh,
main.article article .content code[data-lang] .mi,
main.article article .content code[data-lang] .il,
main.article article .content code[data-lang] .mo,
main.article article .attribution code[data-lang] .m,
main.article article .attribution code[data-lang] .mb,
main.article article .attribution code[data-lang] .mf,
main.article article .attribution code[data-lang] .mh,
main.article article .attribution code[data-lang] .mi,
main.article article .attribution code[data-lang] .il,
main.article article .attribution code[data-lang] .mo,
main.article article .patreon-link code[data-lang] .m,
main.article article .patreon-link code[data-lang] .mb,
main.article article .patreon-link code[data-lang] .mf,
main.article article .patreon-link code[data-lang] .mh,
main.article article .patreon-link code[data-lang] .mi,
main.article article .patreon-link code[data-lang] .il,
main.article article .patreon-link code[data-lang] .mo,
main.article article .license code[data-lang] .m,
main.article article .license code[data-lang] .mb,
main.article article .license code[data-lang] .mf,
main.article article .license code[data-lang] .mh,
main.article article .license code[data-lang] .mi,
main.article article .license code[data-lang] .il,
main.article article .license code[data-lang] .mo {
  font-weight: bold;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions code[data-lang] span,
main.article article .content code[data-lang] span,
main.article article .attribution code[data-lang] span,
main.article article .patreon-link code[data-lang] span,
main.article article .license code[data-lang] span {
    color: #eee;
  }
  main.article article .actions code[data-lang] .p, main.article article .actions code[data-lang] .o,
main.article article .content code[data-lang] .p,
main.article article .content code[data-lang] .o,
main.article article .attribution code[data-lang] .p,
main.article article .attribution code[data-lang] .o,
main.article article .patreon-link code[data-lang] .p,
main.article article .patreon-link code[data-lang] .o,
main.article article .license code[data-lang] .p,
main.article article .license code[data-lang] .o {
    color: #888;
  }
  main.article article .actions code[data-lang] .n, main.article article .actions code[data-lang] .nc,
main.article article .content code[data-lang] .n,
main.article article .content code[data-lang] .nc,
main.article article .attribution code[data-lang] .n,
main.article article .attribution code[data-lang] .nc,
main.article article .patreon-link code[data-lang] .n,
main.article article .patreon-link code[data-lang] .nc,
main.article article .license code[data-lang] .n,
main.article article .license code[data-lang] .nc {
    color: #ddd;
  }
}
main.article article .actions a[href] code,
main.article article .content a[href] code,
main.article article .attribution a[href] code,
main.article article .patreon-link a[href] code,
main.article article .license a[href] code {
  font-weight: bold;
  background: transparent;
}
main.article article .actions pre,
main.article article .content pre,
main.article article .attribution pre,
main.article article .patreon-link pre,
main.article article .license pre {
  overflow-x: auto;
  width: calc(100% + 8px * 12);
  font-size: 0.8em;
  background-color: #eee;
  padding: 16px 48px;
  margin: 16px -48px !important;
  line-height: 140%;
}
@media (max-width: 500px) {
  main.article article .actions pre,
main.article article .content pre,
main.article article .attribution pre,
main.article article .patreon-link pre,
main.article article .license pre {
    padding: 16px 16px;
    margin: 16px -16px !important;
    width: calc(100% + 8px * 2);
  }
}
@media (prefers-color-scheme: dark) {
  main.article article .actions pre,
main.article article .content pre,
main.article article .attribution pre,
main.article article .patreon-link pre,
main.article article .license pre {
    background-color: #282828;
  }
}
main.article article .actions pre code,
main.article article .content pre code,
main.article article .attribution pre code,
main.article article .patreon-link pre code,
main.article article .license pre code {
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}
main.article article .actions div.language-file-indicator,
main.article article .content div.language-file-indicator,
main.article article .attribution div.language-file-indicator,
main.article article .patreon-link div.language-file-indicator,
main.article article .license div.language-file-indicator {
  color: rgba(0, 0, 0, 0.87);
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  margin-bottom: -16px;
  margin-top: 24px;
  margin-left: -48px;
  margin-right: -48px;
  padding-left: 32px;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions div.language-file-indicator,
main.article article .content div.language-file-indicator,
main.article article .attribution div.language-file-indicator,
main.article article .patreon-link div.language-file-indicator,
main.article article .license div.language-file-indicator {
    color: rgba(255, 255, 255, 0.85);
  }
}
@media (max-width: 800px) {
  main.article article .actions div.language-file-indicator,
main.article article .content div.language-file-indicator,
main.article article .attribution div.language-file-indicator,
main.article article .patreon-link div.language-file-indicator,
main.article article .license div.language-file-indicator {
    padding-left: 8px;
    margin-left: -8px;
  }
}
main.article article .actions div.language-file-indicator .indicator,
main.article article .content div.language-file-indicator .indicator,
main.article article .attribution div.language-file-indicator .indicator,
main.article article .patreon-link div.language-file-indicator .indicator,
main.article article .license div.language-file-indicator .indicator {
  display: inline-block;
  padding: 4px 16px;
  padding-bottom: 0;
  border-bottom: 2px solid #aaa;
  margin: 0;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions div.language-file-indicator .indicator,
main.article article .content div.language-file-indicator .indicator,
main.article article .attribution div.language-file-indicator .indicator,
main.article article .patreon-link div.language-file-indicator .indicator,
main.article article .license div.language-file-indicator .indicator {
    border-color: #444;
  }
}
main.article article .actions div.language-file-indicator .indicator:after,
main.article article .content div.language-file-indicator .indicator:after,
main.article article .attribution div.language-file-indicator .indicator:after,
main.article article .patreon-link div.language-file-indicator .indicator:after,
main.article article .license div.language-file-indicator .indicator:after {
  border: 8px solid transparent;
  border-top-color: #aaa;
  content: "";
  display: block;
  position: absolute;
  bottom: -18px;
  left: 24px;
  opacity: 0;
}
main.article article .actions div.language-file-indicator .language,
main.article article .content div.language-file-indicator .language,
main.article article .attribution div.language-file-indicator .language,
main.article article .patreon-link div.language-file-indicator .language,
main.article article .license div.language-file-indicator .language {
  font-weight: bold;
}
main.article article .actions div.language-file-indicator .file,
main.article article .content div.language-file-indicator .file,
main.article article .attribution div.language-file-indicator .file,
main.article article .patreon-link div.language-file-indicator .file,
main.article article .license div.language-file-indicator .file {
  color: rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  main.article article .actions div.language-file-indicator .file,
main.article article .content div.language-file-indicator .file,
main.article article .attribution div.language-file-indicator .file,
main.article article .patreon-link div.language-file-indicator .file,
main.article article .license div.language-file-indicator .file {
    color: rgba(255, 255, 255, 0.4);
  }
}
main.article article .actions ul, main.article article .actions ol,
main.article article .content ul,
main.article article .content ol,
main.article article .attribution ul,
main.article article .attribution ol,
main.article article .patreon-link ul,
main.article article .patreon-link ol,
main.article article .license ul,
main.article article .license ol {
  margin: 24px 8px;
  padding-left: 16px;
}
main.article article .actions ul li, main.article article .actions ol li,
main.article article .content ul li,
main.article article .content ol li,
main.article article .attribution ul li,
main.article article .attribution ol li,
main.article article .patreon-link ul li,
main.article article .patreon-link ol li,
main.article article .license ul li,
main.article article .license ol li {
  padding-left: 1ex;
  margin-top: 4px;
}
main.article article .actions ul ol, main.article article .actions ol ul, main.article article .actions ol ol, main.article article .actions ul ul,
main.article article .content ul ol,
main.article article .content ol ul,
main.article article .content ol ol,
main.article article .content ul ul,
main.article article .attribution ul ol,
main.article article .attribution ol ul,
main.article article .attribution ol ol,
main.article article .attribution ul ul,
main.article article .patreon-link ul ol,
main.article article .patreon-link ol ul,
main.article article .patreon-link ol ol,
main.article article .patreon-link ul ul,
main.article article .license ul ol,
main.article article .license ol ul,
main.article article .license ol ol,
main.article article .license ul ul {
  margin-top: 12px;
}
main.article article .actions .unit,
main.article article .content .unit,
main.article article .attribution .unit,
main.article article .patreon-link .unit,
main.article article .license .unit {
  position: relative;
  /*

      .original {
        color: $color-unit-text !important;
        box-shadow: 0 0 0 1px $color-unit;
        padding: 1px 3px;
        border-radius: 2px;
      }

      .imperial {
        position: absolute;
        top: 100%;
        left: 0;

        margin-top: 2px;

        color: $color-unit-text;
        display: table;
        background-color: $color-unit;
        box-shadow: 0 0 0 1px $color-unit-border;
        border-radius: 2px;
        padding: 0px 3px;

        pointer-events: none;
        opacity: 0;

        transition: opacity $anim-fast ease;
      }

      &:hover {
        .imperial {
          opacity: 1;
        }
      }

  */
}
main.article article .actions .unit .original:after,
main.article article .content .unit .original:after,
main.article article .attribution .unit .original:after,
main.article article .patreon-link .unit .original:after,
main.article article .license .unit .original:after {
  content: " (";
  display: inline;
}
main.article article .actions .unit .imperial:after,
main.article article .content .unit .imperial:after,
main.article article .attribution .unit .imperial:after,
main.article article .patreon-link .unit .imperial:after,
main.article article .license .unit .imperial:after {
  content: ")";
  display: inline;
}
main.article article .actions section.note,
main.article article .content section.note,
main.article article .attribution section.note,
main.article article .patreon-link section.note,
main.article article .license section.note {
  margin: 32px -48px;
  /*
      @media(min-width: $breakpoint-tablet + 1px) {
        display: block;
        float: right;
        width: 60%;

        margin-left: $grid * 2;
        margin-right: $grid * 2;
      }
  */
}
main.article article .actions section.note header,
main.article article .content section.note header,
main.article article .attribution section.note header,
main.article article .patreon-link section.note header,
main.article article .license section.note header {
  margin: 0 32px;
  margin-top: 16px;
  color: #1259a1;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions section.note header,
main.article article .content section.note header,
main.article article .attribution section.note header,
main.article article .patreon-link section.note header,
main.article article .license section.note header {
    color: #8cbff2;
  }
}
main.article article .actions section.note header .title,
main.article article .content section.note header .title,
main.article article .attribution section.note header .title,
main.article article .patreon-link section.note header .title,
main.article article .license section.note header .title {
  display: inline-block;
  padding: 0 16px;
  font-size: 100%;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 2px solid #7db3e8;
}
main.article article .actions section.note header .title code,
main.article article .content section.note header .title code,
main.article article .attribution section.note header .title code,
main.article article .patreon-link section.note header .title code,
main.article article .license section.note header .title code {
  background-color: #dbedff;
  padding: 0 8px;
  font-size: 1em;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions section.note header .title code,
main.article article .content section.note header .title code,
main.article article .attribution section.note header .title code,
main.article article .patreon-link section.note header .title code,
main.article article .license section.note header .title code {
    background-color: #1a334d;
  }
}
main.article article .actions section.note .note-content,
main.article article .content section.note .note-content,
main.article article .attribution section.note .note-content,
main.article article .patreon-link section.note .note-content,
main.article article .license section.note .note-content {
  background-color: #e6f2ff;
  border: 0 solid #7db3e8;
  padding: 16px 48px;
  padding-top: 12px;
  color: #00264d;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions section.note .note-content,
main.article article .content section.note .note-content,
main.article article .attribution section.note .note-content,
main.article article .patreon-link section.note .note-content,
main.article article .license section.note .note-content {
    background-color: #204060;
    border-color: #9cb3c9;
    color: #c6d9ec;
  }
}
main.article article .actions section.note .note-content a,
main.article article .content section.note .note-content a,
main.article article .attribution section.note .note-content a,
main.article article .patreon-link section.note .note-content a,
main.article article .license section.note .note-content a {
  text-decoration: underline;
  color: #00264d !important;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions section.note .note-content a,
main.article article .content section.note .note-content a,
main.article article .attribution section.note .note-content a,
main.article article .patreon-link section.note .note-content a,
main.article article .license section.note .note-content a {
    color: #c6d9ec !important;
  }
}
@media (max-width: 500px) {
  main.article article .actions section.note,
main.article article .content section.note,
main.article article .attribution section.note,
main.article article .patreon-link section.note,
main.article article .license section.note {
    margin: 16px -32px;
  }
  main.article article .actions section.note .note-content,
main.article article .content section.note .note-content,
main.article article .attribution section.note .note-content,
main.article article .patreon-link section.note .note-content,
main.article article .license section.note .note-content {
    padding-left: 32px;
    padding-right: 32px;
  }
}
main.article article .actions a.source-link,
main.article article .content a.source-link,
main.article article .attribution a.source-link,
main.article article .patreon-link a.source-link,
main.article article .license a.source-link {
  margin: 16px;
  margin-left: -16px;
  margin-right: -16px;
  padding: 12px 32px;
  padding-right: 64px;
  font-size: 115%;
  font-weight: bold;
  border-radius: 3px;
  background-color: #f2f2f2;
  border: 1px solid #d9d9d9;
  position: relative;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
main.article article .actions a.source-link:after,
main.article article .content a.source-link:after,
main.article article .attribution a.source-link:after,
main.article article .patreon-link a.source-link:after,
main.article article .license a.source-link:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  width: 48px;
  background-image: url("/img/source-arrow-right.png");
  background-size: 32px 32px;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position 0.15s ease;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions a.source-link:after,
main.article article .content a.source-link:after,
main.article article .attribution a.source-link:after,
main.article article .patreon-link a.source-link:after,
main.article article .license a.source-link:after {
    filter: invert(1);
    opacity: 0.75;
  }
}
@media (prefers-color-scheme: dark) {
  main.article article .actions a.source-link,
main.article article .content a.source-link,
main.article article .attribution a.source-link,
main.article article .patreon-link a.source-link,
main.article article .license a.source-link {
    background-color: #262626;
    border-color: #333333;
  }
}
main.article article .actions a.source-link .pre-text, main.article article .actions a.source-link .name,
main.article article .content a.source-link .pre-text,
main.article article .content a.source-link .name,
main.article article .attribution a.source-link .pre-text,
main.article article .attribution a.source-link .name,
main.article article .patreon-link a.source-link .pre-text,
main.article article .patreon-link a.source-link .name,
main.article article .license a.source-link .pre-text,
main.article article .license a.source-link .name {
  color: #4d4d4d;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions a.source-link .pre-text, main.article article .actions a.source-link .name,
main.article article .content a.source-link .pre-text,
main.article article .content a.source-link .name,
main.article article .attribution a.source-link .pre-text,
main.article article .attribution a.source-link .name,
main.article article .patreon-link a.source-link .pre-text,
main.article article .patreon-link a.source-link .name,
main.article article .license a.source-link .pre-text,
main.article article .license a.source-link .name {
    color: #cccccc;
  }
}
main.article article .actions a.source-link:hover,
main.article article .content a.source-link:hover,
main.article article .attribution a.source-link:hover,
main.article article .patreon-link a.source-link:hover,
main.article article .license a.source-link:hover {
  background-color: #f9f9f9;
  border-color: #e6e6e6;
}
main.article article .actions a.source-link:hover:after,
main.article article .content a.source-link:hover:after,
main.article article .attribution a.source-link:hover:after,
main.article article .patreon-link a.source-link:hover:after,
main.article article .license a.source-link:hover:after {
  background-position: 25% 50%;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions a.source-link:hover,
main.article article .content a.source-link:hover,
main.article article .attribution a.source-link:hover,
main.article article .patreon-link a.source-link:hover,
main.article article .license a.source-link:hover {
    background-color: #333333;
    border-color: #404040;
  }
}
main.article article .actions figure.img,
main.article article .content figure.img,
main.article article .attribution figure.img,
main.article article .patreon-link figure.img,
main.article article .license figure.img {
  background: white;
  margin: 16px 0;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions figure.img,
main.article article .content figure.img,
main.article article .attribution figure.img,
main.article article .patreon-link figure.img,
main.article article .license figure.img {
    background-color: #222;
  }
}
@media print {
  main.article article .actions figure.img,
main.article article .content figure.img,
main.article article .attribution figure.img,
main.article article .patreon-link figure.img,
main.article article .license figure.img {
    display: block !important;
    break-before: avoid;
    break-after: avoid;
    break-inside: avoid;
  }
}
@media print {
  main.article article .actions figure.img.left, main.article article .actions figure.img.right,
main.article article .content figure.img.left,
main.article article .content figure.img.right,
main.article article .attribution figure.img.left,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.left,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.left,
main.article article .license figure.img.right {
    max-width: 35%;
    margin-left: 16px;
    float: right;
  }
}
main.article article .actions figure.img figcaption,
main.article article .content figure.img figcaption,
main.article article .attribution figure.img figcaption,
main.article article .patreon-link figure.img figcaption,
main.article article .license figure.img figcaption {
  font-size: 12px;
  font-style: italic;
  padding: 16px 0;
  margin: 16px auto;
  padding-top: 0;
  margin-top: 0;
}
main.article article .actions figure.img figcaption img,
main.article article .content figure.img figcaption img,
main.article article .attribution figure.img figcaption img,
main.article article .patreon-link figure.img figcaption img,
main.article article .license figure.img figcaption img {
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
body.loaded main.article article .actions figure.img figcaption img,
body.loaded main.article article .content figure.img figcaption img,
body.loaded main.article article .attribution figure.img figcaption img,
body.loaded main.article article .patreon-link figure.img figcaption img,
body.loaded main.article article .license figure.img figcaption img {
  opacity: 1;
}
main.article article .actions figure.img.left, main.article article .actions figure.img.right, main.article article .actions figure.img.small,
main.article article .content figure.img.left,
main.article article .content figure.img.right,
main.article article .content figure.img.small,
main.article article .attribution figure.img.left,
main.article article .attribution figure.img.right,
main.article article .attribution figure.img.small,
main.article article .patreon-link figure.img.left,
main.article article .patreon-link figure.img.right,
main.article article .patreon-link figure.img.small,
main.article article .license figure.img.left,
main.article article .license figure.img.right,
main.article article .license figure.img.small {
  max-width: 640px;
}
main.article article .actions figure.img.full-bleed,
main.article article .content figure.img.full-bleed,
main.article article .attribution figure.img.full-bleed,
main.article article .patreon-link figure.img.full-bleed,
main.article article .license figure.img.full-bleed {
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 600px) {
  main.article article .actions figure.img.full-bleed,
main.article article .content figure.img.full-bleed,
main.article article .attribution figure.img.full-bleed,
main.article article .patreon-link figure.img.full-bleed,
main.article article .license figure.img.full-bleed {
    margin-left: -16px;
    margin-right: -16px;
  }
}
@media (min-width: 800px) {
  main.article article .actions figure.img.left, main.article article .actions figure.img.right,
main.article article .content figure.img.left,
main.article article .content figure.img.right,
main.article article .attribution figure.img.left,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.left,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.left,
main.article article .license figure.img.right {
    padding: 16px;
    margin: 16px;
    width: calc(50% - (8px * 2));
    max-width: 50%;
  }
  main.article article .actions figure.img.left,
main.article article .content figure.img.left,
main.article article .attribution figure.img.left,
main.article article .patreon-link figure.img.left,
main.article article .license figure.img.left {
    float: left;
    padding-left: 0;
    margin-left: 0;
    clear: left;
  }
  main.article article .actions figure.img.right,
main.article article .content figure.img.right,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.right {
    float: right;
    padding-right: 0;
    margin-right: 0;
    clear: right;
  }
}
main.article article .actions figure.img figcaption,
main.article article .content figure.img figcaption,
main.article article .attribution figure.img figcaption,
main.article article .patreon-link figure.img figcaption,
main.article article .license figure.img figcaption {
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
main.article article .actions figure.img figcaption .credit,
main.article article .content figure.img figcaption .credit,
main.article article .attribution figure.img figcaption .credit,
main.article article .patreon-link figure.img figcaption .credit,
main.article article .license figure.img figcaption .credit {
  display: block;
}
@media (min-width: 1440px) {
  main.article article .actions figure.img.left, main.article article .actions figure.img.right,
main.article article .content figure.img.left,
main.article article .content figure.img.right,
main.article article .attribution figure.img.left,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.left,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.left,
main.article article .license figure.img.right {
    box-shadow: 0 2px 6.6666666667px rgba(0, 0, 0, 0.3);
    padding: 8px;
    margin: 16px 32px;
  }
  main.article article .actions figure.img.left,
main.article article .content figure.img.left,
main.article article .attribution figure.img.left,
main.article article .patreon-link figure.img.left,
main.article article .license figure.img.left {
    margin-left: -256px;
    max-width: 480px;
  }
  main.article article .actions figure.img.right,
main.article article .content figure.img.right,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.right {
    margin-right: -256px;
  }
}
@media (min-width: 1900px) {
  main.article article .actions figure.img.left, main.article article .actions figure.img.right,
main.article article .content figure.img.left,
main.article article .content figure.img.right,
main.article article .attribution figure.img.left,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.left,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.left,
main.article article .license figure.img.right {
    max-width: 480px;
    padding: 8px;
    margin: 16px 32px;
  }
  main.article article .actions figure.img.left,
main.article article .content figure.img.left,
main.article article .attribution figure.img.left,
main.article article .patreon-link figure.img.left,
main.article article .license figure.img.left {
    margin-left: -384px;
  }
  main.article article .actions figure.img.right,
main.article article .content figure.img.right,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.right {
    margin-right: -384px;
  }
}
@media (min-width: 2400px) {
  main.article article .actions figure.img.left,
main.article article .content figure.img.left,
main.article article .attribution figure.img.left,
main.article article .patreon-link figure.img.left,
main.article article .license figure.img.left {
    margin-left: -460px;
  }
  main.article article .actions figure.img.right,
main.article article .content figure.img.right,
main.article article .attribution figure.img.right,
main.article article .patreon-link figure.img.right,
main.article article .license figure.img.right {
    margin-right: -460px;
  }
}
main.article article .actions figure.sequence,
main.article article .content figure.sequence,
main.article article .attribution figure.sequence,
main.article article .patreon-link figure.sequence,
main.article article .license figure.sequence {
  margin: 48px 0;
}
main.article article .actions figure.sequence .images,
main.article article .content figure.sequence .images,
main.article article .attribution figure.sequence .images,
main.article article .patreon-link figure.sequence .images,
main.article article .license figure.sequence .images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
main.article article .actions figure.sequence .images img,
main.article article .content figure.sequence .images img,
main.article article .attribution figure.sequence .images img,
main.article article .patreon-link figure.sequence .images img,
main.article article .license figure.sequence .images img {
  flex: 1;
  display: inline-block;
  max-width: 128px !important;
}
@media (min-width: 750px) {
  main.article article .actions figure.sequence .images img,
main.article article .content figure.sequence .images img,
main.article article .attribution figure.sequence .images img,
main.article article .patreon-link figure.sequence .images img,
main.article article .license figure.sequence .images img {
    margin: 0 16px;
  }
}
main.article article .actions figure.sequence figcaption,
main.article article .content figure.sequence figcaption,
main.article article .attribution figure.sequence figcaption,
main.article article .patreon-link figure.sequence figcaption,
main.article article .license figure.sequence figcaption {
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
main.article article .actions figure.sequence > figcaption,
main.article article .content figure.sequence > figcaption,
main.article article .attribution figure.sequence > figcaption,
main.article article .patreon-link figure.sequence > figcaption,
main.article article .license figure.sequence > figcaption {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
}
main.article article .actions table,
main.article article .content table,
main.article article .attribution table,
main.article article .patreon-link table,
main.article article .license table {
  margin: 32px auto;
  box-sizing: content-box;
  border-collapse: collapse;
}
main.article article .actions table th, main.article article .actions table td,
main.article article .content table th,
main.article article .content table td,
main.article article .attribution table th,
main.article article .attribution table td,
main.article article .patreon-link table th,
main.article article .patreon-link table td,
main.article article .license table th,
main.article article .license table td {
  border: none;
  padding: 4px 16px;
  vertical-align: top;
}
main.article article .actions table th,
main.article article .content table th,
main.article article .attribution table th,
main.article article .patreon-link table th,
main.article article .license table th {
  border-bottom: 2px solid #e6e6e6;
  font-weight: bold;
  padding: 8px 16px;
  white-space: nowrap;
}
main.article article .actions table td:first-child, main.article article .actions table th:first-child,
main.article article .content table td:first-child,
main.article article .content table th:first-child,
main.article article .attribution table td:first-child,
main.article article .attribution table th:first-child,
main.article article .patreon-link table td:first-child,
main.article article .patreon-link table th:first-child,
main.article article .license table td:first-child,
main.article article .license table th:first-child {
  border-left: none;
}
main.article article .actions table tr:last-child td,
main.article article .content table tr:last-child td,
main.article article .attribution table tr:last-child td,
main.article article .patreon-link table tr:last-child td,
main.article article .license table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 800px) {
  main.article article .actions table th, main.article article .actions table td,
main.article article .content table th,
main.article article .content table td,
main.article article .attribution table th,
main.article article .attribution table td,
main.article article .patreon-link table th,
main.article article .patreon-link table td,
main.article article .license table th,
main.article article .license table td {
    padding-left: 8px;
    padding-right: 8px;
  }
}
main.article article .actions table :first-child,
main.article article .content table :first-child,
main.article article .attribution table :first-child,
main.article article .patreon-link table :first-child,
main.article article .license table :first-child {
  margin-top: 0;
}
main.article article .actions table :last-child,
main.article article .content table :last-child,
main.article article .attribution table :last-child,
main.article article .patreon-link table :last-child,
main.article article .license table :last-child {
  margin-bottom: 0;
}
@media (max-width: 500px) {
  main.article article .actions,
main.article article .content,
main.article article .attribution,
main.article article .patreon-link,
main.article article .license {
    padding: 16px 16px;
  }
}
main.article article .actions p:empty,
main.article article .content p:empty,
main.article article .attribution p:empty,
main.article article .patreon-link p:empty,
main.article article .license p:empty {
  display: none;
}
main.article article .actions {
  background-color: #f4f4f4;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 16px;
  height: auto;
}
@media (prefers-color-scheme: dark) {
  main.article article .actions {
    background-color: #282828;
  }
}
main.article article .actions a {
  background-color: transparent;
  display: block;
  color: #dd6644;
  font-weight: bold;
  text-transform: uppercase;
  padding: 8px 16px;
  transition: background-color 0.15s ease;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  margin-right: 16px;
}
main.article article .actions a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
@media (max-width: 900px) {
  main.article article .actions a {
    height: 32px;
    line-height: 32px;
  }
}
@media print {
  main.article article .actions,
main.article article .patreon-link {
    display: none;
  }
}
main.article article .attribution {
  padding: 0 32px;
  padding-bottom: 8px;
  margin-top: 16px;
  text-align: right;
  color: rgba(0, 0, 0, 0.54);
  font-style: italic;
}
@media (prefers-color-scheme: dark) {
  main.article article .attribution {
    color: rgba(255, 255, 255, 0.75);
  }
}
main.article article .license {
  padding: 16px 16px;
  padding-top: 0;
  margin-top: 16px;
}
main.article article .license p {
  color: #009688;
  font-weight: bold;
  text-align: center;
  padding: 8px 16px;
}
main.article article .license p a {
  color: #009688 !important;
  text-decoration: underline;
}
main.article article .patreon-link {
  padding: 16px 16px;
  padding-top: 0;
  margin-top: 16px;
}
main.article article .patreon-link p {
  background-color: #FFC107;
  color: #444;
  font-weight: bold;
  text-align: center;
  padding: 8px 16px;
}
main.article article .patreon-link p a {
  color: #444 !important;
  text-decoration: underline;
}
main.article article .further-reading {
  padding: 16px 32px;
  padding-top: 0;
}
@media (max-width: 600px) {
  main.article article .further-reading {
    padding: 16px 16px;
  }
}
main.article article .further-reading .title {
  font-size: 16px;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1ex;
  display: none;
}
main.article article .further-reading ul {
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  padding-top: 16px;
}
main.article article .further-reading ul li {
  list-style-type: none;
}
main.article article .further-reading ul li a {
  color: #dd6644;
  font-weight: bold;
}
main.article article.project .embed {
  background-color: #607D8B;
}
main.article article.project .embed.sketchfab iframe {
  display: block;
  width: 100%;
}
main.article article.article .warning {
  background-color: #C33;
  color: white;
  font-size: 14px;
  font-style: italic;
  text-align: center;
  margin-top: -16px;
  margin-bottom: 48px;
  margin-left: -16px;
  margin-right: -16px;
  padding: 8px 16px;
}
@media (min-width: 800px) {
  main.article article.article .headline {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
main.article article.article .content {
  font-size: 1.1em;
  padding-top: 32px;
}
main.article article.art, main.article article.infographic {
  margin-top: -16px;
}
main.article article.art .art,
main.article article.art .infographic, main.article article.infographic .art,
main.article article.infographic .infographic {
  background-color: white;
  padding: 0;
}
main.article article.art .art a,
main.article article.art .infographic a, main.article article.infographic .art a,
main.article article.infographic .infographic a {
  display: block;
}
main.article article.art .art img,
main.article article.art .infographic img, main.article article.infographic .art img,
main.article article.infographic .infographic img {
  display: block;
  width: 100%;
}
@media (min-width: 1100px) {
  main.article article.art.infographic .headline .title, main.article article.infographic.infographic .headline .title {
    display: none;
    font-size: 16px;
  }
  main.article article.art.aspect-wide .body, main.article article.infographic.aspect-wide .body {
    display: flex;
    flex-direction: column;
  }
  main.article article.art.aspect-wide .body .image, main.article article.infographic.aspect-wide .body .image {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
    align-self: center;
    width: 1820px;
    max-width: 95vw;
  }
}
main.article article.redirect .content {
  font-size: 24px;
  font-weight: bold;
}

main.article.static .section {
  display: none !important;
}
main.article.static .publish-time {
  display: none !important;
}
main.article.static .meta {
  display: none;
}

article .comments {
  margin: 16px 32px;
}
article .meta {
  background-color: #f4f4f4;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  clear: both;
  flex-wrap: wrap;
  font-size: 12px;
  min-height: 48px;
  /*
      @media (max-width: 400px) {
        align-items: stretch !important;
        flex-direction: column;

        ul {
          border-left: none !important;
          width: 100%;
        }

        ul + ul {
          border-top: 4px solid $color-background;
        }

      }
  */
}
@media print {
  article .meta {
    display: none;
  }
}
body.story article .meta {
  background-color: transparent;
  border-top: 1px solid #f2f2f2;
  padding: 16px 0;
}
@media (prefers-color-scheme: dark) {
  body.story article .meta {
    background-color: #181818;
    background: transparent;
    border-top: none;
    padding-left: 16px;
    margin-top: 64px;
  }
}
article .meta ul {
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 32px;
  flex-wrap: wrap;
}
@media (prefers-color-scheme: dark) {
  article .meta ul {
    background-color: #282828;
  }
}
body.story article .meta ul {
  background-color: transparent;
}
article .meta ul.tags {
  border-top: 4px solid #fff;
  font-family: "Roboto Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  article .meta ul.tags {
    border-color: #222;
  }
}
article .meta ul.tags li {
  text-transform: none !important;
}
article .meta ul li {
  color: rgba(0, 0, 0, 0.4);
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  height: 32px;
}
@media (prefers-color-scheme: dark) {
  article .meta ul li {
    color: rgba(255, 255, 255, 0.5);
  }
}
article .meta ul li a {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  transition: background-color 0.15s ease;
}
article .meta ul li a span {
  vertical-align: middle;
}
@media (max-width: 800px) {
  article .meta {
    background: #f4f4f4;
  }
  article .meta ul {
    flex: 1;
    /*
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
           */
    padding: 0;
  }
  article .meta li {
    height: auto;
  }
  article .meta li a {
    min-height: 32px !important;
    justify-content: flex-start !important;
    padding: 0 16px;
  }
}
@media (prefers-color-scheme: dark) {
  article .meta {
    background-color: #282828;
  }
}
article a[href]:hover {
  text-decoration: underline;
}

main.article article .section.section-app,
main.article article .section.section-art,
main.article article .section.section-article,
main.article article .section.section-infographic,
main.article article .section.section-post,
main.article article .section.section-project {
  display: none;
}
@media (max-width: 750px) {
  main.article article .section.section-app,
main.article article .section.section-art,
main.article article .section.section-article,
main.article article .section.section-infographic,
main.article article .section.section-post,
main.article article .section.section-project {
    display: none;
  }
}

article .section.section-app a,
article .section.section-article a,
article .section.section-infographic a,
article .section.section-post a,
article .section.section-project a,
article .section.section-term a {
  color: white;
}

article .section.section-app a {
  background-color: #8BC34A !important;
}

article.app .body .actions a[href],
article.app .content a[href],
article.app .links .name,
article.app .body .read-more a[href] {
  color: #8BC34A !important;
}

article .section.section-art a {
  background-color: #FFF !important;
  color: #242424 !important;
}

article.art .body .actions a[href],
article.art .links .name,
article.art .body .read-more a[href] {
  color: #242424 !important;
}
@media (prefers-color-scheme: dark) {
  article.art .body .actions a[href],
article.art .links .name,
article.art .body .read-more a[href] {
    color: white !important;
  }
}

article.art .content a[href] {
  color: #dd6644 !important;
}

article .section.section-article a {
  background-color: #C33 !important;
}

article.article .body .actions a[href],
article.article .content a[href],
article.article .links .name,
article.article .body .read-more a[href] {
  color: #C33 !important;
}

article .section.section-infographic a {
  background-color: #009688 !important;
}

article.infographic .body .actions a[href],
article.infographic .content a[href],
article.infographic .links .name,
article.infographic .body .read-more a[href] {
  color: #009688 !important;
}

article .section.section-post a {
  background-color: #dd6644 !important;
}

article.post .content a[href],
article.post .body .read-more a[href] {
  color: #dd6644 !important;
}

article .section.section-project a {
  background-color: #607D8B !important;
}

article.project .body .actions a[href],
article.project .content a[href],
article.project .links .name,
article.project .body .read-more a[href] {
  color: #607D8B !important;
}

article .section.section-term a {
  background-color: #00BCD4 !important;
}

article.section-term .headline .publish-time {
  display: none;
}

body.no-js article .headline .publish-time,
body.loaded article .headline .publish-time {
  opacity: 1 !important;
}

article .actions a[href].button.right {
  margin-left: auto;
}
@media (max-width: 750px) {
  article .actions a[href].button.right {
    margin-left: 16px;
  }
}

article .actions a[href].button.buy {
  box-shadow: 0 0 0 2px #242424;
  background-color: #FFC107 !important;
  color: #242424 !important;
}

body.story article .content .body a[href] {
  color: #07d !important;
  text-decoration: underline;
}

/* Black theme */
/*
$color-page-background: #000;
*/
/* TODO: SCSS has ways around this but I'm too lazy to bother. */
@-webkit-keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
@-moz-keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
@-o-keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
@keyframes target-fade {
  from {
    background-color: #eb9e47;
  }
  to {
    background-color: #fae7d1;
  }
}
body[data-title=Infographics] main.article-list .request-infographic {
  display: flex;
  justify-content: center;
}
body[data-title=Infographics] main.article-list .request-infographic p {
  background-color: #009688;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 16px 32px;
  margin: 0 auto;
  width: auto;
}
body[data-title=Infographics] main.article-list .request-infographic p a {
  color: white;
  text-decoration: underline;
}
body[data-title=Infographics] main.article-list.condensed .category.headline {
  color: white;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
  display: block;
  margin: 0 32px;
  margin-top: 48px;
}
@media (min-width: 1500px) {
  body[data-title=Infographics] main.article-list.condensed {
    max-width: 1500px;
  }
}
@media (min-width: 1900px) {
  body[data-title=Infographics] main.article-list.condensed {
    max-width: 1900px;
  }
}
@media (min-width: 2400px) {
  body[data-title=Infographics] main.article-list.condensed {
    max-width: 2400px;
  }
}
body[data-title=Infographics] main.article-list.condensed .article-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic {
  margin-top: 16px;
  background-color: transparent;
  box-shadow: none;
  position: relative;
}
@media (min-width: 900px) {
  body[data-title=Infographics] main.article-list.condensed .article-list article.infographic {
    flex: 0 0 calc(50% - 8px * 2);
    margin-right: 8px;
    margin-left: 8px;
  }
}
@media (min-width: 1500px) {
  body[data-title=Infographics] main.article-list.condensed .article-list article.infographic {
    flex: 0 0 calc(33.3% - 8px * 2);
  }
}
@media (min-width: 1900px) {
  body[data-title=Infographics] main.article-list.condensed .article-list article.infographic {
    flex: 0 0 calc(25% - 8px * 2);
  }
}
@media (min-width: 2400px) {
  body[data-title=Infographics] main.article-list.condensed .article-list article.infographic {
    flex: 0 0 calc(20% - 8px * 2);
  }
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline {
  top: 0;
  left: 0;
  min-height: 48px;
  width: 100%;
  padding: 16px 16px;
  padding-bottom: 8px;
  background-color: rgba(0, 0, 0, 0.5);
  background-color: transparent;
  display: flex;
  align-items: flex-end;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline .title {
  display: block;
  margin: 0;
  padding: 0;
  writing-mode: bt-lr;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline .title a {
  color: white;
  font-size: 16px;
  text-decoration: none;
  padding: 0;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline .title a:hover {
  text-decoration: underline;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline .section, body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline .links, body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .headline .publish-time {
  display: none;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .body {
  padding-top: 0;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .body .infographic {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.6);
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .body .infographic img {
  width: 100%;
  max-width: none;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .body .content {
  display: none;
}
body[data-title=Infographics] main.article-list.condensed .article-list article.infographic .meta {
  display: none;
}

.article-list article {
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.6);
  background-color: white;
}
body.story .article-list article {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@media (prefers-color-scheme: dark) {
  .article-list article {
    background-color: #222;
  }
}
.article-list article .headline {
  padding-top: 8px;
}
.article-list article .headline a {
  display: inline-block;
}
.article-list article .headline * {
  display: inline-block;
}
.article-list article .headline .section {
  margin-left: -8px;
  margin-right: -16px;
}
.article-list article .headline .section a {
  z-index: 50;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  background-color: #dd6644;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 32px;
}
@media (max-width: 1080px) {
  .article-list article .headline .section {
    margin-left: 16px;
  }
}
.article-list article .headline .title {
  margin-left: 32px;
}
.article-list article .headline .title a {
  color: #777;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 0;
  text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
  .article-list article .headline .title a {
    color: #ddd;
  }
}
.article-list article .headline .title .links {
  padding: 0 8px;
  position: relative;
  bottom: -6px;
  display: inline-flex;
  justify-content: flex-start;
  align-items: start;
}
.article-list article .headline .title .links a {
  text-align: center;
  transition: background-color 0.15s ease;
  min-width: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
}
.article-list article .headline .title .links a img {
  opacity: 0.3;
  width: 24px;
  padding: 0 8px;
  box-sizing: content-box;
  transition: opacity 0.15s ease;
}
@media (prefers-color-scheme: dark) {
  .article-list article .headline .title .links a img {
    filter: invert(1);
  }
}
.article-list article .headline .title .links a .name {
  display: none;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0 16px;
}
.article-list article .headline .title .links a:hover {
  background-color: rgba(0, 0, 0, 0.07);
}
.article-list article .headline .title .links a:hover img {
  opacity: 0.5;
}
@media (max-width: 800px) {
  .article-list article .headline .title .links {
    display: flex;
    display: none;
    padding: 0;
    bottom: 0;
    margin-left: -16px;
  }
  .article-list article .headline .title .links .name {
    display: inline-block !important;
  }
  .article-list article .headline .title .links img {
    display: none;
  }
}
.article-list article .headline .publish-time {
  font-style: italic;
  float: right;
  color: rgba(0, 0, 0, 0.54);
  padding: 12px 0;
  padding-right: 32px;
  transition: opacity 0.2s ease;
  opacity: 0;
}
.article-list article .headline .publish-time:hover {
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .article-list article .headline .publish-time {
    color: rgba(255, 255, 255, 0.75);
  }
}
.article-list article .headline .raw-time {
  display: none;
}
@media (max-width: 800px) {
  .article-list article .headline {
    padding-bottom: 16px;
  }
  .article-list article .headline .section, .article-list article .headline .title, .article-list article .headline .publish-time {
    float: none;
    display: block;
    margin-left: 16px;
    margin-right: 16px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 1ex;
  }
  .article-list article .headline .section {
    margin-left: 16px;
    margin-right: 16px;
  }
  .article-list article .headline .section a {
    padding: 12px 16px;
  }
  .article-list article .headline .publish-time {
    padding: 0;
  }
}
.article-list article .body {
  clear: both;
}
.article-list article .warning {
  color: #C33;
  font-style: italic;
  margin-bottom: 1em;
}
.article-list article .summary {
  line-height: 1.8em;
  padding: 16px 32px;
}
body.serif .article-list article .summary {
  font-family: "Literata", serif;
  line-height: 2em;
  hanging-punctuation: first;
}
.article-list article .summary p + p {
  margin-top: 1.5em;
}
.article-list article .summary a[href] {
  color: #dd6644;
}
.article-list article .summary em {
  font-style: italic;
}
.article-list article .summary strong {
  font-weight: bold;
}
.article-list article .summary hr:after {
  content: "***";
  display: block;
  text-align: center;
  margin: 32px auto;
  padding-left: 2em;
  letter-spacing: 2em;
}
.article-list article .summary blockquote {
  background-color: rgba(0, 0, 0, 0.02);
  border-left: 4px solid rgba(0, 0, 0, 0.15);
  margin: 24px 0;
  padding: 16px 24px;
}
.article-list article .summary > h1, .article-list article .summary > h2, .article-list article .summary > h3, .article-list article .summary > h4, .article-list article .summary > h5, .article-list article .summary > h6 {
  margin-left: -48px;
  margin-right: -48px;
  padding: 12px 48px;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary h1, .article-list article .summary h2, .article-list article .summary h3, .article-list article .summary h4, .article-list article .summary h5, .article-list article .summary h6 {
    color: white;
  }
}
.article-list article .summary * + h1, .article-list article .summary * + h2, .article-list article .summary * + h3, .article-list article .summary * + h4, .article-list article .summary * + h5, .article-list article .summary * + h6 {
  margin-top: 2rem;
}
.article-list article .summary > h1 {
  font-size: 24px;
  font-weight: bold;
}
.article-list article .summary > h2 {
  font-size: 22px;
}
.article-list article .summary > h3 {
  font-size: 16px;
  font-weight: bold;
}
.article-list article .summary > h4 {
  font-size: 12.8px;
  font-weight: bold;
}
.article-list article .summary :target {
  background-color: #fae7d1;
  -webkit-animation: target-fade 3s;
  -moz-animation: target-fade 3s;
  -o-animation: target-fade 3s;
  animation: target-fade 3s;
}
.article-list article .summary .footnote {
  position: relative;
}
.article-list article .summary .footnote a {
  color: inherit !important;
  text-decoration: none !important;
  box-shadow: 0 2px 0 0 #ffc, inset 0 -0.2em 0 0 #ffc;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.article-list article .summary .footnote a[href] {
  box-shadow: 0 2px 0 0 #def, inset 0 -0.2em 0 0 #def;
}
.article-list article .summary .footnote .hover {
  position: absolute;
  top: 1em;
  left: -8px;
  margin-top: 4px;
  background-color: #3b3b3b;
  border-radius: 4px;
  display: table;
  padding: 4px 8px;
  z-index: 1000;
  pointer-events: none;
  color: white;
  font-style: italic;
  font-size: 80%;
  line-height: 135%;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.article-list article .summary .footnote:hover a {
  background-color: #ffc;
}
.article-list article .summary .footnote:hover a[href] {
  background-color: #def;
}
.article-list article .summary .footnote:hover .hover {
  opacity: 1;
}
.article-list article .summary img {
  max-width: 100%;
}
.article-list article .summary code {
  /* I love Hack. */
  font-family: "Hack", "Roboto Mono", monospace;
  font-size: 0.8em;
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.075);
  padding: 1px 3px;
  margin: 0 2px;
  overflow-wrap: break-word;
}
.article-list article .summary code[data-lang] {
  color: rgba(0, 0, 0, 0.75);
}
.article-list article .summary code[data-lang] .kd {
  color: #BF360C;
}
.article-list article .summary code[data-lang] .k {
  color: #8A048C;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary code[data-lang] .k {
    color: #fb9efc;
  }
}
.article-list article .summary code[data-lang] .kt {
  color: #1177aa;
  font-weight: bold;
}
.article-list article .summary code[data-lang] .n,
.article-list article .summary code[data-lang] .nc {
  color: black;
}
.article-list article .summary code[data-lang] .nd {
  color: rgba(0, 0, 0, 0.5);
}
.article-list article .summary code[data-lang] .na, .article-list article .summary code[data-lang] .nc {
  font-weight: bold;
}
.article-list article .summary code[data-lang] .nt {
  color: #CC1111;
}
.article-list article .summary code[data-lang] .s, .article-list article .summary code[data-lang] .s1 {
  color: #1b8e40;
}
.article-list article .summary code[data-lang] .c, .article-list article .summary code[data-lang] .cm, .article-list article .summary code[data-lang] .cp, .article-list article .summary code[data-lang] .c1, .article-list article .summary code[data-lang] .cs {
  color: #888888;
  font-style: italic;
}
.article-list article .summary code[data-lang] .m, .article-list article .summary code[data-lang] .mb, .article-list article .summary code[data-lang] .mf, .article-list article .summary code[data-lang] .mh, .article-list article .summary code[data-lang] .mi, .article-list article .summary code[data-lang] .il, .article-list article .summary code[data-lang] .mo {
  font-weight: bold;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary code[data-lang] span {
    color: #eee;
  }
  .article-list article .summary code[data-lang] .p, .article-list article .summary code[data-lang] .o {
    color: #888;
  }
  .article-list article .summary code[data-lang] .n, .article-list article .summary code[data-lang] .nc {
    color: #ddd;
  }
}
.article-list article .summary a[href] code {
  font-weight: bold;
  background: transparent;
}
.article-list article .summary pre {
  overflow-x: auto;
  width: calc(100% + 8px * 12);
  font-size: 0.8em;
  background-color: #eee;
  padding: 16px 48px;
  margin: 16px -48px !important;
  line-height: 140%;
}
@media (max-width: 500px) {
  .article-list article .summary pre {
    padding: 16px 16px;
    margin: 16px -16px !important;
    width: calc(100% + 8px * 2);
  }
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary pre {
    background-color: #282828;
  }
}
.article-list article .summary pre code {
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}
.article-list article .summary div.language-file-indicator {
  color: rgba(0, 0, 0, 0.87);
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  margin-bottom: -16px;
  margin-top: 24px;
  margin-left: -48px;
  margin-right: -48px;
  padding-left: 32px;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary div.language-file-indicator {
    color: rgba(255, 255, 255, 0.85);
  }
}
@media (max-width: 800px) {
  .article-list article .summary div.language-file-indicator {
    padding-left: 8px;
    margin-left: -8px;
  }
}
.article-list article .summary div.language-file-indicator .indicator {
  display: inline-block;
  padding: 4px 16px;
  padding-bottom: 0;
  border-bottom: 2px solid #aaa;
  margin: 0;
  position: relative;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary div.language-file-indicator .indicator {
    border-color: #444;
  }
}
.article-list article .summary div.language-file-indicator .indicator:after {
  border: 8px solid transparent;
  border-top-color: #aaa;
  content: "";
  display: block;
  position: absolute;
  bottom: -18px;
  left: 24px;
  opacity: 0;
}
.article-list article .summary div.language-file-indicator .language {
  font-weight: bold;
}
.article-list article .summary div.language-file-indicator .file {
  color: rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary div.language-file-indicator .file {
    color: rgba(255, 255, 255, 0.4);
  }
}
.article-list article .summary ul, .article-list article .summary ol {
  margin: 24px 8px;
  padding-left: 16px;
}
.article-list article .summary ul li, .article-list article .summary ol li {
  padding-left: 1ex;
  margin-top: 4px;
}
.article-list article .summary ul ol, .article-list article .summary ol ul, .article-list article .summary ol ol, .article-list article .summary ul ul {
  margin-top: 12px;
}
.article-list article .summary .unit {
  position: relative;
  /*

      .original {
        color: $color-unit-text !important;
        box-shadow: 0 0 0 1px $color-unit;
        padding: 1px 3px;
        border-radius: 2px;
      }

      .imperial {
        position: absolute;
        top: 100%;
        left: 0;

        margin-top: 2px;

        color: $color-unit-text;
        display: table;
        background-color: $color-unit;
        box-shadow: 0 0 0 1px $color-unit-border;
        border-radius: 2px;
        padding: 0px 3px;

        pointer-events: none;
        opacity: 0;

        transition: opacity $anim-fast ease;
      }

      &:hover {
        .imperial {
          opacity: 1;
        }
      }

  */
}
.article-list article .summary .unit .original:after {
  content: " (";
  display: inline;
}
.article-list article .summary .unit .imperial:after {
  content: ")";
  display: inline;
}
.article-list article .summary section.note {
  margin: 32px -48px;
  /*
      @media(min-width: $breakpoint-tablet + 1px) {
        display: block;
        float: right;
        width: 60%;

        margin-left: $grid * 2;
        margin-right: $grid * 2;
      }
  */
}
.article-list article .summary section.note header {
  margin: 0 32px;
  margin-top: 16px;
  color: #1259a1;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary section.note header {
    color: #8cbff2;
  }
}
.article-list article .summary section.note header .title {
  display: inline-block;
  padding: 0 16px;
  font-size: 100%;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 2px solid #7db3e8;
}
.article-list article .summary section.note header .title code {
  background-color: #dbedff;
  padding: 0 8px;
  font-size: 1em;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary section.note header .title code {
    background-color: #1a334d;
  }
}
.article-list article .summary section.note .note-content {
  background-color: #e6f2ff;
  border: 0 solid #7db3e8;
  padding: 16px 48px;
  padding-top: 12px;
  color: #00264d;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary section.note .note-content {
    background-color: #204060;
    border-color: #9cb3c9;
    color: #c6d9ec;
  }
}
.article-list article .summary section.note .note-content a {
  text-decoration: underline;
  color: #00264d !important;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary section.note .note-content a {
    color: #c6d9ec !important;
  }
}
@media (max-width: 500px) {
  .article-list article .summary section.note {
    margin: 16px -32px;
  }
  .article-list article .summary section.note .note-content {
    padding-left: 32px;
    padding-right: 32px;
  }
}
.article-list article .summary a.source-link {
  margin: 16px;
  margin-left: -16px;
  margin-right: -16px;
  padding: 12px 32px;
  padding-right: 64px;
  font-size: 115%;
  font-weight: bold;
  border-radius: 3px;
  background-color: #f2f2f2;
  border: 1px solid #d9d9d9;
  position: relative;
  transition: background-color 0.1s ease, border-color 0.1s ease;
}
.article-list article .summary a.source-link:after {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  width: 48px;
  background-image: url("/img/source-arrow-right.png");
  background-size: 32px 32px;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  transition: background-position 0.15s ease;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary a.source-link:after {
    filter: invert(1);
    opacity: 0.75;
  }
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary a.source-link {
    background-color: #262626;
    border-color: #333333;
  }
}
.article-list article .summary a.source-link .pre-text, .article-list article .summary a.source-link .name {
  color: #4d4d4d;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary a.source-link .pre-text, .article-list article .summary a.source-link .name {
    color: #cccccc;
  }
}
.article-list article .summary a.source-link:hover {
  background-color: #f9f9f9;
  border-color: #e6e6e6;
}
.article-list article .summary a.source-link:hover:after {
  background-position: 25% 50%;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary a.source-link:hover {
    background-color: #333333;
    border-color: #404040;
  }
}
.article-list article .summary figure.img {
  background: white;
  margin: 16px 0;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary figure.img {
    background-color: #222;
  }
}
@media print {
  .article-list article .summary figure.img {
    display: block !important;
    break-before: avoid;
    break-after: avoid;
    break-inside: avoid;
  }
}
@media print {
  .article-list article .summary figure.img.left, .article-list article .summary figure.img.right {
    max-width: 35%;
    margin-left: 16px;
    float: right;
  }
}
.article-list article .summary figure.img figcaption {
  font-size: 12px;
  font-style: italic;
  padding: 16px 0;
  margin: 16px auto;
  padding-top: 0;
  margin-top: 0;
}
.article-list article .summary figure.img figcaption img {
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
body.loaded .article-list article .summary figure.img figcaption img {
  opacity: 1;
}
.article-list article .summary figure.img.left, .article-list article .summary figure.img.right, .article-list article .summary figure.img.small {
  max-width: 640px;
}
.article-list article .summary figure.img.full-bleed {
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 600px) {
  .article-list article .summary figure.img.full-bleed {
    margin-left: -16px;
    margin-right: -16px;
  }
}
@media (min-width: 800px) {
  .article-list article .summary figure.img.left, .article-list article .summary figure.img.right {
    padding: 16px;
    margin: 16px;
    width: calc(50% - (8px * 2));
    max-width: 50%;
  }
  .article-list article .summary figure.img.left {
    float: left;
    padding-left: 0;
    margin-left: 0;
    clear: left;
  }
  .article-list article .summary figure.img.right {
    float: right;
    padding-right: 0;
    margin-right: 0;
    clear: right;
  }
}
.article-list article .summary figure.img figcaption {
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
.article-list article .summary figure.img figcaption .credit {
  display: block;
}
@media (min-width: 1440px) {
  .article-list article .summary figure.img.left, .article-list article .summary figure.img.right {
    box-shadow: 0 2px 6.6666666667px rgba(0, 0, 0, 0.3);
    padding: 8px;
    margin: 16px 32px;
  }
  .article-list article .summary figure.img.left {
    margin-left: -256px;
    max-width: 480px;
  }
  .article-list article .summary figure.img.right {
    margin-right: -256px;
  }
}
@media (min-width: 1900px) {
  .article-list article .summary figure.img.left, .article-list article .summary figure.img.right {
    max-width: 480px;
    padding: 8px;
    margin: 16px 32px;
  }
  .article-list article .summary figure.img.left {
    margin-left: -384px;
  }
  .article-list article .summary figure.img.right {
    margin-right: -384px;
  }
}
@media (min-width: 2400px) {
  .article-list article .summary figure.img.left {
    margin-left: -460px;
  }
  .article-list article .summary figure.img.right {
    margin-right: -460px;
  }
}
.article-list article .summary figure.sequence {
  margin: 48px 0;
}
.article-list article .summary figure.sequence .images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.article-list article .summary figure.sequence .images img {
  flex: 1;
  display: inline-block;
  max-width: 128px !important;
}
@media (min-width: 750px) {
  .article-list article .summary figure.sequence .images img {
    margin: 0 16px;
  }
}
.article-list article .summary figure.sequence figcaption {
  font-size: 12px;
  font-style: italic;
  text-align: center;
}
.article-list article .summary figure.sequence > figcaption {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
}
.article-list article .summary table {
  margin: 32px auto;
  box-sizing: content-box;
  border-collapse: collapse;
}
.article-list article .summary table th, .article-list article .summary table td {
  border: none;
  padding: 4px 16px;
  vertical-align: top;
}
.article-list article .summary table th {
  border-bottom: 2px solid #e6e6e6;
  font-weight: bold;
  padding: 8px 16px;
  white-space: nowrap;
}
.article-list article .summary table td:first-child, .article-list article .summary table th:first-child {
  border-left: none;
}
.article-list article .summary table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 800px) {
  .article-list article .summary table th, .article-list article .summary table td {
    padding-left: 8px;
    padding-right: 8px;
  }
}
.article-list article .summary table :first-child {
  margin-top: 0;
}
.article-list article .summary table :last-child {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .article-list article .summary {
    padding: 16px 16px !important;
  }
}
.article-list article .summary img, .article-list article .summary figure {
  display: none;
}
.article-list article .summary .read-more {
  display: block;
  color: #dd6644;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 1em;
}
.article-list article .summary .read-more .reading-time {
  color: rgba(0, 0, 0, 0.54);
  font-weight: normal;
  text-transform: none;
  margin-left: 1ex;
}
@media (prefers-color-scheme: dark) {
  .article-list article .summary .read-more .reading-time {
    color: rgba(255, 255, 255, 0.75);
  }
}
.article-list article .meta {
  justify-content: center;
}
.article-list article .meta .categories {
  background: transparent;
}
.article-list article .meta .tags {
  display: none;
}
.article-list article + article {
  margin-top: 16px;
}

.next-prev {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}
.next-prev .pages {
  padding: 0 16px;
  text-align: center;
}
.next-prev .pages .page {
  display: inline-block;
}
.next-prev .pages .page a {
  font-size: 12px;
  border-radius: 100%;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 4px;
  padding: 0 0;
}
.next-prev .pages .page.active a {
  font-size: 14px;
  background-color: white;
  color: #242424;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 4px 0;
}
.next-prev a {
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
  display: block;
  height: 48px;
  line-height: 48px;
  padding: 0 32px;
}
.next-prev a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.next-prev a.hidden {
  pointer-events: none;
  opacity: 0.2;
}

main.list-app > .headline,
main.list-article > .headline,
main.list-infographic > .headline,
main.list-post > .headline,
main.list-project > .headline {
  display: none !important;
}

.article-list article.art .body,
.article-list article.infographic .body {
  padding-top: 8px;
  display: flex;
  flex-direction: row;
}
.article-list article.art .image a,
.article-list article.infographic .image a {
  display: block;
}
.article-list article.art .image img,
.article-list article.infographic .image img {
  background-color: white;
  display: block;
  max-width: 480px;
}
@media (max-width: 900px) {
  .article-list article.art .image img,
.article-list article.infographic .image img {
    max-width: 320px;
  }
}
@media (max-width: 700px) {
  .article-list article.art .body,
.article-list article.infographic .body {
    flex-direction: column;
    align-items: stretch;
  }
  .article-list article.art .image, .article-list article.art .image a, .article-list article.art .image img,
.article-list article.infographic .image,
.article-list article.infographic .image a,
.article-list article.infographic .image img {
    width: 100%;
    text-align: center;
  }
  .article-list article.art .image img,
.article-list article.infographic .image img {
    max-width: 480px;
  }
}

body.no-js main.article-list article .headline .publish-time,
body.loaded main.article-list article .headline .publish-time {
  opacity: 1 !important;
}

/*
  transform: translateY(-$offset);
  opacity: 0;

  @at-root body.loaded  {
    opacity: 1;
    transform: translateY(0);
  }

}
*/
/*
  transform: translateY(-$offset);
  opacity: 0;

  @at-root body.loaded  {
    opacity: 1;
    transform: translateY(0);
  }

}
*/
/* Black theme */
/*
$color-page-background: #000;
*/
#page-header {
  user-select: none;
  z-index: 1000;
  color: blue;
  width: 100%;
  height: 64px;
  background-color: #000;
  box-shadow: 0 -100px 8px 100px rgba(0, 0, 0, 0.7), 0 -100px 20px 100px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: row;
  align-items: center;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#page-header .container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
}
#page-header .container .toggle-nav {
  display: none;
}
#page-header .container .home-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 48px;
  padding-left: 8px;
  padding-right: 8px;
  transition: background-color 0.15s ease;
}
#page-header .container .home-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
#page-header .container .home-link .logo {
  height: 32px;
  position: relative;
}
#page-header .container .home-link .title {
  background: url("/img/header-logo-text.png") no-repeat;
  background-size: 112px 48px;
  user-select: none;
  color: transparent;
  width: 112px;
  height: 48px;
  margin-left: 8px;
}
@media (false: dark) {
  body.story #page-header .container .home-link .title {
    background-image: url("/img/header-logo-text-dark.png");
  }
}
#page-header .container nav {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#page-header .container nav ul {
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: center;
  margin-left: 32px;
}
#page-header .container nav ul li {
  list-style-type: none;
  display: block;
}
#page-header .container nav ul li a {
  border-width: 0px;
  border-style: solid;
  border-color: transparent;
  transition: border-color 1s ease !important, border-width 1s ease !important;
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  transition: background-color 0.15s ease;
}
#page-header .container nav ul li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
#page-header .container nav ul li a span {
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.54);
}
body.story #page-header .container nav ul li a span {
  color: rgba(0, 0, 0, 0.54);
}
@media (prefers-color-scheme: dark) {
  body.story #page-header .container nav ul li a span {
    color: rgba(255, 255, 255, 0.54);
  }
}
#page-header .container nav ul.right {
  float: right;
}

body:not(.story) #page-header.expanded, body.story #page-header {
  background-color: transparent;
  height: 128px;
  box-shadow: none;
}

@media (min-width: 751px) {
  body.story #page-header {
    position: static;
    margin-bottom: -128px;
  }
}

body.loaded #page-header {
  opacity: 1;
  transition: opacity 0.2s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

body.hero #page-header {
  position: fixed !important;
  width: 100%;
  top: 0;
  left: 0;
}
body.hero #page-header.expanded {
  background-color: transparent;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

@media (max-width: 900px) {
  #page-header .container .home-link .title {
    display: none;
  }
}
body.mini-header #page-header {
  background-color: transparent;
  height: 32px;
  opacity: 0.5;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}
body.mini-header #page-header .home-link {
  height: 32px;
}
body.mini-header #page-header .home-link .logo {
  height: 24px;
}
body.mini-header #page-header .home-link .title {
  display: none;
}
body.mini-header #page-header nav ul li a {
  height: 32px;
  line-height: 32px;
}
body.mini-header #page-header nav ul li a span {
  font-size: 12px;
}
body.mini-header #page-header:hover {
  background-color: #242424;
  opacity: 1;
}

@media (max-width: 750px) {
  #page-header {
    position: static !important;
    background-color: #242424 !important;
    height: auto !important;
    margin-bottom: 16px !important;
  }
  body.story #page-header {
    background-color: #fff !important;
  }
  #page-header .container {
    padding: 0;
    flex-direction: column !important;
    align-items: flex-start;
    height: 64px;
  }
  body.story #page-header .container {
    box-shadow: 0 2px 0 0 #ddd;
  }
  #page-header .container .toggle-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    transition: background-color 0.15s ease;
  }
  #page-header .container .toggle-nav img {
    display: block;
    width: 24px;
    height: 24px;
    transition: transform 0.15s ease;
  }
  #page-header .container .home-link {
    height: 64px;
    justify-content: center;
    width: 100%;
  }
  #page-header .container .home-link .title {
    display: block;
  }
  #page-header .container nav {
    background-color: #242424;
    flex-direction: column !important;
    align-items: flex-start;
    position: absolute;
    top: 64px;
    left: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
  }
  body.story #page-header .container nav {
    background-color: #fff;
  }
  #page-header .container nav ul {
    border-top: 2px solid #444;
    margin-left: 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  body.story #page-header .container nav ul {
    border-color: #ddd;
  }
  #page-header .container nav ul li {
    width: 100%;
  }
  #page-header .container nav ul li a {
    border-width: 0;
    height: 48px;
    line-height: 48px;
    width: 100%;
  }
  body.story #page-header .container nav ul li a {
    color: black;
  }
}
body.no-js .toggle-nav img,
#page-header.nav-visible .toggle-nav img {
  transform: rotate(180deg);
}
body.no-js nav,
#page-header.nav-visible nav {
  max-height: 392px !important;
}

body.no-js #page-header {
  background: #000 !important;
  box-shadow: 0 -100px 8px 100px rgba(0, 0, 0, 0.7), 0 -100px 20px 100px rgba(0, 0, 0, 0.5);
  height: auto !important;
  min-height: 80px !important;
}
body.no-js #page-header .toggle-nav {
  display: none;
}
body.no-js #page-header nav {
  position: static;
}
body.no-js #page-header .container {
  height: auto;
}

#page-header nav ul li a:hover {
  border-width: 0 0 2px 0;
}
@media (max-width: 750px) {
  #page-header nav ul li a:hover {
    border-width: 0;
  }
}
#page-header nav ul li a:hover span {
  color: white;
}

body[data-title=Apps] #page-header nav ul li.link-apps a,
body[data-title=Art] #page-header nav ul li.link-art a,
body[data-title=Articles] #page-header nav ul li.link-articles a,
body[data-title=Infographics] #page-header nav ul li.link-infographics a,
body[data-title=Posts] #page-header nav ul li.link-posts a,
body[data-title=Projects] #page-header nav ul li.link-projects a,
body[data-title="About Me"] #page-header nav ul li.link-about a,
body[data-section=app] #page-header nav ul li.link-apps a,
body[data-section=art] #page-header nav ul li.link-art a,
body[data-section=article] #page-header nav ul li.link-articles a,
body[data-section=infographic] #page-header nav ul li.link-infographics a,
body[data-section=post] #page-header nav ul li.link-posts a,
body[data-section=project] #page-header nav ul li.link-projects a {
  border-width: 0 0 4px 0;
}
@media (max-width: 750px) {
  body[data-title=Apps] #page-header nav ul li.link-apps a,
body[data-title=Art] #page-header nav ul li.link-art a,
body[data-title=Articles] #page-header nav ul li.link-articles a,
body[data-title=Infographics] #page-header nav ul li.link-infographics a,
body[data-title=Posts] #page-header nav ul li.link-posts a,
body[data-title=Projects] #page-header nav ul li.link-projects a,
body[data-title="About Me"] #page-header nav ul li.link-about a,
body[data-section=app] #page-header nav ul li.link-apps a,
body[data-section=art] #page-header nav ul li.link-art a,
body[data-section=article] #page-header nav ul li.link-articles a,
body[data-section=infographic] #page-header nav ul li.link-infographics a,
body[data-section=post] #page-header nav ul li.link-posts a,
body[data-section=project] #page-header nav ul li.link-projects a {
    border-width: 0 0 0 8px;
  }
}
body[data-title=Apps] #page-header nav ul li.link-apps a span,
body[data-title=Art] #page-header nav ul li.link-art a span,
body[data-title=Articles] #page-header nav ul li.link-articles a span,
body[data-title=Infographics] #page-header nav ul li.link-infographics a span,
body[data-title=Posts] #page-header nav ul li.link-posts a span,
body[data-title=Projects] #page-header nav ul li.link-projects a span,
body[data-title="About Me"] #page-header nav ul li.link-about a span,
body[data-section=app] #page-header nav ul li.link-apps a span,
body[data-section=art] #page-header nav ul li.link-art a span,
body[data-section=article] #page-header nav ul li.link-articles a span,
body[data-section=infographic] #page-header nav ul li.link-infographics a span,
body[data-section=post] #page-header nav ul li.link-posts a span,
body[data-section=project] #page-header nav ul li.link-projects a span {
  color: white;
  font-weight: bold;
}

body.story[data-title=Apps] #page-header nav ul li.link-apps a span,
body.story[data-title=Art] #page-header nav ul li.link-art a span,
body.story[data-title=Articles] #page-header nav ul li.link-articles a span,
body.story[data-title=Infographics] #page-header nav ul li.link-infographics a span,
body.story[data-title=Posts] #page-header nav ul li.link-posts a span,
body.story[data-title=Projects] #page-header nav ul li.link-projects a span,
body.story[data-title="About Me"] #page-header nav ul li.link-about a span,
body.story[data-section=app] #page-header nav ul li.link-apps a span,
body.story[data-section=art] #page-header nav ul li.link-art a span,
body.story[data-section=article] #page-header nav ul li.link-articles a span,
body.story[data-section=infographic] #page-header nav ul li.link-infographics a span,
body.story[data-section=post] #page-header nav ul li.link-posts a span,
body.story[data-section=project] #page-header nav ul li.link-projects a span {
  color: rgba(0, 0, 0, 0.87);
}
@media (prefers-color-scheme: dark) {
  body.story[data-title=Apps] #page-header nav ul li.link-apps a span,
body.story[data-title=Art] #page-header nav ul li.link-art a span,
body.story[data-title=Articles] #page-header nav ul li.link-articles a span,
body.story[data-title=Infographics] #page-header nav ul li.link-infographics a span,
body.story[data-title=Posts] #page-header nav ul li.link-posts a span,
body.story[data-title=Projects] #page-header nav ul li.link-projects a span,
body.story[data-title="About Me"] #page-header nav ul li.link-about a span,
body.story[data-section=app] #page-header nav ul li.link-apps a span,
body.story[data-section=art] #page-header nav ul li.link-art a span,
body.story[data-section=article] #page-header nav ul li.link-articles a span,
body.story[data-section=infographic] #page-header nav ul li.link-infographics a span,
body.story[data-section=post] #page-header nav ul li.link-posts a span,
body.story[data-section=project] #page-header nav ul li.link-projects a span {
    color: #fff;
  }
}

#page-header nav ul li.link-apps a {
  border-color: #8BC34A;
}

#page-header nav ul li.link-art a {
  border-color: #FFF;
}

#page-header nav ul li.link-articles a {
  border-color: #C33;
}

#page-header nav ul li.link-infographics a {
  border-color: #009688;
}

#page-header nav ul li.link-posts a {
  border-color: #dd6644;
}

#page-header nav ul li.link-projects a {
  border-color: #607D8B;
}

#page-header nav ul li.link-about a {
  border-color: white;
}

@media print {
  #page-header {
    display: none;
  }
}
/* Black theme */
/*
$color-page-background: #000;
*/
/* Black theme */
/*
$color-page-background: #000;
*/
#footer {
  z-index: 100;
  margin-top: 64px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
body.story #footer {
  color: rgba(0, 0, 0, 0.54);
}
@media (prefers-color-scheme: dark) {
  body.story #footer {
    color: rgba(255, 255, 255, 0.75);
  }
}
#footer > .container {
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 16px;
}
body.story #footer > .container {
  border-color: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  #footer > .container {
    border-color: #444 !important;
  }
}
#footer > .container a {
  text-decoration: underline;
}
#footer > .container a:hover {
  color: white;
}
#footer > .container > * {
  flex: 0 0 33%;
}
#footer > .container .donate {
  text-align: center;
  font-weight: bold;
}
#footer > .container .donate a {
  background-color: #FFC107;
  display: block;
  color: #242424;
  font-weight: bold;
  text-transform: uppercase;
  padding: 8px 16px;
  transition: background-color 0.15s ease;
  font-size: 14px;
  padding: 8px 16px;
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
#footer > .container .donate a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
body.story #footer > .container .donate a {
  background-color: transparent;
  color: #FFC107;
}
#footer > .container .donate a:hover {
  background-color: #ffce3a;
  text-decoration: underline;
}
#footer > .container .donate-thanks {
  display: none;
  text-align: center;
}
#footer > .container .contact {
  text-align: right;
}
@media (max-width: 600px) {
  #footer > .container {
    border-top: none;
    background-color: #242424;
  }
  body.story #footer > .container {
    background-color: transparent;
  }
}
@media (max-width: 800px) {
  #footer > .container {
    flex-direction: column;
  }
  #footer > .container > * {
    margin: 8px 0;
  }
}
@media (max-width: 600px) {
  #footer {
    margin-top: 16px;
  }
}

@media print {
  #footer .donate, #footer .donate-thanks, #footer .contact {
    display: none;
  }
}
#page-background {
  position: absolute;
  width: 100% !important;
}
#page-background img {
  position: relative;
  object-fit: cover;
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#page-background:after {
  background: linear-gradient(to bottom, transparent, rgba(36, 36, 36, 0.1), rgba(36, 36, 36, 0.25), rgba(36, 36, 36, 0.4), rgba(36, 36, 36, 0.6), rgba(36, 36, 36, 0.75), rgba(36, 36, 36, 0.88), rgba(36, 36, 36, 0.95), #242424);
  display: block;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 20vh;
}
@media (max-width: 1100px) {
  #page-background {
    display: none;
  }
}

body.loaded #page-background {
  position: fixed;
}
body.loaded #page-background img {
  opacity: 1;
}

body.story #page-background:after {
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.95), #fff) !important;
}

#hero {
  z-index: 10;
  width: 100%;
  min-height: 20em;
  height: 100vh;
  margin: 0 auto;
  margin-bottom: -160px;
}
@media (max-width: 900px) {
  #hero {
    padding-top: 0;
    height: 125vw;
    max-height: 95vh;
    margin-bottom: 16px;
  }
}
#hero .hero-contents {
  box-shadow: 0 0 64px rgba(0, 0, 0, 0.6);
  background-color: #ddd;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-bottom: 32px;
}
@media (max-width: 750px) {
  #hero .hero-contents {
    box-shadow: none;
  }
}
#hero .hero-contents .spacer {
  height: 96px;
}
#hero .hero-contents .message-box {
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#hero .hero-contents .message-box .message {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 16px;
  margin: 4px 0;
}
#hero .hero-contents .message-box .message.large {
  font-size: 32px;
  padding: 16px 24px;
}
#hero .hero-contents .message-box .message.small {
  background-color: #242424;
  font-style: italic;
}
#hero .hero-contents .message-box a.message:hover {
  text-decoration: underline;
}
#hero .hero-contents .message-box .message.large {
  padding-right: 64px;
  background-image: url("/img/source-arrow-right.png");
  background-size: 32px;
  background-position: 100% 50%;
  background-position: calc(100% - 16px) 50%;
  background-repeat: no-repeat;
  transition: background-color 0.1s ease, border-color 0.1s ease, background-position 0.15s ease;
}
#hero .hero-contents .message-box .message.large:hover {
  background-color: #f9f9f9;
  border-color: #e6e6e6;
  background-position: calc(100% - 12px) 50%;
}
#hero .hero-contents .title {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
  color: white;
  font-size: 32px;
  font-weight: bold;
  text-decoration: underline;
  display: inline-block;
  padding: 32px;
  padding-top: 128px;
}

#hero.message-bottom .hero-contents {
  justify-content: flex-end !important;
}
#hero.message-bottom .hero-contents .message-box {
  margin-bottom: 64px;
  padding-bottom: 4vh;
}
@media (max-width: 750px) {
  #hero.message-bottom .hero-contents .message-box {
    margin-bottom: 32px;
    padding-bottom: 0;
  }
}

#hero.apps .message {
  background-color: #8BC34A;
}

#hero.art .message:not(.small) {
  background-color: #FFF;
  color: #242424 !important;
}

#hero.articles .message {
  background-color: #C33;
}

#hero.infographics .message {
  background-color: #009688;
}

#hero.posts .message {
  background-color: #dd6644;
}

#hero.projects .message {
  background-color: #607D8B;
}

body[data-title=Donate] #footer .container .donate {
  display: none;
}
body[data-title=Donate] #footer .container .donate-thanks {
  display: block;
}
body[data-title=Donate] .content blockquote {
  margin: 16px !important;
  padding: 0 !important;
  margin-top: 32px !important;
  border-left: none !important;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
body[data-title=Donate] .content blockquote strong {
  background-color: #f4f4f4;
  display: block;
  color: #242424;
  font-weight: bold;
  text-transform: uppercase;
  padding: 8px 16px;
  transition: background-color 0.15s ease;
  color: #242424 !important;
  font-size: 24px;
  padding: 16px 32px;
  margin: 8px 16px;
  display: inline-block;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
body[data-title=Donate] .content blockquote strong:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
body[data-title=Donate] .content blockquote a strong {
  background-color: #FFC107;
}
body[data-title=Donate] .content blockquote a:hover strong {
  background-color: #ffce3a;
  text-decoration: underline;
}

html {
  height: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  min-height: 100%;
  background-color: #242424;
}
@media (max-width: 750px) {
  body {
    background-color: #111;
  }
}
body.story {
  background-color: #fff;
}
@media (prefers-color-scheme: dark) {
  body.story {
    background-color: #1a1a1a;
  }
}

@media print {
  body.story {
    background-color: none;
  }
}
main {
  z-index: 20;
  color: rgba(0, 0, 0, 0.87);
  margin: 0 16px;
  flex: 1;
  margin-left: auto;
  margin-right: auto;
  max-width: 1024px;
  width: 100%;
  transition: transform 0.3s ease, opacity 0.8s ease;
  margin-top: 128px;
}
@media (prefers-color-scheme: dark) {
  main {
    color: rgba(255, 255, 255, 0.85);
  }
}
@media (max-width: 750px) {
  main {
    margin-top: 0;
  }
}
main > .headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 32px;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  margin-left: 32px;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  main > .headline {
    margin-left: 16px;
  }
}
main > .headline.taxonomy .title {
  text-transform: none;
  font-family: "Roboto Mono", monospace;
  font-weight: normal;
  padding-bottom: 0.3ex;
}
body.story main > .headline.taxonomy .title {
  color: rgba(0, 0, 0, 0.87);
}
main > .headline .taxonomy {
  background-color: #333;
  border: 3px solid rgba(255, 255, 255, 0.5);
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  padding: 8px 16px;
  margin-right: 24px;
}
@media (max-width: 600px) {
  main > .headline .taxonomy {
    padding: 8px;
    margin-right: 16px;
  }
}

@media (min-width: 1100px) {
  body.hero-background:not(.hero-compressed) main {
    margin-top: 60vh;
  }
}

/*# sourceMappingURL=style.css.map */