/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}
/* Intuitive box sizing
   ========================================================================== */
html {
  box-sizing: border-box;
}

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

/* Color palette
   ========================================================================== */

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

:root {
  --accent-color: #c41d47;
  --text-color: #445566;
  --bg-color: #fffef8;
  --bullet-color: #d4d4d4;
  --counter-color: #737373;
  --code-bg-color: #fff2ea;
  --code-text-color: #445566;
  --pre-line-wrap-color: #87836f;
  --table-border-color: #525252;
  --footer-bg-color: #223344;
  --footer-text-color: #b4aaaa;
  --footer-link-color: #fea2a9;
  --nav-item-bg-color: rgb(239.58, 238.59, 232.63);
  --shadow-color: #979797c0;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #fea2a9;
    --text-color: #c4c4c4;
    --bg-color: #1f222a;
    --bullet-color: #666666;
    --counter-bg-color: #a3a3a3;
    --code-bg-color: #293c50;
    --code-text-color: #c4c4c4;
    --pre-line-wrap-color: #595543;
    --table-border-color: #525252;
    --footer-bg-color: rgb(8.97, 11.53, 18.68);
    --footer-text-color: #b4aaaa;
    --footer-link-color: #fea2a9;
    --nav-item-bg-color: rgb(42.42, 45.62, 54.1);
    --shadow-color: #131518c0;
  }
}

/* Typography
   ========================================================================== */

html {
  /* https://tailwindcss.com/docs/font-family */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  font-feature-settings: 'liga', 'kern';
}

/*
 * Fluid typography
 * https://www.smashingmagazine.com/2016/05/fluid-typography/
 *
 * Font size: 16px-21px
 * Screen size: 470px-1225px
 */
html {
  font-size: 16px;
}
@media (min-width: 470px) {
  html {
    font-size: calc(16px + 5 * (100vw - 470px) / 755);
  }
}
@media (min-width: 1225px) {
  html {
    font-size: 21px;
  }
}

h1 {
  font-size: 2.5rem;
  line-height: 2.8rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h2,
h3,
h4,
h5 {
  margin: 1.5rem 0 0.5rem 0;
  font-weight: normal;
}

body {
  line-height: 1.4;
}

header,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: calluna, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-feature-settings: 'dlig';
}

p {
  padding-top: 0.4em;
  margin: 0 0 1em 0;
}
ul,
ol {
  margin: 0.5rem 0 1rem;
  padding-inline-start: 2rem;
}
ul ul,
ul ol,
ol ul,
ol ol {
  margin: 0;
}

ol > li,
ul > li {
  padding-left: 0.375em;
}

header .subheading {
  font-weight: normal;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.8rem;
}

code,
pre {
  font-feature-settings: normal;
  font-family: Fira Code, Menlo, Consolas, Monaco, ui-monospace, andale mono, ubuntu mono,
    'Liberation Mono', 'Courier New', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  font-variant-ligatures: none;
  word-wrap: normal;
  tab-size: 4;
  hyphens: none;
}

/* Wrap lines and prepend them with a small arrow "↳" to indicate the line-break.
 * This should allow better code reading on mobile (I hope)
 */
pre .line {
  white-space: pre-wrap;
  word-break: break-all;
  padding-left: 1.5em;
  text-indent: -1.5em;
  overflow: hidden;
  position: relative;
}

pre .line:before {
  position: absolute;
  z-index: 1;
  left: 0;
  line-height: inherit;
  font-size: inherit;
  white-space: pre;
  color: var(--pre-line-wrap-color);
  content: '\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3\A\21B3';
}

/* Layout
   ========================================================================== */

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
}
header {
  text-align: center;
  margin: 0 1em;
}
@media (min-width: 802px) {
  header {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
  }
}

@media (min-width: 470px) {
  header {
    margin-left: 2.8em;
    margin-right: 2.8em;
  }
}
header p.subheading {
  margin-bottom: 1rem;
}
header > p:not(.subheading) {
  padding-top: 0.5em;
  padding-bottom: 0.9em;
  margin-bottom: 0;
}

main {
  flex: auto;
  max-width: 48rem;
  margin: 1rem auto;
}

