/* source-sans-pro-200 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local(""), url("/static/style/fonts/sans_200: font/woff2") format("woff2"), url("/static/style/fonts/sans_200: font/woff") format("woff"); }

/* source-sans-pro-regular - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/static/style/fonts/sans_400: font/woff2") format("woff2"), url("/static/style/fonts/sans_400: font/woff") format("woff"); }

/* source-sans-pro-italic - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local(""), url("/static/style/fonts/sans_400i: font/woff2") format("woff2"), url("/static/style/fonts/sans_400i: font/woff") format("woff"); }

/* source-sans-pro-600 - latin-ext_latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  src: local(""), url("/static/style/fonts/sans_600: font/woff2") format("woff2"), url("/static/style/fonts/sans_600: font/woff") format("woff"); }

/* source-code-pro-regular - latin */
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/static/style/fonts/code_400: font/woff2") format("woff2"), url("/static/style/fonts/code_400: font/woff") format("woff"); }

:root {
  --white:        #ffffff;
  --gray-bright:  #eeeeee;
  --gray-dark:    #303336;
  --gray-darker:  #1d1f21;
  --gray-neutral: #b9bdc1;
  --gray-success: #bdddc1;
  --gray-fail:    #ddbdc1;
  --margin-wide: 2rem; }
  @media only screen and (max-width: 425px) {
    :root {
      --margin-wide: 0.5rem; } }
* {
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  font-family: 'Source Sans Pro'; }

body, html, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: bold; }

h1 {
  font-size: 1.6em; }

h2 {
  font-size: 1.4em; }

h3 {
  font-size: 1.17em; }

h4, h5, h6 {
  font-size: 1em; }

input, select, button {
  color: initial; }
  input:disabled, select:disabled, button:disabled {
    color: graytext; }

tt, code, kbd, samp {
  font-family: 'Source Code Pro', monospace; }

b, strong {
  font-weight: bold; }

em, i {
  font-style: italic; }

hr {
  clear: both; }

ul {
  margin: 0;
  padding-inline-start: 2em; }

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em; }

sub {
  top: 0.4em; }

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #eeeeee;
  font-family: sans-serif;
  min-height: 100vh; }

a {
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: filter 500ms, text-decoration-color 500ms; }
  a:hover {
    filter: invert(40%);
    text-decoration-color: currentColor; }

ol.toc li > a {
  font-weight: normal; }

ol.toc li.active > a {
  font-weight: bold; }

::selection {
  background: #303336;
  color: #eeeeee;
  padding: 1em; }

header > div {
  font-family: 'Source Sans Pro', sans-serif;
  padding: 1rem 2rem;
  text-align: right;
  color: #eeeeee;
  background: #303336; }
  header > div h1 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    line-height: 5rem;
    font-size: 4rem;
    font-weight: 200; }
    header > div h1 > span {
      margin-left: auto; }
    header > div h1 .bold {
      font-weight: 400; }
    header > div h1 > a {
      height: 5rem; }
    @media only screen and (max-width: 425px) {
      header > div h1 {
        font-size: 2rem;
        line-height: 5rem; } }
    header > div h1 .sun {
      height: 100%;
      stroke: currentColor;
      fill: currentColor; }
      header > div h1 .sun .out, header > div h1 .sun .in {
        animation: spin 2s;
        animation-iteration-count: 1;
        transform: scale(1); }
      header > div h1 .sun .in {
        animation: size 2s; }
      header > div h1 .sun.spin .circle {
        animation: none; }

header aside {
  margin: 0;
  padding: 0 2rem;
  color: #eeeeee;
  background: #1d1f21;
  line-height: 3em; }
  header aside > a {
    margin-right: 2em; }

@keyframes spin {
  0% {
    transform: rotate3d(0.5, 1, 0, 0turn); }
  100% {
    transform: rotate3d(0.5, 1, 0, 1turn); } }

@keyframes size {
  0%, 100% {
    transform: scale(1); }
  40%, 60% {
    transform: scale(1.8); } }

footer {
  display: flex;
  padding: 1rem 1.5rem;
  height: 1rem;
  position: sticky;
  bottom: 0;
  color: #eeeeee;
  background: #303336;
  line-height: 1rem; }
  @media only screen and (min-width: 426px) and (max-width: 767px) {
    footer {
      position: initial; } }
  @media only screen and (max-width: 425px) {
    footer {
      position: initial; } }
  @media print {
    footer {
      position: absolute;
      display: none; } }
  footer > * {
    margin: 0 0.5rem; }
  footer .license {
    align-self: end; }
  footer .icons {
    display: flex; }
    footer .icons .iconlink {
      filter: invert(0.7); }
      footer .icons .iconlink:hover {
        filter: invert(1); }
      footer .icons .iconlink > img {
        height: 1em;
        margin-left: 0.5em;
        vertical-align: middle; }

