/*
 * forked form reset https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
#root, #__next {
  isolation: isolate;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src:
    url("/static/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src:
    url("/static/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src:
    url("/static/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src:
    url("/static/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Berkeley Mono";
    url("/static/BerkeleyMonoVariable-Regular.woff2") format("woff2");
}

/*
 * end reset
*/
:root {
  /* Gruvbox palette */
  --bright_red: #fb4934;
  --bright_green: #b8bb26;
  --bright_yellow: #fabd2f;
  --bright_blue: #83a598;
  --bright_purple: #d3869b;
  --bright_aqua: #8ec07c;
  --bright_orange: #fe8019;
  --neutral_red: #cc241d;
  --neutral_green: #98971a;
  --neutral_yellow: #d79921;
  --neutral_blue: #458588;
  --neutral_purple: #b16286;
  --neutral_aqua: #689d6a;
  --neutral_orange: #d65d0e;
  --faded_red: #9d0006;
  --faded_green: #79740e;
  --faded_yellow: #b57614;
  --faded_blue: #076678;
  --faded_purple: #8f3f71;
  --faded_aqua: #427b58;
  --faded_orange: #af3a03;
  --gray: #928374;

  --dark0_hard: #1d2021;
  --dark0: #282828;
  --dark0_soft: #32302f;
  --dark1: #3c3836;
  --dark2: #504945;
  --dark3: #665c54;
  --dark4: #7c6f64;
  --dark_red_hard: #792329;
  --dark_red: #722529;
  --dark_red_soft: #7b2c2f;
  --dark_green_hard: #5a633a;
  --dark_green: #62693e;
  --dark_green_soft: #686d43;
  --dark_aqua_hard: #3e4934;
  --dark_aqua: #49503b;
  --dark_aqua_soft: #525742;

  --light0_hard: #f9f5d7;
  --light0: #fbf1c7;
  --light0_soft: #f2e5bc;
  --light1: #ebdbb2;
  --light2: #d5c4a1;
  --light3: #bdae93;
  --light4: #a89984;
  --light_red_hard: #fc9690;
  --light_red: #fc9487;
  --light_red_soft: #f78b7f;
  --light_green_hard: #d3d6a5;
  --light_green: #d5d39b;
  --light_green_soft: #cecb94;
  --light_aqua_hard: #e6e9c1;
  --light_aqua: #e8e5b5;
  --light_aqua_soft: #e1dbac;

  /* these differ between dark/light */
  --0_hard: var(--light0_hard);
  --0: var(--light0);
  --0_soft: var(--light0_soft);
  --1: var(--light1);
  --2: var(--light2);
  --3: var(--light3);
  --4: var(--light4);
  --red_hard: var(--light_red_hard);
  --red: var(--light_red);
  --red_soft: var(--light_red_soft);
  --green_hard: var(--light_green_hard);
  --green: var(--light_green);
  --green_soft: var(--light_green_soft);
  --aqua_hard: var(--light_aqua_hard);
  --aqua: var(--light_aqua);
  --aqua_soft: var(--light_aqua_soft);

  --contrast0_hard: #1d2021;
  --contrast0: #282828;
  --contrast0_soft: #32302f;
  --contrast1: #3c3836;
  --contrast2: #504945;
  --contrast3: #665c54;
  --contrast4: #7c6f64;
  --contrast_red_hard: #792329;
  --contrast_red: #722529;
  --contrast_red_soft: #7b2c2f;
  --contrast_green_hard: #5a633a;
  --contrast_green: #62693e;
  --contrast_green_soft: #686d43;
  --contrast_aqua_hard: #3e4934;
  --contrast_aqua: #49503b;
  --contrast_aqua_soft: #525742;

  /* I'm not a huge fan of the background color of light gruvbox. */
  --light_custom_bg: #f0edef;
  --fg: var(--contrast0_hard);
  --bg: var(--light_custom_bg);

  --f1: 3.052rem;
  --f2: 2.441rem;
  --f3: 1.953rem;
  --f4: 1.563rem;
  --f5: 1.25rem;
  --f6: 1rem;
  --fsmall: 0.8rem;
}
body {
  height: 100%;
  margin: 16px auto;
  width: 100%;
  font-family: "Atkinson Hyperlegible", sans-serif;
}
.block {
  height: 25px;
  width: 25px;
  flex: 1;
}
small {
  font-size: var(--fsmall);
}
@media (prefers-color-scheme: dark) {
  :root {
    --contrast0_hard: var(--light0_hard);
    --bg: var(--0_hard);

    --0_hard: var(--dark0_hard);
    --0: var(--dark0);
    --0_soft: var(--dark0_soft);
    --1: var(--dark1);
    --2: var(--dark2);
    --3: var(--dark3);
    --4: var(--dark4);
    --red_hard: var(--dark_red_hard);
    --red: var(--dark_red);
    --red_soft: var(--dark_red_soft);
    --green_hard: var(--dark_green_hard);
    --green: var(--dark_green);
    --green_soft: var(--dark_green_soft);
    --aqua_hard: var(--dark_aqua_hard);
    --aqua: var(--dark_aqua);
    --aqua_soft: var(--dark_aqua_soft);

    --contrast0_hard: #f9f5d7;
    --contrast0: #fbf1c7;
    --contrast0_soft: #f2e5bc;
    --contrast1: #ebdbb2;
    --contrast2: #d5c4a1;
    --contrast3: #bdae93;
    --contrast4: #a89984;
    --contrast_red_hard: #fc9690;
    --contrast_red: #fc9487;
    --contrast_red_soft: #f78b7f;
    --contrast_green_hard: #d3d6a5;
    --contrast_green: #d5d39b;
    --contrast_green_soft: #cecb94;
    --contrast_aqua_hard: #e6e9c1;
    --contrast_aqua: #e8e5b5;
    --contrast_aqua_soft: #e1dbac;
  }

}
/* 
Styles forked from Tufte CSS styles
many have been dropped; sidenotes are the primary piece remaining
*/
html, body {
    height: 100%;
}
body {
    display: flex;
    flex-direction: column;
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    counter-reset: sidenote-counter;
    margin-top: 0;
    color: var(--fg);
    background: var(--bg);
    font-size: var(--f5);
}

