*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  line-height: var(--font-line-height);
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html,
body {
  height: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

:root {
  --color-bg: hsl(0, 0%, 100%);
  --color-default: hsl(0, 0%, 13%);
  --color-mid: hsl(0, 0%, 25%);
  --color-border: hsl(360, 8%, 84%);
  --color-link: hsl(202, 90%, 50%);
  --color-codebg: hsl(0, 0%, 97%);
  --gray-4: hsl(210, 14%, 83%);
  --gray-8: hsl(210, 10%, 23%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(0, 0%, 8%);
    --color-default: hsl(0, 0%, 98%);
    --color-mid: hsl(230, 4%, 67%);
    --color-border: hsl(230, 4%, 30%);
    --color-link: hsl(202, 85%, 45%);
    --color-codebg: hsl(0, 0%, 16%);
    --color-code: hsl(0, 0%, 24%);
    --gray-8: hsl(210 17% 98%);
    --gray-4: hsl(210, 11%, 71%);
  }
}
:root {
  --font-regular: "Petrona Regular", Georgia, serif;
  --font-bold: "Petrona Bold", Georgia Gold, serif;
  --font-extrabold: "Petrona ExtraBold", Georgia Bold, serif;
  --font-sans: "Source Sans 3", Arial, sans-serif;
  --font-sans-light: "Source Sans 3 Light", Arial Light, sans-serif;
  --font-sans-bold: "Source Sans 3 Bold", Arial Bold, sans-serif;
  --font-sans-black: "Source Sans 3 Black", Arial Black, sans-serif;
  --font-mono: "Source Code Pro Semibold", Courier New, serif;
  --font-default: clamp(1rem, 0.5625rem + 2vw, 1.1875rem);
  --font-line-height: calc(1em + 0.4rem);
  --font-quote: calc(var(--font-default) * 0.85);
  --font-xs: 0.75rem;
  --font-s: 0.85rem;
  --font-m: 1.4rem;
  --font-l: 2.5rem;
}

@font-face {
  font-family: "Petrona Regular";
  src: url("fonts/Petrona-Regular.woff2") format("woff2"), url("fonts/Petrona-Regular.woff") format("woff"), url("fonts/Petrona-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Petrona Bold";
  src: url("fonts/Petrona-Bold.woff2") format("woff2"), url("fonts/Petrona-Bold.woff") format("woff"), url("fonts/Petrona-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Petrona Bold Italic";
  src: url("fonts/Petrona-BoldItalic.woff2") format("woff2"), url("fonts/Petrona-BoldItalic.woff") format("woff"), url("fonts/Petrona-BoldItalic.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Petrona ExtraBold";
  src: url("fonts/Petrona-Extrabold.woff2") format("woff2"), url("fonts/Petrona-Extrabold.woff") format("woff"), url("fonts/Petrona-Extrabold.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Petrona ExtraBold Italic";
  src: url("fonts/Petrona-ExtraboldItalic.woff2") format("woff2"), url("fonts/Petrona-ExtraboldItalic.woff") format("woff"), url("fonts/Petrona-ExtraboldItalic.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.woff2") format("woff2"), url("fonts/SourceSans3-Regular.woff") format("woff"), url("fonts/SourceSans3-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Light";
  src: url("fonts/SourceSans3-Light.woff2") format("woff2"), url("fonts/SourceSans3-Light.woff") format("woff"), url("fonts/SourceSans3-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Light Italic";
  src: url("fonts/SourceSans3-LightIt.woff2") format("woff2"), url("fonts/SourceSans3-LightIt.woff") format("woff"), url("fonts/SourceSans3-LightIt.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Bold";
  src: url("fonts/SourceSans3-Bold.woff2") format("woff2"), url("fonts/SourceSans3-Bold.woff") format("woff"), url("fonts/SourceSans3-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Bold Italic";
  src: url("fonts/SourceSans3-BoldIt.woff2") format("woff2"), url("fonts/SourceSans3-BoldIt.woff") format("woff"), url("fonts/SourceSans3-BoldIt.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Black";
  src: url("fonts/SourceSans3-Black.woff2") format("woff2"), url("fonts/SourceSans3-Black.woff") format("woff"), url("fonts/SourceSans3-Black.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3 Black Italic";
  src: url("fonts/SourceSans3-BlackIt.woff2") format("woff2"), url("fonts/SourceSans3-BlackIt.woff") format("woff"), url("fonts/SourceSans3-BlackIt.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro Semibold";
  src: url("fonts/SourceCodePro-Semibold.woff2") format("woff2"), url("fonts/SourceCodePro-Semibold.woff") format("woff"), url("fonts/SourceCodePro-Semibold.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --spacing-xs: calc(var(--font-line-height) * 0.5);
  --spacing-s: calc(var(--font-line-height) * 0.75);
  --spacing-m: calc(var(--font-line-height) * 1);
  --spacing-l: calc(var(--font-line-height) * 3);
}

html {
  background-color: var(--color-bg);
  color: var(--color-default);
  font-size: var(--font-default);
  font-variant-numeric: oldstyle-nums;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-regular);
  hyphens: auto;
}

blockquote {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-quote);
}

blockquote p {
  margin: 1rem 0;
}

blockquote > blockquote {
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-quote);
}

article {
  padding: var(--spacing-m) 0;
}

article:first-of-type {
  padding-top: calc(var(--spacing-m) * -1);
}

article:not(:last-of-type) {
  border-bottom: 1px solid var(--color-border);
}

h2,
h3,
main > header > h1,
article > header,
article > p,
.dropcap h2,
.dropcap h3,
.tags,
address,
.about h1,
.about h2,
.post_aside,
.e-content > p,
blockquote > blockquote {
  margin: 1rem 2rem;
}

main > header {
  padding-bottom: var(--spacing-m);
}

article > header {
  padding: var(--spacing-m) 0;
}

main > header a:hover h1,
article > header a:hover h1 {
  text-decoration: underline;
}

body > header,
body > footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-direction: row;
  color: var(--color-mid);
}

body > header {
  padding: var(--spacing-m) 0 var(--spacing-l) 0;
}

body > footer {
  padding: var(--spacing-l) 0 var(--spacing-m) 0;
}

body > header a,
footer a {
  color: var(--color-mid);
  margin-right: var(--spacing-xs);
}

body > header a:last-child {
  margin-right: 0;
}

.header {
  color: var(--color-default);
}

.grid {
  display: grid;
  grid-template-columns: 1fr min(62ch, 100%) 1fr;
}

header {
  grid-column: 2/3;
}

main {
  grid-column: 2/3;
}

footer {
  grid-column: 2/3;
}

h1 {
  font-family: var(--font-sans-black);
  font-size: var(--font-l);
  letter-spacing: -1px;
}

h2 {
  font-family: var(--font-sans-bold);
  padding: var(--spacing-s) 0;
  letter-spacing: -1px;
}

h3 {
  font-family: var(--font-sans-bold);
  font-size: var(--font-m);
  font-variant-caps: all-small-caps;
  letter-spacing: -1px;
}

strong {
  font-family: var(--font-bold);
  letter-spacing: -1px;
}

time,
address a {
  font-family: var(--font-sans);
  /* font-size: var(--font-s); */
  color: var(--color-mid);
}

address {
  font-style: normal;
}

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

.email {
  font-size: var(--font-s);
}

article p a,
article > li a,
ul > li a,
ol > li a,
blockquote a,
.post_aside a {
  color: var(--color-default);
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  text-decoration-thickness: 2px;
}

article p a:hover,
article li a:hover,
ul > li a:hover,
ol > li a:hover,
article > blockquote a:hover,
em:hover,
.post_aside a:hover {
  text-decoration-color: var(--color-default);
}

.dropcap > p:first-of-type:first-letter {
  float: left;
  position: relative;
  font-family: var(--font-extrabold);
  font-size: 5rem;
  line-height: 0.8;
  margin-left: -0.05em;
  margin-bottom: -0.05em;
  padding: 0.05em 0.075em 0 0;
}

a {
  color: var(--color-default);
  text-decoration: none;
}

hr {
  margin: var(--spacing-l) 0;
  border: none;
  font-family: var(--font-extrabold);
  font-size: var(--font-m);
  text-align: center;
}

hr:after {
  content: "***";
  position: relative;
  top: 8px;
  letter-spacing: 8px;
}

sup {
  line-height: 0;
  font-size: var(--font-xs);
  padding: 0 2px;
}

sup a {
  color: var(--color-link);
}

details {
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  margin-top: -1px;
  margin-left: 2rem;
  margin-right: 2rem;
  padding: 10px 0;
}

details summary {
  cursor: pointer;
}

details summary:focus {
  outline: 0;
}

details ul {
  padding-left: 0;
  margin-left: 1rem;
}

details li {
  /* list-style: none; */
  padding: 0.15em 0;
  margin-left: 1.1em;
}

pre {
  padding: var(--spacing-s);
  white-space: pre-wrap;
}

code {
  font-family: var(--font-mono);
  font-size: var(--font-s);
  padding: 1px 7px;
  background-color: var(--color-codebg);
  border-radius: 4px;
}

pre > code {
  padding: 0;
}

table {
  margin: 0 2rem;
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  font-family: var(--font-sans);
}

ol,
ul {
  margin-left: 2rem;
  margin-right: 2rem;
}

ul ul {
  margin: 0;
}

article > ul > li,
article > ol > li {
  margin: 1rem 0;
  padding-right: 2rem;
}

.toc {
  padding: var(--spacing-s) 0;
}

.toc h3 {
  margin-top: 0;
}

figure {
  margin: 3rem 0;
}

figcaption {
  font-family: var(--font-sans);
  font-size: var(--font-xs);
  color: var(--color-mid);
  margin-top: calc(var(--spacing-m) * -2.25);
}

figcaption a {
  color: var(--color-mid);
  text-decoration: underline;
}

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

img {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.bandcamp {
  margin: 3rem;
}

.twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}

.twoup {
  display: grid;
  grid-gap: 10px;
  margin-bottom: 0.2rem;
  grid-template-columns: 1fr 1fr;
}

.twoup__caption {
  margin: 10px 2rem 0 2rem;
  padding-bottom: 1rem;
}

audio {
  width: 100%;
  display: block;
  margin: var(--spacing-m) auto;
}

video {
  width: 100%;
  height: auto;
  margin: var(--spacing-m) 0;
}

.gallery {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  padding: var(--spacing-m) 0;
}

.post_aside {
  padding: var(--spacing-m) 0;
  margin-top: var(--spacing-l);
  border-top: 1px solid var(--gray-4);
  border-bottom: 1px solid var(--gray-4);
  color: var(--gray-8);
  font-family: var(--font-sans);
  font-size: var(--font-s);
}

.post_aside p {
  margin-left: 0;
  margin-right: 0;
}

.archive {
  margin-top: var(--spacing-m);
}

.archive-tags {
  display: grid;
  grid-template-columns: 1fr 0fr 1fr 0fr;
  padding-left: var(--spacing-s);
  gap: 0 var(--spacing-s);
}

.archive-tags li {
  display: inline-grid;
  padding-right: var(--spacing-m);
  margin: 0;
}

.archive-tags a,
.archive-list a {
  color: var(--color-default);
  text-decoration: none;
}

.archive-tags a:hover,
.archive-list a:hover {
  text-decoration: underline;
}

.archive-list span a:hover {
  text-decoration: none;
}

.archive-list li {
  display: flex;
  padding: 0;
  margin-left: 0;
}

.archive-list li time {
  font-family: var(--font-sans-light);
  flex: 0 0 4rem;
  padding-right: var(--spacing-s);
}

.about img {
  border-radius: 100%;
  border: 2px solid var(--color-default);
  max-width: 8em;
  float: left;
  margin-right: var(--spacing-m);
  shape-outside: circle();
}

.lastmod {
  font-family: var(--font-sans-light);
  font-size: var(--font-s);
  margin-top: var(--spacing-m);
  text-align: right;
}

.reading li {
  display: flex;
  justify-content: space-between;
}

.reading:first-of-type {
  margin-top: var(--spacing-l);
}

.reading span:first-of-type {
  padding-right: 1rem;
}

.reading span:nth-of-type(2) {
  flex: 0 0 2rem;
}

.category {
  font-family: var(--font-sans);
  color: var(--color-mid);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags {
  font-family: var(--font-sans);
  font-size: var(--font-s);
  color: var(--color-mid);
  list-style: none;
  padding-top: var(--spacing-m);
}

.tags strong {
  font-family: var(--font-sans);
  padding-right: 0.25rem;
}

.tags a,
.category a {
  color: var(--color-mid);
  text-decoration: none;
}

.tags a:hover,
.category a:hover {
  color: var(--color-link);
}

.tags ul,
.category ul {
  padding: 0;
  margin: 0 auto;
}

.tags li,
.category ul {
  display: inline-block;
  padding-right: 2px;
}

.category li:after {
  content: ",";
}

.tags li:after {
  content: " /";
  color: var(--gray-4);
}

.tags li:last-child:after,
.category li:last-child:after {
  content: none;
}

.pagination {
  margin-bottom: var(--spacing-m);
  margin-left: -16px;
}

.pagination p,
.pagination a {
  display: inline-block;
}

.pagination p {
  padding-left: var(--spacing-s);
}

.pagination a {
  color: var(--color-mid);
  padding: 8px 16px;
}

.pagination a.active {
  color: var(--color-default);
}

.pagination a:hover {
  color: var(--color-default);
}

.pagination span {
  font-family: var(--font-sans);
  color: var(--color-mid);
  padding: 8px 16px;
  text-decoration: none;
}

@media (prefers-color-scheme: light) {
  /* Background */
  .chroma {
    background-color: var(--color-codebg);
  }
  /* Error */
  .chroma .err {
    color: #960050;
    background-color: #1e0010;
  }
  /* LineTableTD */
  .chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
  }
  /* LineTable */
  .chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    overflow: auto;
    display: block;
  }
  /* LineHighlight */
  .chroma .hl {
    display: block;
    width: 100%;
    background-color: #ffffcc;
  }
  /* LineNumbersTable */
  .chroma .lnt {
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }
  /* LineNumbers */
  .chroma .ln {
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }
  /* Keyword */
  .chroma .k {
    color: #00a8c8;
  }
  /* KeywordConstant */
  .chroma .kc {
    color: #00a8c8;
  }
  /* KeywordDeclaration */
  .chroma .kd {
    color: #00a8c8;
  }
  /* KeywordNamespace */
  .chroma .kn {
    color: #d92164;
  }
  /* KeywordPseudo */
  .chroma .kp {
    color: #00a8c8;
  }
  /* KeywordReserved */
  .chroma .kr {
    color: #00a8c8;
  }
  /* KeywordType */
  .chroma .kt {
    color: #00a8c8;
  }
  /* Name */
  .chroma .n {
    color: #111111;
  }
  /* NameAttribute */
  .chroma .na {
    color: #75af00;
  }
  /* NameBuiltin */
  .chroma .nb {
    color: #111111;
  }
  /* NameBuiltinPseudo */
  .chroma .bp {
    color: #111111;
  }
  /* NameClass */
  .chroma .nc {
    color: #75af00;
  }
  /* NameConstant */
  .chroma .no {
    color: #00a8c8;
  }
  /* NameDecorator */
  .chroma .nd {
    color: #75af00;
  }
  /* NameEntity */
  .chroma .ni {
    color: #111111;
  }
  /* NameException */
  .chroma .ne {
    color: #75af00;
  }
  /* NameFunction */
  .chroma .nf {
    color: #75af00;
  }
  /* NameFunctionMagic */
  .chroma .fm {
    color: #111111;
  }
  /* NameLabel */
  .chroma .nl {
    color: #111111;
  }
  /* NameNamespace */
  .chroma .nn {
    color: #111111;
  }
  /* NameOther */
  .chroma .nx {
    color: #75af00;
  }
  /* NameProperty */
  .chroma .py {
    color: #111111;
  }
  /* NameTag */
  .chroma .nt {
    color: #d92164;
  }
  /* NameVariable */
  .chroma .nv {
    color: #111111;
  }
  /* NameVariableClass */
  .chroma .vc {
    color: #111111;
  }
  /* NameVariableGlobal */
  .chroma .vg {
    color: #111111;
  }
  /* NameVariableInstance */
  .chroma .vi {
    color: #111111;
  }
  /* NameVariableMagic */
  .chroma .vm {
    color: #111111;
  }
  /* Literal */
  .chroma .l {
    color: #ae81ff;
  }
  /* LiteralDate */
  .chroma .ld {
    color: #a36200;
  }
  /* LiteralString */
  .chroma .s {
    color: #a36200;
  }
  /* LiteralStringAffix */
  .chroma .sa {
    color: #a36200;
  }
  /* LiteralStringBacktick */
  .chroma .sb {
    color: #a36200;
  }
  /* LiteralStringChar */
  .chroma .sc {
    color: #a36200;
  }
  /* LiteralStringDelimiter */
  .chroma .dl {
    color: #a36200;
  }
  /* LiteralStringDoc */
  .chroma .sd {
    color: #a36200;
  }
  /* LiteralStringDouble */
  .chroma .s2 {
    color: #a36200;
  }
  /* LiteralStringEscape */
  .chroma .se {
    color: #8045ff;
  }
  /* LiteralStringHeredoc */
  .chroma .sh {
    color: #a36200;
  }
  /* LiteralStringInterpol */
  .chroma .si {
    color: #a36200;
  }
  /* LiteralStringOther */
  .chroma .sx {
    color: #a36200;
  }
  /* LiteralStringRegex */
  .chroma .sr {
    color: #a36200;
  }
  /* LiteralStringSingle */
  .chroma .s1 {
    color: #a36200;
  }
  /* LiteralStringSymbol */
  .chroma .ss {
    color: #a36200;
  }
  /* LiteralNumber */
  .chroma .m {
    color: #ae81ff;
  }
  /* LiteralNumberBin */
  .chroma .mb {
    color: #ae81ff;
  }
  /* LiteralNumberFloat */
  .chroma .mf {
    color: #ae81ff;
  }
  /* LiteralNumberHex */
  .chroma .mh {
    color: #ae81ff;
  }
  /* LiteralNumberInteger */
  .chroma .mi {
    color: #ae81ff;
  }
  /* LiteralNumberIntegerLong */
  .chroma .il {
    color: #ae81ff;
  }
  /* LiteralNumberOct */
  .chroma .mo {
    color: #ae81ff;
  }
  /* Operator */
  .chroma .o {
    color: #d92164;
  }
  /* OperatorWord */
  .chroma .ow {
    color: #d92164;
  }
  /* Punctuation */
  .chroma .p {
    color: #111111;
  }
  /* Comment */
  .chroma .c {
    color: #75715e;
  }
  /* CommentHashbang */
  .chroma .ch {
    color: #75715e;
  }
  /* CommentMultiline */
  .chroma .cm {
    color: #75715e;
  }
  /* CommentSingle */
  .chroma .c1 {
    color: #75715e;
  }
  /* CommentSpecial */
  .chroma .cs {
    color: #75715e;
  }
  /* CommentPreproc */
  .chroma .cp {
    color: #75715e;
  }
  /* CommentPreprocFile */
  .chroma .cpf {
    color: #75715e;
  }
  /* GenericEmph */
  .chroma .ge {
    font-style: italic;
  }
  /* GenericStrong */
  .chroma .gs {
    font-weight: bold;
  }
}
@media (prefers-color-scheme: dark) {
  /* Background */
  .chroma {
    background-color: var(--color-codebg);
  }
  /* Error */
  .chroma .err {
    color: #960050;
    background-color: #1e0010;
  }
  /* LineTableTD */
  .chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
  }
  /* LineTable */
  .chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    overflow: auto;
    display: block;
  }
  /* LineHighlight */
  .chroma .hl {
    display: block;
    width: 100%;
    background-color: #ffffcc;
  }
  /* LineNumbersTable */
  .chroma .lnt {
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }
  /* LineNumbers */
  .chroma .ln {
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #7f7f7f;
  }
  /* Keyword */
  .chroma .k {
    color: #66d9ef;
  }
  /* KeywordConstant */
  .chroma .kc {
    color: #66d9ef;
  }
  /* KeywordDeclaration */
  .chroma .kd {
    color: #66d9ef;
  }
  /* KeywordNamespace */
  .chroma .kn {
    color: #d92164;
  }
  /* KeywordPseudo */
  .chroma .kp {
    color: #66d9ef;
  }
  /* KeywordReserved */
  .chroma .kr {
    color: #66d9ef;
  }
  /* KeywordType */
  .chroma .kt {
    color: #66d9ef;
  }
  /* NameAttribute */
  .chroma .na {
    color: #a6e22e;
  }
  /* NameClass */
  .chroma .nc {
    color: #a6e22e;
  }
  /* NameConstant */
  .chroma .no {
    color: #66d9ef;
  }
  /* NameDecorator */
  .chroma .nd {
    color: #a6e22e;
  }
  /* NameException */
  .chroma .ne {
    color: #a6e22e;
  }
  /* NameFunction */
  .chroma .nf {
    color: #a6e22e;
  }
  /* NameOther */
  .chroma .nx {
    color: #a6e22e;
  }
  /* NameTag */
  .chroma .nt {
    color: #d92164;
  }
  /* Literal */
  .chroma .l {
    color: #ae81ff;
  }
  /* LiteralDate */
  .chroma .ld {
    color: #e6db74;
  }
  /* LiteralString */
  .chroma .s {
    color: #e6db74;
  }
  /* LiteralStringAffix */
  .chroma .sa {
    color: #e6db74;
  }
  /* LiteralStringBacktick */
  .chroma .sb {
    color: #e6db74;
  }
  /* LiteralStringChar */
  .chroma .sc {
    color: #e6db74;
  }
  /* LiteralStringDelimiter */
  .chroma .dl {
    color: #e6db74;
  }
  /* LiteralStringDoc */
  .chroma .sd {
    color: #e6db74;
  }
  /* LiteralStringDouble */
  .chroma .s2 {
    color: #e6db74;
  }
  /* LiteralStringEscape */
  .chroma .se {
    color: #ae81ff;
  }
  /* LiteralStringHeredoc */
  .chroma .sh {
    color: #e6db74;
  }
  /* LiteralStringInterpol */
  .chroma .si {
    color: #a36200;
  }
  /* LiteralStringOther */
  .chroma .sx {
    color: #e6db74;
  }
  /* LiteralStringRegex */
  .chroma .sr {
    color: #e6db74;
  }
  /* LiteralStringSingle */
  .chroma .s1 {
    color: #e6db74;
  }
  /* LiteralStringSymbol */
  .chroma .ss {
    color: #e6db74;
  }
  /* LiteralNumber */
  .chroma .m {
    color: #ae81ff;
  }
  /* LiteralNumberBin */
  .chroma .mb {
    color: #ae81ff;
  }
  /* LiteralNumberFloat */
  .chroma .mf {
    color: #ae81ff;
  }
  /* LiteralNumberHex */
  .chroma .mh {
    color: #ae81ff;
  }
  /* LiteralNumberInteger */
  .chroma .mi {
    color: #ae81ff;
  }
  /* LiteralNumberIntegerLong */
  .chroma .il {
    color: #ae81ff;
  }
  /* LiteralNumberOct */
  .chroma .mo {
    color: #ae81ff;
  }
  /* Operator */
  .chroma .o {
    color: #d92164;
  }
  /* OperatorWord */
  .chroma .ow {
    color: #d92164;
  }
  /* Comment */
  .chroma .c {
    color: #75715e;
  }
  /* CommentHashbang */
  .chroma .ch {
    color: #75715e;
  }
  /* CommentMultiline */
  .chroma .cm {
    color: #75715e;
  }
  /* CommentSingle */
  .chroma .c1 {
    color: #75715e;
  }
  /* CommentSpecial */
  .chroma .cs {
    color: #75715e;
  }
  /* CommentPreproc */
  .chroma .cp {
    color: #75715e;
  }
  /* CommentPreprocFile */
  .chroma .cpf {
    color: #75715e;
  }
  /* GenericDeleted */
  .chroma .gd {
    color: #d92164;
  }
  /* GenericEmph */
  .chroma .ge {
    font-style: italic;
  }
  /* GenericInserted */
  .chroma .gi {
    color: #a6e22e;
  }
  /* GenericStrong */
  .chroma .gs {
    font-weight: bold;
  }
  /* GenericSubheading */
  .chroma .gu {
    color: #75715e;
  }
}
@media (max-width: 38.75em) {
  body > header,
  main > header > h1,
  h2,
  h3,
  #colophon,
  article > header,
  article > p,
  article > h2,
  address,
  details,
  figcaption,
  .tags,
  .dropcap h2,
  .dropcap h3,
  .about h1,
  .about h2,
  .archive-list,
  footer,
  .post_aside,
  .e-content > p,
  .twoup__caption {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .footer {
    flex-direction: column;
  }
  ol,
  ul {
    margin-left: 0;
  }
  .archive-main {
    margin-left: 0;
    margin-right: 0;
  }
  .archive-list ul {
    padding-left: 0;
  }
  article > ul > li,
  article > ol > li {
    padding-right: 1rem;
  }
  blockquote {
    max-width: 34ch;
  }
  table {
    max-width: 90%;
    margin: 0 auto;
  }
  .bandcamp {
    margin: 1rem 0;
  }
  .pagination {
    padding-left: 1rem;
  }
  .footnotes ol {
    margin-left: 0;
    margin-right: 1rem;
  }
  .gallery {
    grid-template-columns: auto auto;
  }
  .twoup {
    grid-template-columns: 1fr;
  }
  .archive-tags {
    gap: 0;
  }
  .archive-tags li {
    padding-right: var(--spacing-s);
  }
  pre {
    overflow-x: scroll;
  }
  .copyright {
    padding-top: var(--spacing-xs);
  }
}