@charset "UTF-8";
:root {
  --bg-color: #fff;
  --text-color: #222;
  --link-color: rgb(28, 80, 147);
  --link-hover-color: rgb(39, 107, 196);
  --secondary-text-color: #707070;
  --secondary-heading-text-color: #888;
  --inline-code-bg-color: #eee;
  --image-border-color: #f0f0f0;
  --border-color: hsl(0 0 90%); }
  @media (prefers-contrast: more) {
    :root {
      --text-color: #000;
      --secondary-text-color: #000;
      --secondary-heading-text-color: #000;
      --border-color: hsl(0 0 0%); } }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: #1c1c1c;
      --text-color: #ddd;
      --link-color: rgb(113, 175, 255);
      --link-hover-color: rgb(143, 192, 255);
      --secondary-text-color: #aaa;
      --secondary-heading-text-color: #888;
      --inline-code-bg-color: #333;
      --image-border-color: transparent;
      --border-color: hsl(0 0 40%); } }
  @media (prefers-color-scheme: dark) and (prefers-contrast: more) {
    :root {
      --text-color: #fff;
      --secondary-text-color: #fff;
      --secondary-heading-text-color: #fff;
      --border-color: hsl(0 0 100%); } }

* {
  color: inherit; }

html {
  background-color: var(--bg-color);
  color: var(--text-color); }

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

small {
  color: var(--secondary-text-color); }

:not(pre) > code {
  background-color: var(--inline-code-bg-color); }

blockquote::before {
  color: var(--secondary-heading-text-color); }

img {
  border-color: var(--image-border-color); }

hr {
  border: none;
  border-top: solid 1px var(--border-color); }

body > header {
  border-bottom: solid 1px var(--border-color); }

body > footer {
  border-top: solid 1px var(--border-color);
  color: var(--secondary-text-color); }

article header :not(h1, h2, h3, h4, h5, h6, a) {
  color: var(--secondary-text-color); }

figure {
  border: solid 1px var(--border-color);
  border-radius: .5rem; }

:root {
  --content-width: 80ch;
  --body-padding: 1em;
  --block-gap: 1em; }

body {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: flex-start;
  /* display: grid;
  grid-template-columns: auto auto auto; */
  gap: var(--block-gap);
  margin: 0;
  padding: var(--body-padding); }
  body * {
    margin: 0 auto; }
  body > header {
    max-width: var(--content-width);
    flex: 0 1 auto;
    padding-bottom: var(--block-gap);
    text-align: center;
    width: 100%; }
  body > main {
    max-width: var(--content-width);
    flex: 1 0 auto;
    align-self: left;
    padding-block: var(--block-gap);
    width: 100%; }
    body > main * + * {
      margin-block-start: var(--block-gap); }
    body > main article header * + * {
      margin-top: 0; }
  body > footer {
    max-width: var(--content-width);
    flex: 1 0 auto;
    padding-top: var(--block-gap);
    text-align: center;
    width: 100%; }
  body ul {
    padding-left: var(--block-gap); }
  body li + li {
    margin-top: 0; }
  body nav ul {
    display: flex;
    flex-flow: row wrap;
    gap: var(--block-gap);
    justify-content: center;
    list-style: none;
    padding: 0;
    text-transform: uppercase; }
    body nav ul li {
      margin: 0; }
  body pre {
    overflow-x: scroll;
    padding: var(--block-gap); }
  body pre, body video, body img {
    border-radius: 0.5rem; }
  body :not(pre) > code {
    border-radius: 0.2rem;
    padding: 0.1em 0.3em; }
  body video {
    width: 100%;
    height: auto; }
  body figure {
    padding: 1em; }
    body figure p:has(img) {
      display: flex;
      flex-wrap: wrap;
      gap: var(--block-gap); }
    body figure img + img {
      margin-block-start: 0; }
    body figure figcaption {
      text-align: center; }
  body ul.tags {
    display: inline;
    list-style: none;
    margin: 0;
    margin-inline-start: 0.25em;
    padding: 0; }
    body ul.tags li {
      display: inline; }
    body ul.tags li + li {
      margin-inline-start: 0.25em; }

/* Font scale factors for `font-size`, from https://typescale.com/ */
:root {
  --font-scale-minor-second: 1.067;
  --font-scale-major-second: 1.125;
  --font-scale-minor-third: 1.200;
  --font-scale-major-third: 1.250;
  --font-scale-perfect-fourth: 1.333;
  --font-scale-augmented-fourth: 1.414;
  --font-scale-perfect-fifth: 1.500;
  --font-scale-golden-ratio: 1.618; }