article {
  color: var(--text-color) !important;
  font-size: 1.2em;
  padding: 0 1rem;
}

article blockquote {
  position: relative;
  margin: 0;
  padding-left: 0.75rem;
  font-style: italic;
  border-left: 0.25rem solid var(--accent-color);
  margin-left: -1rem;
  margin-bottom: 1.6em;
}

:not(.article-list) > article blockquote {
  &::before {
    content: '”';
    color: var(--accent-color);
    font-size: 72pt;
    position: absolute;
    top: -0.3em;
    font-family: calluna, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
    font-feature-settings: 'dlig';
  }

  padding-top: 2rem;
}

article pre {
  overflow-x: auto;
  max-width: 100vw;
  min-width: 250px;
  margin-left: -1rem;
  margin-right: -1rem;
  padding: 0.75rem 1rem 1rem 1rem;
  border-left: 0.25rem solid var(--accent-color);
}

.article-list article header {
  margin: 2em 0 0;
  text-align: left;
}

.article-list article header h2 {
  margin-bottom: 0;
}

.article-list article header h2,
.article-list article header p.subheading {
  display: inline;
}

.article-list article header p.subheading::before {
  content: ':';
  word-break: break-all;
  padding-right: 1rem;
}

.article-list article footer time {
  font-size: 1em;
  font-style: italic;
  display: block;
}

.article-list article blockquote {
  font-style: normal;
  border-left: 0;
  margin: 0;
  padding-left: 0;
}

@media (min-width: 470px) {
  .article-list article blockquote,
  .article-list article footer {
    padding-left: 1.5em;
  }
}

.article-list article footer {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  justify-content: space-between;
}

body > footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  opacity: 100%;
}

#footer {
  max-width: 48rem;
  padding: 1.4em;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

code {
  font-variant-ligatures: none;
  font-style: normal;
  font-size: calc(0.75em + 0.1vw);
  line-height: calc(1.5em + 0.2vw);
}

@media (prefers-color-scheme: light) {
  .image-dark {
    display: none;
  }
}
@media (prefers-color-scheme: dark) {
  .image-light {
    display: none;
  }
}

figure {
  text-align: center;
  position: relative;
  margin: 1rem 0;
  padding: 0;
}