header {
  font-size: var(--f4);
}

.title-date {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2em 0 1.5em 0;
  flex: 1;
  max-width: 1000px;
  gap: 16px;
}

a.header-link  {
  text-decoration: none;
}
a.header-link:visited {
  color: inherit;
}
a.header-link * {
  position: relative;
}
a.header-link *::after {
  content: '#';
  visibility: hidden;
  margin-left: .1em;
  color: var(--bright_orange);
}
a.header-link:hover *::after {
  visibility: visible;
}

h1 {
    font-weight: 600;
    font-size: var(--f1);
    line-height: 1;
}

h2 {
    font-weight: 400;
    margin-top: 2.1rem;
    margin-bottom: 1.4rem;
    font-size: var(--f2);
    line-height: 1;
}

h3 {
    font-weight: 400;
    margin-top: 2rem;
    font-size: var(--f3);
    margin-bottom: 1.4rem;
    line-height: 1;
}

hr {
    display: block;
    height: 1px;
    width: 55%;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

p.subtitle {
    font-style: italic;
    font-size: var(--f5);
    margin: 0;
    display: block;
    line-height: 1;
}

p,
dl,
ol,
ul {
    line-height: var(--p-line-height);
    font-weight: 100;
}

p {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    padding-right: 0;
    vertical-align: baseline;
}

blockquote {
    font-size: 1.4rem;
    font-style: italic;
}

blockquote p {
    padding: 0 40px;
}

blockquote footer {
    width: 55%;
    font-size: 1.1rem;
    text-align: right;
}

dt:not(:first-child),
li:not(:first-child) {
    margin-top: 0.25rem;
}

figure {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    max-width: 55%;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0 0 3em 0;
}

figcaption {
    float: right;
    clear: right;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    vertical-align: baseline;
    position: relative;
    max-width: 40%;
}

a:link {
  color: var(--contrast_green_hard);
}
a:visited {
  color: var(--contrast4);
}

img {
    max-width: 100%;
}

.sidenote,
.marginnote {
    float: right;
    clear: right;
    margin-right: -45%;
    width: 40%;
    margin-top: 0.3rem;
    margin-bottom: 0;
    font-size: .85rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
    position: relative;
    vertical-align: baseline;
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 1rem;
    top: -.9rem;
    left: 0.2rem;
}

.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-size: .75rem;
    top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
    margin-right: -82%;
    min-width: 59%;
    text-align: left;
}

.marginnote > code,
.sidenote > code {
    font-size: var(--fsmall);
}

.fullwidth {
    max-width: 90%;
    clear:both;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline-block;
    margin-left: -0.3rem;
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

ul, ol {
    padding-inline-start: 0;
}

article {
  width: 100%;
  padding-right: 30%;
  padding-bottom: 150px;
}

@media (max-width: 760px) {
    .heading {
      flex-direction: column;
      align-items: start;
    }
    article {
      padding-right: 0;
    }
    body {
        width: 84%;
    }

    hr {
        width: 100%;
    }

    pre > code {
        width: 97%;
    }

    figure {
        max-width: 90%;
    }

    figcaption,
    figure.fullwidth figcaption {
        margin-right: 0%;
        max-width: none;
    }

    blockquote {
        margin-left: 1.5em;
        margin-right: 0em;
    }

    blockquote p,
    blockquote footer {
        width: 100%;
    }

    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote,
    .marginnote {
        display: none;
    }

    .sidenote-number:after {
      border-bottom: 1px solid var(--bright_orange);
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative;
    }

    label {
        cursor: pointer;
    }

    div.table-wrapper,
    table {
        width: 85%;
    }

    img {
        width: 100%;
    }
}

html {visibility: visible; opacity: 1}