/* System font stacks for `font-family`, from https://modernfontstacks.com/ */
:root {
  --font-stack-system: system-ui, sans-serif;
  --font-stack-transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  --font-stack-old-style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  --font-stack-humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --font-stack-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  --font-stack-classical-humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  --font-stack-neo-grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  --font-stack-monospace-slab-serif: 'Nimbus Mono PS', 'Courier New', monospace;
  --font-stack-monospace-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-stack-industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  --font-stack-rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  --font-stack-slab-serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  --font-stack-antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  --font-stack-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  --font-stack-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; }

/*
  Configure typography
*/
:root {
  --font-family: var(--font-stack-classical-humanist);
  --font-scale: var(--font-scale-minor-second);
  --font-size: 100%;
  --line-height: 1.5;
  --heading-font-family: var(--font-stack-humanist);
  --heading-font-weight: normal;
  --heading-line-height: 1.2;
  --blockquote-font-family: var(--font-stack-transitional);
  /* nicer italic */
  --blockquote-font-style: italic;
  --blockquote-letter-spacing: 0.05em;
  --code-font-family: var(--font-stack-monospace-code); }

/*
  Set font family
*/
* {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height); }

main header *, h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  line-height: var(--heading-line-height);
  text-wrap: balance; }

body > header a {
  font-family: var(--heading-font-family);
  text-decoration: none; }
  body > header a:hover {
    text-decoration: underline; }

code, code *, kbd, pre, samp {
  font-family: var(--code-font-family); }

blockquote, blockquote * {
  font-family: var(--blockquote-font-family);
  font-style: var(--blockquote-font-style);
  letter-spacing: var(--blockquote-letter-spacing); }

/*
  Set font scale
*/
h1 {
  font-size: calc(1rem * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); }

h2 {
  font-size: calc(1rem * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); }

h3 {
  font-size: calc(1rem * var(--font-scale) * var(--font-scale) * var(--font-scale) * var(--font-scale)); }

h4 {
  font-size: calc(1rem * var(--font-scale) * var(--font-scale) * var(--font-scale)); }

h5 {
  font-size: calc(1rem * var(--font-scale) * var(--font-scale)); }

h6 {
  font-size: calc(1rem * var(--font-scale)); }

p {
  font-size: 1rem; }

small {
  font-size: calc(1rem / var(--font-scale)); }

code {
  font-size: calc(1rem / var(--font-scale)); }

/*
  Set typography of specific elements
*/
/* Big quote character on the left */
blockquote {
  position: relative; }
  blockquote::before {
    content: "“";
    font-size: 5em;
    line-height: 1em;
    position: absolute;
    top: -0.05em;
    left: 0; }
  blockquote > * {
    margin-inline-start: 3em; }

section#instamatic-photos {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 auto; }
  section#instamatic-photos header {
    grid-column: 1 / -1;
    text-align: center; }
  section#instamatic-photos article figure {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none; }
    section#instamatic-photos article figure a img {
      transition: all 0.2s ease; }
    section#instamatic-photos article figure a:hover img {
      box-shadow: 0 0 10px #888;
      transform: scale(1.05); }
    section#instamatic-photos article figure img {
      border-radius: 5px;
      display: block;
      margin: 0;
      width: 100%; }
    section#instamatic-photos article figure figcaption {
      margin: 0;
      padding: 0.5rem;
      text-align: center; }
      section#instamatic-photos article figure figcaption > * {
        font-size: 1rem;
        margin: 0; }
      section#instamatic-photos article figure figcaption p, section#instamatic-photos article figure figcaption time {
        color: #aaa;
        display: none;
        font-size: 0.7rem; }

pre {
  background-color: #232323;
  color: #E6E1DC; }
  pre .gd {
    color: #E6E1DC;
    background-color: #660000; }
  pre .gi {
    color: #E6E1DC;
    background-color: #144212; }
  pre .c, pre .c1, pre .c2 {
    color: #BC9458;
    font-style: italic; }
  pre .s1, pre .s2, pre .s, pre .sr {
    color: #A5C261; }
  pre .n {
    color: #E6E1DC; }
  pre .nv {
    color: #D0D0FF; }
  pre .k, pre .kp {
    color: #CC7833; }
  pre .o {
    color: #E6E1DC; }
  pre .mi {
    color: #A5C261; }
  pre .ss {
    color: #6E9CBE; }
  pre .si {
    color: #519F50; }
  pre .vi {
    color: #D0D0FF; }
  pre .p {
    color: #E6E1DC; }
  pre .m {
    color: #A5C261; }
  pre .nb {
    color: #CC7833; }
  pre .mh {
    color: #D0D0FF; }
  pre .nl {
    color: #6E9CBE; }
  pre .nt, pre .nc, pre .na {
    color: #FFC66D; }