* {
  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);
  }

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

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

}
*/
#page-header {
  user-select: none;
  z-index: 1000;
  color: blue;
  width: 100%;
  height: 64px;
  background-color: #303030;
  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;
}
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);
}
#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: #f4f4f4 !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: #f4f4f4;
  }
  #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 !important;
  }
}
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: #303030 !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);
}

#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;
}

main.article article {
  /*
    .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;
}
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;
}
body.story main.article article .headline .title {
  color: rgba(0, 0, 0, 0.87);
}
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 .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 (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 .body {
  background-color: white;
  box-shadow: 0 0 64px black;
}
body.story main.article article .body {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
main.article article .actions,
main.article article .content,
main.article article .attribution,
main.article article .patreon-link,
main.article article .license {
  padding: 32px 32px;
  line-height: 1.8em;
}
main.article article .actions * + p,
main.article article .content * + p,
main.article article .attribution * + p,
main.article article .patreon-link * + p,
main.article article .license * + 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: 16px 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 {
  border-left: 4px solid rgba(0, 0, 0, 0.3);
  margin: 32px 8px;
  margin-right: 0;
  padding: 16px 24px;
  padding-right: 0;
}
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: 2em;
  margin-bottom: 1ex;
}
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: 20px;
}
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 .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 {
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  border-radius: 2px;
  background-color: #eee;
  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: #4A148C;
}
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: #1B5E20;
}
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: rgba(191, 117, 80, 0.8);
}
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;
}
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 * 4);
  font-size: 0.8em;
  background-color: #eee;
  padding: 16px 48px;
  margin: 16px -32px !important;
  line-height: 140%;
}
@media (max-width: 800px) {
  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 32px;
  }
}
@media (max-width: 600px) {
  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);
  }
}
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.7);
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  margin-bottom: -16px;
  margin-top: 24px;
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
}
@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;
  border-bottom: 2px solid #aaa;
  margin: 0;
  position: relative;
}
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);
}
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: 16px 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;
}
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 aside.note,
main.article article .content aside.note,
main.article article .attribution aside.note,
main.article article .patreon-link aside.note,
main.article article .license aside.note {
  margin: 16px -8px;
  background-color: #fff5cc;
  border: 1px solid #ffeb99;
  border-radius: 2px;
  padding: 16px;
  color: #4d3d00;
  /*
  @media(min-width: $breakpoint-tablet + 1px) {
    display: block;
    float: right;
    width: 60%;

    margin-left: $grid * 2;
    margin-right: $grid * 2;
  }
  */
}
main.article article .actions aside.note header,
main.article article .content aside.note header,
main.article article .attribution aside.note header,
main.article article .patreon-link aside.note header,
main.article article .license aside.note header {
  margin-bottom: -16px;
}
main.article article .actions aside.note header .title,
main.article article .content aside.note header .title,
main.article article .attribution aside.note header .title,
main.article article .patreon-link aside.note header .title,
main.article article .license aside.note header .title {
  font-size: 100%;
  font-weight: bold;
  text-transform: uppercase;
}
@media (max-width: 750px) {
  main.article article .actions aside.note,
main.article article .content aside.note,
main.article article .attribution aside.note,
main.article article .patreon-link aside.note,
main.article article .license aside.note {
    margin: 16px -16px;
  }
}
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;
  padding: 16px 0;
  margin: 16px auto;
}
main.article article .actions figure.img img,
main.article article .content figure.img img,
main.article article .attribution figure.img img,
main.article article .patreon-link figure.img img,
main.article article .license figure.img img {
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
body.loaded main.article article .actions figure.img img,
body.loaded main.article article .content figure.img img,
body.loaded main.article article .attribution figure.img img,
body.loaded main.article article .patreon-link figure.img img,
body.loaded main.article article .license figure.img 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: 320px;
  }
  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 :first-child,
