@charset "UTF-8";
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
  4. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  Better scrollbars for Chrome
*/
::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/assets/fonts/soehne-buch.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url("/assets/fonts/soehne-buch-kursiv.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src: url("/assets/fonts/soehne-kraftig.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: italic;
  font-weight: 500;
  font-display: fallback;
  src: url("/assets/fonts/soehne-kraftig-kursiv.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url("/assets/fonts/soehne-halbfett.woff2") format("woff2");
}
@font-face {
  font-family: "Söhne";
  font-style: italic;
  font-weight: 600;
  font-display: fallback;
  src: url("/assets/fonts/soehne-halbfett-kursiv.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("/assets/fonts/MonoLisaVariableNormal.woff2") format("woff2");
}
@font-face {
  font-family: "MonoLisa";
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: url("/assets/fonts/MonoLisaVariableItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Maple Mono";
  font-style: normal;
  font-weight: 200;
  font-display: fallback;
  src: url("/assets/fonts/MapleMono-Light.ttf.woff2") format("woff2");
}
@font-face {
  font-family: "Maple Mono";
  font-style: italic;
  font-weight: 200;
  font-display: fallback;
  src: url("/assets/fonts/MapleMono-LightItalic.ttf.woff2") format("woff2");
}
:root {
  --raisin-black: #342E37;
  --dove-gray: #696969;
  --alabaster: #E3E4DB;
  --silver: #CDCDCD;
  --rose-quartz: #AEA4BF;
  --burnt-sienna: oklch(0.7 0.15 30);
  --zest: oklch(0.7 0.15 60);
  --buddha-gold: oklch(0.7 0.15 90);
  --sushi: oklch(0.7 0.15 120);
  --chateau-green: oklch(0.7 0.15 150);
  --caribbean-green: oklch(0.7 0.15 180);
  --cerulean: oklch(0.7 0.15 210);
  --picton-blue: oklch(0.7 0.15 240);
  --malibu: oklch(0.7 0.15 270);
  --biloba-flower: oklch(0.7 0.15 300);
  --orchid: oklch(0.7 0.15 330);
  --deep-blush: oklch(0.7 0.15 360);
  --golden-fizz: oklch(0.95 0.2 110);
  --bright-turquoise: oklch(0.87 0.2 180);
  --lochmara: oklch(0.54 0.15 240);
  --hot-pink: oklch(0.78 0.2 350);
  --red: var(--burnt-sienna);
  --orange: var(--zest);
  --yellow: var(--golden-fizz);
  --green: var(--chateau-green);
  --cyan: var(--bright-turquoise);
  --blue: var(--lochmara);
  --indigo: var(--malibu);
  --violet: var(--biloba-flower);
  --pink: var(--hot-pink);
  --fuchsia: var(--deep-blush);
  --masala: #443E3A;
  --zeus: #292319;
  --eternity: #211A0E;
  --aztec: #0D1C19;
  --outer-space: #2D383A;
  --ship-gray: #3E3A44;
  --ishtar-dark: #1C1C1C;
  --gravel: #433A44;
  --bg-color: var(--raisin-black);
  --font-color: var(--silver);
  --grid-color: var(--ship-gray);
  --highlight-color: var(--silver);
  --hover-font-color: var(--bg-color);
  --icon-color: var(--rose-quartz);
}

:root {
  --content-width: 750px;
  --columns: 5;
  --sidebar-cols: 1;
  --content-cols: 4;
  --base-font-size: 18px;
  --horizontal-spacing: 30px;
  --vertical-spacing: 30px;
}

.full-width {
  width: 100vw;
  padding-left: calc((100vw - var(--content-width)) / 2);
  padding-right: calc((100vw - var(--content-width)) / 2);
}

.standard-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-auto-rows: min-content;
  column-gap: var(--horizontal-spacing);
  row-gap: var(--vertical-spacing);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(var(--content-cols), 1fr);
  grid-auto-rows: min-content;
  column-gap: var(--horizontal-spacing);
  row-gap: calc(var(--vertical-spacing) / 2);
}

.sidebar-col {
  grid-column-start: 1;
  grid-column-end: span var(--sidebar-cols);
}

.content-col {
  grid-column-start: calc(var(--sidebar-cols) + 1);
  grid-column-end: span var(--content-cols);
}

.col-1 {
  grid-column-end: span 1;
}

.col-2 {
  grid-column-end: span 2;
}

.col-3 {
  grid-column-end: span 3;
}

.col-4 {
  grid-column-end: span 4;
}

.col-5 {
  grid-column-end: span 5;
}

.start-1 {
  grid-column-start: 1;
}

.start-2 {
  grid-column-start: 2;
}

.start-3 {
  grid-column-start: 3;
}

.start-4 {
  grid-column-start: 4;
}

.start-5 {
  grid-column-start: 5;
}

@media (min-width: 760px) {
  :root {
    --content-width: 750px;
    --columns: 5;
    --sidebar-cols: 1;
    --content-cols: 4;
  }
}
@media (max-width: 760px) {
  :root {
    --content-width: 450px;
    --columns: 3;
    --sidebar-cols: 3;
    --content-cols: 3;
  }
  .sidebar-col {
    grid-column-start: 1;
    grid-column-end: span var(--sidebar-cols);
  }
  .content-col {
    grid-column-start: 1;
    grid-column-end: span var(--content-cols);
  }
}
@media (max-width: 460px) {
  :root {
    --content-width: 300px;
    --columns: 3;
    --sidebar-cols: 3;
    --content-cols: 3;
    --base-font-size: 15px;
  }
  .sidebar-col {
    grid-column-start: 1;
    grid-column-end: span var(--sidebar-cols);
  }
  .content-col {
    grid-column-start: 1;
    grid-column-end: span var(--content-cols);
  }
}
body {
  background: var(--bg-color);
  color: var(--font-color);
  font-family: "Söhne";
  font-size: var(--base-font-size);
}

.wrapper {
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Söhne";
  font-weight: 600;
}

pre, tt, code, kbd, samp {
  font-family: "Maple Mono";
  font-weight: 400;
  font-size: 14px;
}

pre {
  margin: 1em 0;
  padding: 1em;
  border-radius: 4px;
  overflow-y: auto;
  line-height: 1.7;
  background: color-mix(in oklab, var(--bg-color) 90%, black 10%);
}

.post-meta, .post-subtitle {
  font-family: "Söhne";
  font-weight: 500;
}

.sidebar-col {
  text-align: right;
}

h1, h2 {
  font-size: calc(var(--base-font-size) * 4);
  line-height: 1;
}
h1 a, h2 a {
  --hover-start-height: 0;
}

a {
  --hover-start-height: 1px;
  color: var(--font-color);
  text-decoration: none;
  background: linear-gradient(0deg, var(--highlight-color), var(--highlight-color)) no-repeat right bottom/100% var(--hover-start-height);
  transition: background-size 0.3s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  padding-left: 1px;
  padding-right: 1px;
}

a:where(:hover, :focus-visible) {
  color: var(--hover-font-color);
  background-size: 100% 100%;
  background-position-x: left;
}

h2 {
  display: flex;
}
h2 a {
  padding-bottom: var(--vertical-spacing);
}

h3 {
  border-bottom: 1px solid var(--highlight-color);
}

p, table {
  margin-top: var(--vertical-spacing);
  margin-bottom: var(--vertical-spacing);
}

.post .content-col > *:first-child {
  margin-top: 0;
}

h3, h4, h5, h6, .footnotes {
  margin-top: calc(var(--vertical-spacing) * 2);
  margin-bottom: calc(var(--vertical-spacing) * 2);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}

th, td {
  border: 1px solid var(--ship-gray);
  padding: 3px 8px;
}

blockquote {
  padding: 0 1em;
  border-left: 1px solid;
}

svg {
  margin: 2em auto;
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.header, .post, .page, .footer {
  padding-top: 50px;
  padding-bottom: 150px;
}

.mask-icon {
  height: 100%;
  max-height: 125px;
  background-color: var(--font-color);
  mask-position: top 50% left 50%;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-position: top 50% left 50%;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.post-icon .hgi {
  font-size: 80px;
  color: var(--hover-font-color);
  height: 125px;
  width: 125px;
  line-height: 125px;
  padding: 0;
  text-align: center;
}

.hgi {
  color: var(--hover-font-color);
  background: var(--icon-color);
  border-radius: 50%;
  padding: 4px;
}

.post-icon {
  height: 162px;
}

.post-icon, .post h2 {
  border-bottom: 1px solid var(--highlight-color);
  align-self: end;
}

.tags, .tag-index {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags i, .tag-index i {
  top: 2px;
}

.tags li {
  display: inline-block;
  margin-right: 0.5em;
}

.supplemental {
  border-top: 1px solid var(--highlight-color);
  padding-top: calc(var(--vertical-spacing) * 2);
}

.related-posts {
  padding: 0;
}

.related-posts li {
  list-style: none;
}

@media (max-width: 760px) {
  .mask-icon {
    height: 125px;
    mask-position: bottom left;
    -webkit-mask-position: bottom left;
  }
  .sidebar-col {
    text-align: left;
  }
  .post-icon {
    border-bottom: none;
  }
}
.highlight .c {
  color: #998;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .k { /* font-weight: bold */ }
.highlight .o { /* font-weight: bold */ }
.highlight .cm {
  color: #998;
  font-style: italic;
}
.highlight .cp {
  color: #999; /* font-weight: bold */
}
.highlight .c1 {
  color: #998;
  font-style: italic;
}
.highlight .cs {
  color: #999; /* font-weight: bold */
  font-style: italic;
}
.highlight .gd {
  color: #000;
  background-color: #fdd;
}
.highlight .gd .x {
  color: #000;
  background-color: #faa;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gr {
  color: #a00;
}
.highlight .gh {
  color: #999;
}
.highlight .gi {
  color: #000;
  background-color: #dfd;
}
.highlight .gi .x {
  color: #000;
  background-color: #afa;
}
.highlight .go {
  color: #888;
}
.highlight .gp {
  color: #555;
}
.highlight .gs { /* font-weight: bold */ }
.highlight .gu {
  color: #aaa;
}
.highlight .gt {
  color: #a00;
}
.highlight .k {
  color: var(--biloba-flower);
}
.highlight .kc {
  color: var(--biloba-flower);
}
.highlight .kd {
  color: var(--biloba-flower);
}
.highlight .kp {
  color: var(--malibu);
}
.highlight .kr {
  color: var(--biloba-flower);
}
.highlight .kt {
  color: #458; /* font-weight: bold */
}
.highlight .m {
  color: #099;
}
.highlight .s {
  color: var(--zest);
}
.highlight .n {
  color: var(--picton-blue);
}
.highlight .na {
  color: #008080;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: var(--cerulean);
}
.highlight .no {
  color: var(--cerulean);
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #900; /* font-weight: bold */
}
.highlight .nf {
  color: var(--sushi);
}
.highlight .nn {
  color: var(--cerulean);
}
.highlight .nt {
  color: var(--picton-blue);
}
.highlight .nv {
  color: #008080;
}
.highlight .ow { /* font-weight: bold */ }
.highlight .w {
  color: #bbb;
}
.highlight .mf {
  color: #099;
}
.highlight .mh {
  color: #099;
}
.highlight .mi {
  color: #099;
}
.highlight .mo {
  color: #099;
}
.highlight .sb {
  color: var(--zest);
}
.highlight .sc {
  color: var(--zest);
}
.highlight .sd {
  color: var(--zest);
}
.highlight .s2 {
  color: var(--zest);
}
.highlight .se {
  color: var(--zest);
}
.highlight .sh {
  color: var(--zest);
}
.highlight .si {
  color: var(--zest);
}
.highlight .sx {
  color: var(--zest);
}
.highlight .sr {
  color: var(--burnt-sienna);
}
.highlight .s1 {
  color: var(--zest);
}
.highlight .ss {
  color: var(--malibu);
}
.highlight .bp {
  color: #999;
}
.highlight .vc {
  color: var(--picton-blue);
}
.highlight .vg {
  color: var(--picton-blue);
}
.highlight .vi {
  color: var(--picton-blue);
}
.highlight .il {
  color: #099;
}
.highlight .p {
  color: var(--chateau-green);
}

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