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

code {
  font-size: 0.8em; }

pre > code {
  font-size: 1em; }

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 {
  display: inline-block;
  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; }

::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 2rem;
  height: 1rem;
  position: sticky;
  bottom: 0;
  color: #eeeeee;
  background: #303336; }
  @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 .icons {
    flex: 1;
    display: flex;
    justify-content: flex-end; }
    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; }

.browser {
  display: flex;
  flex: 1;
  border-top: 0.2rem solid #eeeeee; }
  .browser .view {
    max-width: calc(100vw - 1rem); }

.view {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0; }
  .view.inspector {
    top: 0;
    position: sticky;
    max-height: calc(100vh - 3rem);
    color: #c5c8c6;
    border-style: solid;
    border-width: 0 0 0 0.5rem;
    border-radius: 0 6px 6px 0;
    border-color: #303336;
    background: #303336; }
    .view.inspector nav {
      background: inherit; }
    .view.inspector .subnav {
      display: flex;
      flex: 0;
      background: #1d1f21;
      border-bottom: 2px solid #303336;
      padding: 0.5em; }
    .view.inspector .content {
      margin: 0;
      padding: 0;
      display: flex;
      align-self: stretch;
      background: #1d1f21; }
      .view.inspector .content > * {
        display: block;
        margin: 0;
        padding: 1em;
        border-radius: 0;
        border: 0;
        flex: 1; }
    .view.inspector .children {
      margin: 0;
      padding: 1em;
      align-self: stretch;
      background: #1d1f21; }
  .view nav {
    position: sticky;
    top: 0;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #eeeeee;
    z-index: 1000; }
    @media print {
      .view nav {
        position: relative;
        display: none; } }
    .view nav > span:first-of-type {
      flex: 1 0 auto; }
    .view nav > * {
      margin: 1em;
      white-space: nowrap; }
    .view nav.thin > * {
      margin: 0.5em 1em; }
    @media only screen and (max-width: 425px) {
      .view nav > .inspect-btn {
        display: none; } }
    .view nav .tight {
      margin-left: 0; }
  .view .error-wrap {
    flex: 0 0 auto;
    padding: 1em 2em;
    overflow: hidden;
    color: #1d1f21;
    background: #ddbdc1; }
    .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; }
  .view .content {
    flex: 1 0 auto;
    overflow: auto;
    padding: 1em 2em;
    margin: 0 1em;
    align-self: flex-start;
    min-width: 30vw;
    background: #ffffff;
    position: relative; }

.content {
  opacity: 1;
  transition: opacity 150ms; }
  body.loading .content {
    opacity: 0; }

.content img, .content video {
  width: inherit;
  height: inherit;
  object-fit: 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: 640px;
  text-align: justify; }
  .content .markdown > blockquote {
    border-style: solid;
    border-width: 0 0 0 0.5rem;
    border-radius: 0 6px 6px 0;
    line-height: normal;
    margin: 1rem -1rem;
    padding: 1rem 1rem 1rem 0.5rem;
    background: #eeeeee;
    border-color: #b9bdc1; }

.content p {
  orphans: 6;
  widows: 6; }
  .content p:first-child {
    margin-top: 0; }
  .content p:last-child {
    margin-bottom: 0; }

.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 a, .content .markdown p,
.content .markdown > p a,
.content .markdown > p p,
.content .markdown > p > a a,
.content .markdown > p > a p {
  max-width: 100%; }

.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 {
  margin-block-end: 1em;
  text-align: none; }

.content .embed {
  display: block;
  width: inherit;
  height: inherit;
  max-width: inherit;
  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: #eeeeee; }
  .content .embed > *:not(.description) {
    max-width: 100%; }

.content pre, .content code {
  text-align: initial; }

.content pre > code {
  border-style: solid;
  border-width: 0 0 0 0.5rem;
  border-radius: 0 6px 6px 0;
  border-color: #303336;
  display: block;
  margin: 0 -1rem;
  padding: 1rem 1rem 1rem 0.5rem;
  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.5rem;
  border-radius: 0 6px 6px 0;
  margin: 1rem -1rem;
  padding: 1rem 1rem 1rem 0.5rem;
  line-height: normal;
  background: #eeeeee;
  border-color: #b9bdc1;
  break-inside: avoid-page; }

.content .well-warning {
  border-color: #ddbdc1; }

.content .well-white {
  padding: 0 1rem 0 1.5rem;
  margin-left: -2rem;
  background: none; }

.content .spacious h1, .content .spacious h2, .content .spacious h3 {
  margin-top: 1.7em; }

.content .spacious h1 + h2,
.content .spacious h2 + h3 {
  margin-top: 0; }

.home-top {
  display: flex;
  flex-wrap: wrap-reverse;
  width: 100%;
  gap: 1.5rem; }
  .home-top > .about {
    min-width: Min(500px, 100%);
    flex: 2; }
  .home-top > .img {
    position: relative;
    min-width: Min(250px, 100%);
    max-width: 1200px;
    max-height: 600px;
    flex: 1;
    border-radius: 6px;
    overflow: hidden; }
    .home-top > .img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: var(--gray-dark); }
    .home-top > .img::after {
      position: absolute;
      content: '';
      inset: 0;
      border-radius: inherit;
      box-shadow: inset 0px 0px 1.25rem rgba(0, 0, 0, 0.3); }

ul.projects {
  display: flex;
  padding: 0;
  gap: 1rem;
  margin-top: 1em;
  flex-wrap: wrap;
  justify-content: space-between; }
  ul.projects li {
    flex-grow: 1;
    width: 20rem;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 0.9em;
    background: var(--gray-bright);
    border-radius: 6px;
    box-shadow: 0px 0px 0.25em rgba(0, 0, 0, 0.3); }
    ul.projects li h1 {
      position: relative;
      display: block;
      padding: 0.2rem 1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
    ul.projects li > a {
      display: block;
      color: var(--gray-bright);
      background: var(--gray-dark);
      filter: none;
      text-decoration: none; }
    ul.projects li > .category {
      background: var(--gray-darker);
      color: var(--gray-bright);
      padding: 0.25rem 1rem; }
    ul.projects li .preview {
      position: relative;
      width: 100%;
      height: 11.25rem;
      background: var(--gray-darker);
      object-fit: cover; }
      ul.projects li .preview.preview-center {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 11.25rem;
        font-size: 8rem; }
        ul.projects li .preview.preview-center > div {
          display: flex;
          position: relative; }
          ul.projects li .preview.preview-center > div::after {
            position: absolute;
            content: '';
            inset: 0;
            box-shadow: inset 0px 0px 0.5rem rgba(0, 0, 0, 0.3); }
      ul.projects li .preview::after {
        position: absolute;
        content: '';
        inset: 0;
        box-shadow: inset 0px 0px 1.25rem rgba(0, 0, 0, 0.3); }

:root {
  --sidenote-width: 14rem; }

.sidenote-container {
  margin-right: 15rem; }
  @media only screen and (min-width: 426px) and (max-width: 767px) {
    .sidenote-container {
      margin: auto; } }
  .sidenote-container .sidenote-container {
    margin-right: initial;
    margin: initial; }
  .sidenote-container .sidenote {
    position: absolute;
    box-sizing: border-box;
    width: 14rem;
    right: -16rem;
    padding: 0 1rem;
    color: #303336;
    border-top: 1px solid #303336;
    word-break: break-word;
    font-size: 0.8em;
    line-height: 1.1;
    text-align: initial;
    break-inside: avoid-page; }
    .sidenote-container .sidenote .hook {
      position: absolute;
      top: -4rem;
      width: 0;
      height: 0; }
      @media print {
        .sidenote-container .sidenote .hook {
          top: 0; } }
    .sidenote-container .sidenote .ref {
      display: block;
      position: absolute;
      width: 1rem;
      margin-left: -1.2rem;
      text-align: right; }
    .sidenote-container .sidenote > .markdown > p:first-child {
      margin-top: 0; }
    .sidenote-container .sidenote a {
      display: inline; }
    @media only screen and (min-width: 426px) and (max-width: 767px) {
      .sidenote-container .sidenote {
        width: initial;
        position: initial;
        right: initial;
        border-bottom: 1px solid #303336;
        margin: 0.5rem 0; } }
.canvas_app {
  position: relative;
  display: inline-block; }
  .canvas_app .overlay {
    position: absolute;
    padding: 1rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 300ms; }
    .canvas_app .overlay:hover {
      opacity: 1; }
    .canvas_app .overlay > * {
      margin: 0.5em; }
    .canvas_app .overlay a {
      display: block;
      color: #eeeeee;
      font-family: inherit; }

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