main.article article .content :first-child,
main.article article .attribution :first-child,
main.article article .patreon-link :first-child,
main.article article .license :first-child {
  margin-top: 0;
}
main.article article .actions :last-child,
main.article article .content :last-child,
main.article article .attribution :last-child,
main.article article .patreon-link :last-child,
main.article article .license :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;
}
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;
  }
}
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;
}
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;
     }

   }
  */
}
body.story article .meta {
  background-color: transparent;
  border-top: 1px solid #f2f2f2;
  padding: 16px 0;
}
article .meta ul {
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 32px;
  flex-wrap: wrap;
}
body.story article .meta ul {
  background-color: transparent;
}
article .meta ul.tags {
  border-top: 4px solid #fff;
  font-family: "Roboto Mono", monospace;
}
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;
}
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;
  }
}
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;
}

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;
}

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);
}
.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;
}
.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;
}
.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 (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;
}
.article-list article .summary {
  line-height: 1.8em;
  padding: 16px 32px;
}
.article-list article .summary * + 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: 16px auto;
  padding-left: 2em;
  letter-spacing: 2em;
}
.article-list article .summary blockquote {
  border-left: 4px solid rgba(0, 0, 0, 0.3);
  margin: 32px 8px;
  margin-right: 0;
  padding: 16px 24px;
  padding-right: 0;
}
.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: 2em;
  margin-bottom: 1ex;
}
.article-list article .summary h1 {
  font-size: 24px;
  font-weight: bold;
}
.article-list article .summary h2 {
  font-size: 20px;
}
.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 .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 {
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  border-radius: 2px;
  background-color: #eee;
  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: #4A148C;
}
.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: #1B5E20;
}
.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: rgba(191, 117, 80, 0.8);
}
.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;
}
.article-list article .summary a[href] code {
  font-weight: bold;
  background: transparent;
}
.article-list article .summary pre {
  overflow-x: auto;
  width: calc(100% + 8px * 4);
  font-size: 0.8em;
  background-color: #eee;
  padding: 16px 48px;
  margin: 16px -32px !important;
  line-height: 140%;
}
@media (max-width: 800px) {
  .article-list article .summary pre {
    padding: 16px 32px;
  }
}
@media (max-width: 600px) {
  .article-list article .summary pre {
    padding: 16px 16px;
    margin: 16px -16px !important;
    width: calc(100% + 8px * 2);
  }
}
.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.7);
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  margin-bottom: -16px;
  margin-top: 24px;
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 32px;
}
@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;
  border-bottom: 2px solid #aaa;
  margin: 0;
  position: relative;
}
.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);
}
.article-list article .summary ul, .article-list article .summary ol {
  margin: 16px 8px;
  padding-left: 16px;
}
.article-list article .summary ul li, .article-list article .summary ol li {
  padding-left: 1ex;
}
.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 aside.note {
  margin: 16px -8px;
  background-color: #fff5cc;
  border: 1px solid #ffeb99;
  border-radius: 2px;
  padding: 16px;
  color: #4d3d00;
  /*
  @media(min-width: $breakpoint-tablet + 1px) {
    display: block;
    float: right;
    width: 60%;

    margin-left: $grid * 2;
    margin-right: $grid * 2;
  }
  */
}
.article-list article .summary aside.note header {
  margin-bottom: -16px;
}
.article-list article .summary aside.note header .title {
  font-size: 100%;
  font-weight: bold;
  text-transform: uppercase;
}
@media (max-width: 750px) {
  .article-list article .summary aside.note {
    margin: 16px -16px;
  }
}
.article-list article .summary figure.img {
  background: white;
  padding: 16px 0;
  margin: 16px auto;
}
.article-list article .summary figure.img img {
  width: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
body.loaded .article-list article .summary figure.img 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: 320px;
  }
  .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 :first-child {
  margin-top: 0;
}
.article-list article .summary :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;
}
.article-list article .meta {
  justify-content: center;
}
.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);
  }

}
*/
#page-header {
  user-select: none;
  z-index: 1000;
  color: blue;
  width: 100%;
  height: 64px;
  background-color: #303030;
  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;
}
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);
}
#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: #f4f4f4 !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: #f4f4f4;
  }
  #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 !important;
  }
}
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: #303030 !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);
}

#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;
}

#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);
}
#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);
}
#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;
  }
}

#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(244, 244, 244, 0.1), rgba(244, 244, 244, 0.25), rgba(244, 244, 244, 0.4), rgba(244, 244, 244, 0.6), rgba(244, 244, 244, 0.75), rgba(244, 244, 244, 0.88), rgba(244, 244, 244, 0.95), #f4f4f4) !important;
}

#hero {
  z-index: 10;
  width: 100%;
  min-height: 20em;
  height: 100vh;
  margin: 0 auto;
  margin-bottom: -224px;
}
@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%;
}
@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 .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;
  padding-bottom: 1em;
}
#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: "Roboto", sans-serif;
  font-size: 14px;
  min-height: 100%;
  background-color: #242424;
}
@media (max-width: 750px) {
  body {
    background-color: #111;
  }
}
body.story {
  background-color: #f4f4f4;
}

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 (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 */