.view {
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
  max-width: calc(100vw - 1rem); }
  .view .error-wrap {
    flex: 0 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    color: var(--gray-darker);
    background: var(--gray-fail); }
    .view .error-wrap.empty {
      display: none; }
    .view .error-wrap > span {
      display: inline-block;
      margin-bottom: 0.5em;
      font-weight: bold;
      color: #f00; }
    .view .error-wrap > pre {
      margin: 0; }

.content {
  flex: 1 0 auto;
  overflow: auto;
  padding: 1em 2em;
  margin: 0 1em;
  align-self: flex-start;
  min-width: 30vw;
  background: var(--white);
  position: relative; }
  .content img, .content video {
    width: inherit;
    height: inherit; }
  .content ul, .content ol {
    break-before: avoid-page;
    break-inside: avoid-page; }
  .content .wide.markdown,
  .content .wide .markdown {
    max-width: max-content; }
  .content .markdown {
    position: relative;
    max-width: 860px;
    text-align: justify; }
    .content .markdown > blockquote {
      border-style: solid;
      border-width: 0 0 0 0.6rem;
      border-radius: 0 6px 6px 0;
      line-height: normal;
      margin: 1rem var(--margin-wide);
      padding: 1rem;
      background: var(--gray-bright);
      border-color: var(--gray-neutral); }
  .content p {
    orphans: 6;
    widows: 6; }
  .content .markdown p,
  .content .markdown > p p,
  .content .markdown > p > a p {
    max-width: 100%; }
  .content .markdown > img, .content .markdown > video,
  .content .markdown > p > img,
  .content .markdown > p > video,
  .content .markdown > p > a > img,
  .content .markdown > p > a > video {
    display: block;
    max-width: 100%;
    max-height: 50vh;
    padding: 0 2em;
    box-sizing: border-box; }
  .content .markdown h2 + p,
  .content .markdown h3 + p,
  .content .markdown h4 + p,
  .content .markdown h5 + p,
  .content .markdown h6 + p {
    margin-top: 0.2em; }
  .content .markdown > ul, .content .markdown > ol {
    margin-block-end: 1em;
    text-align: none; }
    .content .markdown > ul li > p:first-child, .content .markdown > ol li > p:first-child {
      margin-top: 0; }
    .content .markdown > ul li > p:last-child, .content .markdown > ol li > p:last-child {
      margin-bottom: 0; }
  .content .embed {
    display: block;
    width: 100%;
    break-inside: avoid-page;
    line-height: normal; }
    .content .embed .description {
      text-align: center; }
    .content .embed.inline {
      display: inline-block; }
    .content .embed.desc {
      display: inline-block;
      padding: 0.5em;
      margin: 0.2em;
      background: var(--gray-bright); }
    .content .embed > *:not(.description) {
      max-width: 100%; }
  .content .embed-cover > * {
    object-fit: cover;
    width: 100%;
    height: 100%; }
  .content pre, .content code {
    text-align: initial; }
  .content pre > code {
    border-style: solid;
    border-width: 0 0 0 0.6rem;
    border-radius: 0 6px 6px 0;
    border-color: var(--gray-dark);
    display: block;
    margin: 0 var(--margin-wide);
    padding: 1em;
    white-space: pre-wrap;
    break-inside: avoid-page;
    overflow-x: auto;
    line-height: normal;
    background: #1d1f21;
    color: #c5c8c6; }
  .content .example, .content .well {
    border-style: solid;
    border-width: 0 0 0 0.6rem;
    border-radius: 0 6px 6px 0;
    margin: 1rem var(--margin-wide);
    padding: 1rem;
    line-height: normal;
    background: var(--gray-bright);
    border-color: var(--gray-neutral);
    break-inside: avoid-page; }
  .content .well-warning {
    border-color: var(--gray-fail); }

.action-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap; }

.action-btn {
  font-size: 1.2em;
  font-weight: normal;
  padding: 0.25em 0.5em;
  border-radius: 0.2em;
  color: var(--gray-bright);
  background: var(--gray-dark);
  border: 1px solid var(--gray-dark);
  transition: background 500ms; }
  .action-btn.secondary {
    background: transparent;
    border: 1px solid var(--gray-dark);
    color: var(--gray-dark); }
  .action-btn:hover {
    filter: none; }

.print-only {
  display: none; }
  @media print {
    .print-only {
      display: block; } }
@media print {
  .screen-only {
    display: none; } }

@media print {
  h1, h2, h3, h4, h5 {
    break-after: avoid-page; }
    h1 + *, h2 + *, h3 + *, h4 + *, h5 + * {
      break-before: avoid-page; }
  .view {
    flex: 1 0 auto; }
    .view .content {
      flex: 1 0 auto; }
  body {
    background: #ffffff; } }

.print-ownpage {
  break-before: page;
  break-after: page; }

@page {
  size: a4;
  margin: 2.5cm 0 2.5cm; }