figure > img {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

figure > object {
  margin: 0 auto;
  max-width: 100%;
}

figure .container-svg {
  margin: 0 auto;
  max-width: 100%;
  position: relative;
}

figure .container-svg > object {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

figure > figcaption {
  font-style: italic;
}

@media (min-width: 470px) {
  figure.aside {
    float: right;
    width: 30%;
    margin: 0 0 2rem 2rem;
    min-width: 280px;
  }
}

footer .copyright {
  margin: 0 auto;
}

nav.article-chain {
  background-color: var(--nav-item-bg-color);
  border-radius: 0.5rem;
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 1rem;
  gap: 1.5rem;
}

nav.article-chain a {
  flex: 1;
  display: flex;
  align-items: center;
  padding-right: 0.75rem;
  text-decoration: none;
}

nav.article-chain a span:not(.marker) {
  text-decoration: underline;
}

nav.article-chain a:hover span:not(.marker) {
  text-decoration: underline double;
  -webkit-text-decoration: underline double;
}

nav.article-chain a.next .marker {
  margin-right: 0.3rem;
}

nav.article-chain a.prev .marker {
  margin-left: 0.3rem;
}

@media (min-width: 470px) {
  nav.article-chain {
    margin-top: 4rem;
    padding: 1.5rem;
  }

  nav.article-chain {
    flex-direction: row;
  }

  nav.article-chain a {
    /* width: calc(50% - 1.5rem); */
  }

  nav.article-chain a.prev {
    justify-content: flex-end;
    text-align: right;
  }
}

nav.online {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.25rem 0 0.75rem 0;
}

footer nav.online a {
  width: 3rem;
  height: 3rem;
  display: inline-block;
  color: var(--footer-text-color);
}

nav.online a svg {
  transition-property: margin-top;
  transition-duration: 0.1s;
  filter: drop-shadow(1px 2px 3px lch(4.86% 13.66 254.64 / 10%))
    drop-shadow(2px 4px 6px lch(4.86% 13.66 254.64 / 10%))
    drop-shadow(4px 8px 12px lch(4.86% 13.66 254.64 / 10%));
}

nav.online a:hover svg {
  margin-top: -0.2rem;
  filter: drop-shadow(1px 2px 3px lch(4.86% 13.66 254.64 / 30%))
    drop-shadow(2px 4px 6px lch(4.86% 13.66 254.64 / 30%))
    drop-shadow(4px 8px 12px lch(4.86% 13.66 254.64 / 30%));
}

@media (prefers-color-scheme: dark) {
  nav.online a svg {
    transition-property: margin-top;
    transition-duration: 0.1s;
    filter: drop-shadow(1px 2px 3px lch(20% 0 0 / 10%)) drop-shadow(2px 4px 6px lch(20% 0 0 / 10%))
      drop-shadow(4px 8px 12px lch(20% 0 0 / 10%));
  }

  nav.online a:hover svg {
    margin-top: -0.2rem;
    filter: drop-shadow(1px 2px 3px lch(20% 0 0 / 30%)) drop-shadow(2px 4px 6px lch(20% 0 0 / 30%))
      drop-shadow(4px 8px 12px lch(20% 0 0 / 30%));
  }
}

article table {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
  /* margin-left: -1rem;
  margin-right: -1rem; */
}

article table thead,
article table tbody tr {
  border-bottom: 1px solid var(--table-border-color);
}

article table thead th {
  font-weight: bold;
  vertical-align: bottom;
  padding-bottom: 0.2em;
}
article table tbody td {
  padding: 0.2em 0.2em 0.2em 0;
}

/* Theme
   ========================================================================== */

body {
  border-top: 0.5rem solid var(--accent-color);
}

ol > li::marker {
  color: var(--counter-color);
}
ul > li::marker {
  color: var(--bullet-color);
}

a {
  text-decoration: underline;
  color: var(--accent-color);
}
a:hover {
  text-decoration: underline double;
  -webkit-text-decoration: underline double;
}
.article-list article footer a {
  color: var(--accent-color);
}

code {
  display: inline-block;
}

:not(pre) > code {
  padding: 0 0.2725em;
  background: var(--code-bg-color);
  color: var(--code-text-color);
  word-break: break-all;
  white-space: break-spaces;
  border-radius: 3px;
}

a > code {
  color: inherit;
  text-decoration: inherit;
}

blockquote code {
  font-style: inherit;
}

.highlight {
  position: relative;
}

footer:not(.tags) a {
  color: var(--footer-link-color);
}

footer.tags {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

footer.tags a {
  padding: 0.75rem 1.5rem;
  background-color: var(--nav-item-bg-color);
  border-radius: 1rem;
}

pre.chroma::before,
pre.chroma::after {
  content: '';
  z-index: -2;
  display: block;
  position: absolute;
  bottom: 0.75em;
  left: 0.18em;
  width: 40%;
  height: 20%;
  max-height: 13em;
  box-shadow: 0 13px 8px var(--shadow-color);
  transform: rotate(-1deg);
}

pre.chroma::after {
  right: 0.75em;
  left: auto;
  transform: rotate(1deg);
}
/* Light theme
   ========================================================================== */

@media (prefers-color-scheme: light) {
/* Generated using: hugo gen chromastyles --style=monokailight */

/* Background */ .bg { color:#272822;background-color:#fafafa; }
/* PreWrapper */ .chroma { color:#272822;background-color:#fafafa;-webkit-text-size-adjust:none; }
/* Error */ .chroma .err { color:#960050;background-color:#1e0010 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#e1e1e1 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#00a8c8 }
/* KeywordConstant */ .chroma .kc { color:#00a8c8 }
/* KeywordDeclaration */ .chroma .kd { color:#00a8c8 }
/* KeywordNamespace */ .chroma .kn { color:#f92672 }
/* KeywordPseudo */ .chroma .kp { color:#00a8c8 }
/* KeywordReserved */ .chroma .kr { color:#00a8c8 }
/* KeywordType */ .chroma .kt { color:#00a8c8 }
/* Name */ .chroma .n { color:#111 }
/* NameAttribute */ .chroma .na { color:#75af00 }
/* NameClass */ .chroma .nc { color:#75af00 }
/* NameConstant */ .chroma .no { color:#00a8c8 }
/* NameDecorator */ .chroma .nd { color:#75af00 }
/* NameEntity */ .chroma .ni { color:#111 }
/* NameException */ .chroma .ne { color:#75af00 }
/* NameLabel */ .chroma .nl { color:#111 }
/* NameNamespace */ .chroma .nn { color:#111 }
/* NameOther */ .chroma .nx { color:#75af00 }
/* NameProperty */ .chroma .py { color:#111 }
/* NameTag */ .chroma .nt { color:#f92672 }
/* NameBuiltin */ .chroma .nb { color:#111 }
/* NameBuiltinPseudo */ .chroma .bp { color:#111 }
/* NameVariable */ .chroma .nv { color:#111 }
/* NameVariableClass */ .chroma .vc { color:#111 }
/* NameVariableGlobal */ .chroma .vg { color:#111 }
/* NameVariableInstance */ .chroma .vi { color:#111 }
/* NameVariableMagic */ .chroma .vm { color:#111 }
/* NameFunction */ .chroma .nf { color:#75af00 }
/* NameFunctionMagic */ .chroma .fm { color:#75af00 }
/* Literal */ .chroma .l { color:#ae81ff }
/* LiteralDate */ .chroma .ld { color:#d88200 }
/* LiteralString */ .chroma .s { color:#d88200 }
/* LiteralStringAffix */ .chroma .sa { color:#d88200 }
/* LiteralStringBacktick */ .chroma .sb { color:#d88200 }
/* LiteralStringChar */ .chroma .sc { color:#d88200 }
/* LiteralStringDelimiter */ .chroma .dl { color:#d88200 }
/* LiteralStringDoc */ .chroma .sd { color:#d88200 }
/* LiteralStringDouble */ .chroma .s2 { color:#d88200 }
/* LiteralStringEscape */ .chroma .se { color:#8045ff }
/* LiteralStringHeredoc */ .chroma .sh { color:#d88200 }
/* LiteralStringInterpol */ .chroma .si { color:#d88200 }
/* LiteralStringOther */ .chroma .sx { color:#d88200 }
/* LiteralStringRegex */ .chroma .sr { color:#d88200 }
/* LiteralStringSingle */ .chroma .s1 { color:#d88200 }
/* LiteralStringSymbol */ .chroma .ss { color:#d88200 }
/* 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:#f92672 }
/* OperatorWord */ .chroma .ow { color:#f92672 }
/* OperatorReserved */ .chroma .or { color:#f92672 }
/* Punctuation */ .chroma .p { color:#111 }
/* 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 }
}

/* Dark theme
   ========================================================================== */

@media (prefers-color-scheme: dark) {
/* Generated using: hugo gen chromastyles --style=monokai */

/* Background */ .bg { color:#c4c4c4;background-color:#272822; }
/* PreWrapper */ .chroma { color:#c4c4c4;background-color:#272822;-webkit-text-size-adjust:none; }
/* Error */ .chroma .err { color:#960050;background-color:#1e0010 }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:#3c3d38 }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:#66d9ef }
/* KeywordConstant */ .chroma .kc { color:#66d9ef }
/* KeywordDeclaration */ .chroma .kd { color:#66d9ef }
/* KeywordNamespace */ .chroma .kn { color:#f92672 }
/* 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 }
/* NameOther */ .chroma .nx { color:#a6e22e }
/* NameTag */ .chroma .nt { color:#f92672 }
/* NameFunction */ .chroma .nf { color:#a6e22e }
/* NameFunctionMagic */ .chroma .fm { color:#a6e22e }
/* 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:#e6db74 }
/* 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:#f92672 }
/* OperatorWord */ .chroma .ow { color:#f92672 }
/* OperatorReserved */ .chroma .or { color:#f92672 }
/* Punctuation */ .chroma .p { color:#c4c4c4 }
/* 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:#f92672 }
/* GenericEmph */ .chroma .ge { font-style:italic }
/* GenericInserted */ .chroma .gi { color:#a6e22e }
/* GenericStrong */ .chroma .gs { font-weight:bold }
/* GenericSubheading */ .chroma .gu { color:#75715e }
}