:root {
    --line-height: 1.6em;
    --border-thickness: 2px;
    --text-color: #fff;
    --text-color-alt: #aaa;
    --background-color: #000;
    --background-color-alt: #111;

    --font-weight-normal: 400;
    --font-weight-bold: 700;

    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: var(--font-weight-normal);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 16px;
    letter-spacing: 0.004em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    font-optical-sizing: auto;
    hanging-punctuation: first last;
    text-wrap: pretty;
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color: #000;
        --text-color-alt: #666;
        --background-color: #fff;
        --background-color-alt: #eee;
    }
}

@media (not (prefers-color-scheme: light)) {
    img.invert {
        filter: invert(1) hue-rotate(210deg);
    }
}

@media (prefers-color-scheme: light) {
    img.pixelart,
    img.post-header-image {
        filter: invert(1) hue-rotate(170deg);
    }
}

figure {
    margin: 0;
    padding: 0;
}

.post-header-figure {
    margin: var(--line-height) 0;
}

figcaption {
    font-size: 0.85em;
    color: var(--text-color-alt);
    margin-top: 0.3em;
}

.post-header-image {
    width: 100%;
}

/* Side-positioned header image: floats into sidenote margin on wide screens */
@media screen and (min-width: 1300px) {
    .post-header-figure.post-header-side {
        float: right;
        clear: right;
        margin-right: -55%;
        width: 45%;
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 1299px) {
    .post-header-figure.post-header-side {
        margin: var(--line-height) 0;
    }
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter/InterVariable.woff2') format('woff2-variations'),
         url('./fonts/inter/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('./fonts/inter/InterVariable-Italic.woff2') format('woff2-variations'),
         url('./fonts/inter/InterVariable-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('./fonts/berkeley-mono/BerkeleyMono-Regular.otf') format('otf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('./fonts/berkeley-mono/BerkeleyMono-Bold.otf') format('otf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('./fonts/berkeley-mono/BerkeleyMono-Oblique.otf') format('otf');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Berkeley Mono';
    src: url('./fonts/berkeley-mono/BerkeleyMono-Bold-Oblique.otf') format('otf');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: center;
    background: var(--background-color);
    color: var(--text-color);
}

body {
    line-height: var(--line-height);
    width: 100%;
    max-width: 800px;
    margin: 0;
    padding: var(--line-height) 0;
    position: relative;
    overflow-x: hidden;
}

@media screen and (max-width: 130ch) {
    :root {
        font-size: 16px;
    }

    main {
        padding: 0 2ch;
    }

    header table {
        margin: 0 2ch;
    }

    footer {
        padding: 0 2ch;
    }

    header h1 {
        margin: calc(var(--line-height) * 2) 1ch var(--line-height);
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1em;
    font-weight: 700;
    text-wrap: balance;
}

h1 {
    font-size: 2.5em;
    /* ­ in markup provides hyphenation points, but we only
       want them used on narrow screens to avoid unwanted wrapping. */
    hyphens: none;
}

@media (width < 32rem) {
  h1 {
    font-size: 1.75em;
  }
}

@media screen and (max-width: 130ch) {
    h1 {
        hyphens: manual;
    }
}

h1, h2, .links th, .caps {
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

h1, h2, h3, h4, h5, h6 {
    position: relative;
    scroll-margin-top: 1.5em;
}

.header-link {
    text-decoration: none;
    color: inherit;
}

.header-anchor {
    position: absolute;
    left: -1.5ch;
    opacity: 0;
    text-decoration: none;
    color: var(--text-color-alt);
}

:is(h1, h2, h3, h4, h5, h6):hover .header-anchor {
    opacity: 1;
}

a {
  text-decoration-thickness: var(--border-thickness);
  text-underline-offset: 20%;
  text-decoration-color: var(--text-color-alt)
}

a:hover {
  text-decoration-color: unset;
}

a.footnote-ref {
    text-decoration-thickness: 0;
}

a:link,
a:visited {
    color: var(--text-color);
}

time {
    color: var(--text-color-alt);
    font-weight: bold;
}

p {
    margin-bottom: var(--line-height);
}

table .links {
    position: relative;
    top: calc(var(--line-height) / 2);
    /* width: calc(round(down, 100%, 1ch)); */
    border-collapse: collapse;
    margin: 0 0 calc(var(--line-height) * 2);
}

th,
td {
    padding: 0;
    line-height: var(--line-height);
    vertical-align: top;
    text-align: left;
}

table .links tbody tr:first-child>* {
    padding-top: calc((var(--line-height) / 2) - var(--border-thickness));
}

table.normaltable {
  position: relative;
  top: calc(var(--line-height) / 2);
  width: calc(round(down, 90%, 1ch));
  border-collapse: collapse;
  margin: 0 5% calc(var(--line-height) * 2);
}

.normaltable th, .normaltable td {
  border: none;
  padding:
    calc(var(--line-height) / 8)
    1ch
    calc(var(--line-height) / 8)
  ;
  line-height: var(--line-height);
  vertical-align: top;
  text-align: left;
}

.normaltable thead {
  border-bottom: var(--border-thickness) solid var(--text-color);
}

.normaltable tbody {
  border-bottom: var(--border-thickness) solid var(--text-color);
}

th {
    font-weight: 700;
}

.width-min {
    width: 0%;
}

.width-auto {
    width: 100%;
}

img,
video {
    display: block;
    width: 100%;
    object-fit: contain;
    overflow: hidden;
}

img {
    font-style: italic;
    color: var(--text-color-alt);
}

.project {
    margin-bottom: 20px;
}

.project h3 {
    margin-bottom: 5px;
}

.project p {
    margin-top: 0;
}

.width-minr {
    margin-top: 30px;
    text-align: right;
}

.width-minr a {
    margin-left: 15px;
    margin-right: 0px;
}

.width-minl {
    margin-top: 30px;
    text-align: left;
}

.width-minl a {
    margin-right: 15px;
    margin-left: 0px;
}

.pixelart {
    image-rendering: crisp-edges;
}


pre {
    white-space: pre;
    margin: 0;
    overflow-y: hidden;
}

figure pre {
    margin: 0;
}

pre,
code {
    font-family: 'Berkeley Mono', monospace;
    letter-spacing: 0px;
    line-height: 1.1em;
}

aside {
    font-style: italic;
    border-top: var(--border-thickness) solid var(--text-color-alt);
    border-bottom: var(--border-thickness) solid var(--text-color-alt);
    margin: var(--line-height) 0;
    padding: calc(var(--line-height) / 2) 0;
}

aside p {
    margin-bottom: calc(var(--line-height) / 2);
}

aside p:first-child {
    margin-top: 0;
}

aside p:last-child {
    margin-bottom: 0;
}

blockquote {
    background: var(--background-color-alt);
    border-left: var(--border-thickness) solid var(--text-color);
    margin: 1.5em 10px;
    padding: 0.5em 10px;
}

blockquote blockquote {
    background: #222;
}

blockquote blockquote blockquote {
    background: #333;
}

blockquote blockquote blockquote blockquote {
    background: #444;
}

@media (prefers-color-scheme: light) {
    blockquote blockquote {
        background: #ddd;
    }

    blockquote blockquote blockquote {
        background: #ccc;
    }

    blockquote blockquote blockquote blockquote {
        background: #bbb;
    }
}

blockquote p {
    display: inline;
}

.linenodiv pre {
    border-right: var(--border-thickness) solid var(--text-color-alt);
}

.code div {
    padding-left: 0px;
}

body {
    position: relative;
    min-height: 100vh;
}

main {
    padding-bottom: 4.5rem;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4.5rem;
}

ul, ol {
  padding: 0;
  margin: 0 0 var(--line-height);
}

ul {
  list-style-type: square;
  padding: 0 0 0 2ch;
}
ol.custom-counter {
  list-style-type: none;
  counter-reset: item;
  padding: 0;
}
ol.custom-counter ul,
ol.custom-counter ol,
ul ol.custom-counter,
ul ul {
  padding: 0 0 0 3ch;
  margin: 0;
}
ol.custom-counter li:before { 
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: var(--font-weight-normal);
}

li {
  margin: 0;
  padding: 0;
}

li::marker {
  line-height: 0;
}

li p {
  margin-top: 2px;
  margin-bottom: 2px;
}

.right {
  text-align: right;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 2ch;
}

/* Tab style starts here */
.tabbed-set {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 1em 0;
  border-radius: 0.1rem;
}

.tabbed-set > input {
  display: none;
}

.tabbed-set label {
  width: auto;
  padding: 0.5em 1em;
  margin-right: 0.2em;
  white-space: nowrap;
  border: var(--border-thickness) solid var(--text-color-alt);
  cursor: pointer;
}

.tabbed-set .tabbed-content {
  width: 100%;
  display: none;
  box-shadow: 0 calc(0px - var(--border-thickness)) var(--text-color);
}

.tabbed-set input {
  position: absolute;
  opacity: 0;
}

.tabbed-set input:checked:nth-child(n+1) + label {
  border: var(--border-thickness) solid var(--text-color);
}

@media screen {
  .tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
    order: 99;
    display: block;
  }
}

@media print {
  .tabbed-content {
    display: contents;
  }
}

.post-description {
  color: var(--text-color-alt);
}

.post-link {
  margin-bottom: calc(var(--line-height) / 2);
}

/* Sidenotes - Tufte-style */

/* Counter for sidenote numbers */
article {
  counter-reset: sidenote-counter;
}

/* The clickable label that shows the superscript number */
.sidenote-number {
  counter-increment: sidenote-counter;
  display: inline;
  cursor: pointer;
}

.sidenote-number::after {
  content: counter(sidenote-counter);
  font-size: 0.75em;
  position: relative;
  top: -0.5em;
  left: 0.1em;
  color: var(--text-color);
}

/* Hide the checkbox toggle on desktop */
input.margin-toggle {
  display: none;
}

/* The sidenote itself */
.sidenote {
  font-size: 0.85em;
  line-height: 1.4;
  /* color: var(--text-color-alt); */
  padding-left: 1.5em;
  text-indent: -1.5em;
}

.sidenote::before {
  content: counter(sidenote-counter) ". ";
  font-weight: bold;
  color: var(--text-color);
}

/* Desktop: wide body with offset content column */
@media screen and (min-width: 1300px) {
  body {
    max-width: 1400px;
    padding-left: 5%;
    padding-right: 5%;
  }

  main {
    max-width: 800px;
  }

  footer {
    max-width: 800px;
  }

  header {
    max-width: 800px;
  }

  .sidenote {
    float: right;
    clear: right;
    margin-right: -55%;
    width: 45%;
    margin-top: 0.3rem;
    margin-bottom: 0;
    vertical-align: baseline;
    position: relative;
  }
}

/* Mobile/tablet: sidenotes become toggleable inline notes */
@media screen and (max-width: 1299px) {
  .sidenote {
    display: none;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    padding: 0.5rem;
    background: var(--background-color-alt);
    border-left: var(--border-thickness) solid var(--text-color-alt);
  }

  .margin-toggle:checked + .sidenote {
    display: block;
  }

  .sidenote-number::after {
    text-decoration: underline;
    cursor: pointer;
  }
}