/* arnabocean theme
   One stylesheet for the whole site (fonts are in fonts.css).

   Sections: 1 tokens  2 base  3 layout  4 components  5 post content
             6 code highlighting  7 print

   To change text size, edit --text-size: every other size is relative to it.
   Colours are defined once below, as light-dark(light value, dark value). */


/* 1. Tokens ================================================================ */

:root {
    color-scheme: light dark;

    /* Sizes */
    --text-size: 18px;          /* body text; 1rem */
    --ui-size: 0.7222rem;       /* 13px: nav meta, sidebar, footer, buttons */
    --nav-size: 0.8889rem;      /* 16px: navigation links */
    --title-size: 1.7778rem;    /* 32px: site title */
    --container: 900px;
    --reading-width: 620px;     /* article and page column */
    --gutter: 30px;

    /* Fonts */
    --text-font: "Gentium Basic", "Baskerville", serif;
    --ui-font: "Open Sans", sans-serif;
    --title-font: "Alex Brush", serif;
    --mono-font: Menlo, Monaco, Consolas, "Courier New", monospace;

    /* Colours: light-dark(light, dark) */
    --bg:                 light-dark(#ffffff, #2b3e50);
    --text:               light-dark(#555555, #ebebeb);
    --muted:              #aaaaaa;
    --heading:            light-dark(#317eac, #ebebeb);
    --heading-link:       light-dark(#444444, #efefef);
    --heading-link-hover: light-dark(#317eac, #5fb9ed);
    --link:               light-dark(#2e77a3, #5fb9ed);
    --link-hover:         light-dark(#1f5a7e, #97d1f3);
    --rule:               #cccccc;
    --rule-light:         light-dark(#eeeeee, #4e5d6c);
    --box-bg:             light-dark(#f5f5f5, #385168);
    --box-border:         light-dark(#e3e3e3, #212f3c);
    --panel-bg:           light-dark(#ffffff, #385168);
    --panel-border:       light-dark(transparent, #212f3c);
    --thumb-bg:           light-dark(#ffffff, #2b3e50);
    --button-bg:          light-dark(#ffffff, #385168);
    --button-border:      light-dark(rgba(0, 0, 0, 0.1), transparent);
    --button-hover:       light-dark(#e6e6e6, #39444e);
    --pager-bg:           light-dark(#ffffff, #4e5d6c);
    --pager-border:       light-dark(#dddddd, transparent);
    --pager-hover:        light-dark(#eeeeee, #485563);
    --pager-disabled:     light-dark(#999999, #97a3ae);
    --accordion-bg:       light-dark(#ffffff, #385168);
    --accordion-border:   light-dark(#dddddd, #212f3c);
    --accordion-head-bg:  light-dark(#f5f5f5, #485563);
    --accordion-head:     light-dark(#555555, #ebebeb);
    --count-bg:           light-dark(#555555, #ebebeb);
    --count-text:         light-dark(#f5f5f5, #485563);
    --code-text:          #c7254e;
    --code-bg:            #f9f2f4;
    --amp:                light-dark(#666666, #efefef);
    --nav-bg:             #317eac;
    --nav-border:         #178acc;
    --nav-text:           light-dark(#ffffff, #ebebeb);
}


/* 2. Base ================================================================== */

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

html {
    font-size: var(--text-size);
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 70px;   /* in-page links land below the fixed header */
}

body {
    margin: 10px;
    padding-top: 70px;          /* room for the fixed header */
    font-family: var(--text-font);
    line-height: 1.4286;
    color: var(--text);
    background-color: var(--bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--text-font);
    font-weight: bold;
    line-height: 1.1;
    color: var(--heading);
}
h1, h2, h3 { margin: 20px 0 10px; }
h4, h5, h6 { margin: 10px 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.6667rem; }
h3 { font-size: 1.3333rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.7778rem; }
h6 { font-size: 0.6667rem; }

:is(h1, h2, h3, h4, h5, h6) > a {
    color: var(--heading-link);
    text-decoration: none;
    transition: color 0.3s;
}
:is(h1, h2, h3, h4, h5, h6) > a:hover {
    color: var(--heading-link-hover);
    text-decoration: none;
}

p {
    line-height: 1.5em;
    margin: 0.75em 0;
}

ul, ol {
    margin: 0 0 10px;
}

a {
    color: var(--link);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

hr {
    margin: 20px 0;
    border: 0;
    border-top: 1px dotted var(--rule);
}

img {
    vertical-align: middle;
    border: 0;
}

figure {
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* 3. Layout ================================================================ */

/* "Skip to content": hidden until focused with the keyboard */
.skip-link {
    position: absolute;
    top: -100px;
    left: 10px;
    z-index: 2000;
    padding: 8px 12px;
    font-family: var(--ui-font);
    font-size: var(--ui-size);
    color: var(--link);
    background-color: var(--bg);
    border-radius: 4px;
}
.skip-link:focus {
    top: 10px;
}

.container {
    margin: 0 auto;
    padding: 0 10px;
}
@media (min-width: 768px) {
    .container { width: 750px; }
}
@media (min-width: 992px) {
    .container { width: var(--container); }
}

/* Header and navigation. When the links cannot fit, they collapse behind a
   menu button (a label for the hidden #nav-toggle checkbox, see base.html). */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 0 10px;            /* same side margin as body, so edges line up */
    background-color: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
.site-header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    container: site-header / inline-size;   /* the nav sizes itself to this */
}

.site-title {
    margin-left: -15px;
    padding: 15px;
    font-family: var(--title-font);
    font-size: var(--title-size);
    line-height: 20px;
    color: var(--nav-text);
}
.site-title:hover {
    color: var(--nav-text);
    text-decoration: none;
}

.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.nav-toggle-button {
    margin: 8px 0 8px auto;
    padding: 9px 10px;
    border: 1px solid var(--nav-border);
    border-radius: 4px;
    cursor: pointer;
}
.nav-toggle-button:hover {
    background-color: var(--nav-border);
}
.nav-toggle:focus-visible + .nav-toggle-button {
    outline: 2px solid var(--nav-text);
    outline-offset: 2px;
}
.nav-toggle-button .bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--nav-text);
}
.nav-toggle-button .bar + .bar {
    margin-top: 4px;
}

.site-nav {
    display: none;
    flex-basis: 100%;
    border-top: 1px solid #1995dc;
}
.nav-toggle:checked ~ .site-nav {
    display: block;
}

.nav-links {
    margin: 0;
    padding: 0 0 0 25px;
    list-style: none;
    font-family: var(--ui-font);
    font-weight: 300;
    font-size: var(--nav-size);
}
.nav-links a {
    display: block;
    padding: 10px 15px;
    line-height: 20px;
    color: var(--nav-text);
}
.nav-links a:hover {
    color: var(--nav-text);
    text-decoration: none;
}
.nav-links .active a {
    margin-bottom: -1px;        /* the underline adds no height */
    border-bottom: 1px dotted;
}

/* Hovered and current-page links look larger (16px -> 18px). A transform is
   purely visual, so neighbouring links and the bar's height never change. */
.nav-label {
    display: inline-block;
    transform-origin: left center;      /* phone menu: grow to the right */
    transition: transform 0.15s ease;
}
.nav-links a:hover .nav-label,
.nav-links .active .nav-label {
    transform: scale(1.125);
}
@media (prefers-reduced-motion: reduce) {
    .nav-label { transition: none; }
}

.nav-icon {
    height: 1.4em;
    margin: -0.2em 0;           /* full-size icon without making the link taller */
    vertical-align: middle;
}

/* Full nav whenever it fits. Its spacing shrinks smoothly with the room the
   header has (100cqi = the header's content width): from 680px of room down
   to 540px, link padding goes from 15px to 5px and the indent before each
   group of links from 25px to 0. Below 540px of room (screens under 580px,
   i.e. phones) the menu button is used.
   Tuned for the current links, which need 516px at the tightest spacing and
   656px at full spacing, plus 12px for a hovered link. If more categories are
   added and the nav wraps, raise the 540px and 680px figures by the same
   amount as the extra width. */
@container site-header (min-width: 540px) {
    .nav-toggle-button {
        display: none;
    }
    .site-nav,
    .nav-toggle:checked ~ .site-nav {
        --nav-pad: clamp(5px, 5px + (100cqi - 540px) / 14, 15px);
        --nav-indent: clamp(0px, (100cqi - 540px) / 5.6, 25px);
        display: flex;
        flex: 1;
        flex-basis: auto;
        justify-content: space-between;
        border-top: 0;
    }
    .nav-links {
        display: flex;
        padding-left: var(--nav-indent);
    }
    .nav-links a {
        padding: 15px var(--nav-pad);
    }
    .nav-label {
        transform-origin: center;
    }
    .nav-links-end li:last-child .nav-label {
        transform-origin: right center;     /* grow away from the edge */
    }
    .nav-links-end {
        margin-right: calc(-1 * var(--nav-pad));
    }
}

/* Light/dark switch in the footer (includes/theme_switch.html). "Auto" leaves
   color-scheme as "light dark", which follows the system setting. The radios
   work without JavaScript; with it, a saved choice arrives as data-theme. */
:root[data-theme="light"],
:root:has(#theme-light:checked) { color-scheme: light; }
:root[data-theme="dark"],
:root:has(#theme-dark:checked) { color-scheme: dark; }

.theme-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
    border: 0;
}
.theme-switch legend {
    float: left;                /* lets the legend sit in the row */
    margin-right: 6px;
    padding: 0;
}
.theme-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-switch label {
    display: block;
    padding: 4px;
    color: var(--text);
    border: 1px solid transparent;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
.theme-switch label:hover,
.theme-switch input:checked + label {
    opacity: 1;
}
.theme-switch input:checked + label {
    background-color: var(--box-bg);
    border-color: var(--box-border);
}
.theme-switch input:focus-visible + label {
    outline: 2px solid var(--link);
    outline-offset: 1px;
}
.theme-switch svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Page: content column plus sidebar, or a single narrow reading column */
main {
    min-width: 0;
    overflow-wrap: break-word;
}
.page-narrow main {
    display: flow-root;         /* keep the last paragraph's margin inside */
}
@media (min-width: 768px) {
    .page-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) calc((100% + var(--gutter)) / 3 - var(--gutter));
        column-gap: var(--gutter);
        align-items: start;
    }
    .page-narrow main {
        max-width: var(--reading-width);
        margin-left: auto;
    }
}

.site-footer {
    font-family: var(--ui-font);
    font-weight: 300;
    font-size: var(--ui-size);
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: var(--gutter);
    row-gap: 10px;
    padding-bottom: 10px;
}
.footer-row p {
    margin: 0;
    line-height: 1.4286;
}
.footer-row .back-to-top {
    margin-top: 0.75em;
    white-space: nowrap;
}
@media (max-width: 599px) {
    /* Copyright on its own row; theme switch and "Back to top" below it */
    .footer-row > p:first-child {
        flex-basis: 100%;
    }
    .footer-row .back-to-top {
        margin-top: 0;
        align-self: center;
    }
}


/* 4. Components ============================================================ */

/* Grey boxes: post info on list pages, sidebar, related posts */
.box {
    margin-bottom: 20px;
    padding: 19px;
    font-family: var(--ui-font);
    font-weight: 300;
    font-size: var(--ui-size);
    background-color: var(--box-bg);
    border: 1px solid var(--box-border);
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.box-sm {
    padding: 9px;
    border-radius: 3px;
}

/* Dotted underlines for links in text */
.entry-content a,
.summary a,
.box a {
    text-decoration: underline dotted 1px;
    text-underline-offset: 3px;
}
.entry-content a:hover,
.summary a:hover,
.box a:hover {
    text-decoration-style: solid;
}

/* Article page header and info line */
.post-header {
    margin: 40px 0 0;
    border-bottom: 1px solid var(--rule-light);
}
.post-meta {
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.post-info {
    font-family: var(--ui-font);
    font-weight: 300;
    font-size: var(--ui-size);
}

/* The ∞ permalink button under linked posts */
.summary .permalink-button {
    display: inline-block;
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    background-color: var(--button-bg);
    border: 1px solid var(--button-border);
    border-radius: 3px;
}
.summary .permalink-button:hover {
    background-color: var(--button-hover);
}

/* Newer/Older and Previous/Next buttons */
.pager {
    display: flex;
    margin: 20px 0;
    padding: 0;
    list-style: none;
}
.pager .next {
    margin-left: auto;
}
.pager a,
.pager span {
    display: inline-block;
    padding: 5px 14px;
    font-family: var(--ui-font);
    font-weight: 300;
    font-size: var(--ui-size);
    background-color: var(--pager-bg);
    border: 1px solid var(--pager-border);
    border-radius: 15px;
}
.pager a:hover {
    text-decoration: none;
    background-color: var(--pager-hover);
}
.pager .disabled span {
    color: var(--pager-disabled);
    cursor: not-allowed;
}

/* Sidebar */
.sidebar {
    hyphens: auto;
    overflow-wrap: break-word;
}
.sidebar a {
    color: inherit;
}
.aboutme {
    padding: 9px 15px;
}
.avatar {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0.75em 0;
    padding: 4px;
    background-color: var(--thumb-bg);
    border: 1px solid #dddddd;
    border-radius: 4px;
}
.sidebar-links {
    padding-bottom: 29px;
}
.sidebar-section {
    padding: 10px 8px;
}
.sidebar h4 a {
    text-decoration: none;
}
.icon-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.icon-list li {
    margin-bottom: -1px;
    padding: 10px 8px;
}
.icon-list li:last-child {
    padding-bottom: 0;
}

.pinboard dl {
    margin: 0;
    padding: 0 8px;
}
.pinboard dt {
    margin-top: 10px;
    font-weight: normal;
}
.pinboard dd {
    margin: 2px 0 0;
    color: var(--muted);
}
.pinboard h4 {
    padding: 0 8px;
}

.tagcloud {
    margin: 0 8px;
    padding: 0;
    list-style: none;
}
.tagcloud li {
    display: inline-block;
    padding: 0 5px;
}
.tagcloud a {
    text-decoration: none;
}
.tag-0 { font-size: 1.1852rem; }    /* 16pt */
.tag-1 { font-size: 0.963rem; }     /* 13pt */
.tag-2 { font-size: 0.7407rem; }    /* 10pt */
.tag-3 { font-size: 0.5926rem; }    /* 8pt */
.tag-4 { font-size: 0.4444rem; }    /* 6pt */

/* Tags and Categories pages: <details> sections, one open at a time */
.accordion {
    margin-bottom: 20px;
}
.accordion details {
    background-color: var(--accordion-bg);
    border: 1px solid var(--accordion-border);
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.accordion details + details {
    margin-top: 5px;
}
.accordion summary {
    display: block;
    padding: 10px 15px;
    color: var(--accordion-head);
    background-color: var(--accordion-head-bg);
    border-radius: 3px 3px 0 0;
    list-style: none;
    cursor: pointer;
}
.accordion summary::-webkit-details-marker {
    display: none;
}
.accordion summary h4 {
    margin: 0;
    font-size: 0.8889rem;
    color: inherit;
}
.accordion-body {
    padding: 15px;
    border-top: 1px solid var(--accordion-border);
}
.count {
    float: right;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    color: var(--count-text);
    background-color: var(--count-bg);
    border-radius: 10px;
}

.categories-timestamp {
    margin-right: 10px;
    font-size: 0.9em;
    color: var(--muted);
}


/* 5. Post content ========================================================== */

blockquote {
    margin: 0 0 20px;
    padding: 0 25px;
    font-size: larger;
    font-style: italic;
    border-left: 5px solid var(--rule-light);
}
blockquote p:last-child {
    margin-bottom: 0;
}

code, kbd, pre, samp {
    font-family: var(--mono-font);
}
code {
    padding: 2px 4px;
    font-size: var(--ui-size);
    color: var(--code-text);
    background-color: var(--code-bg);
    border-radius: 4px;
}
pre {
    display: block;
    margin: 0 0 10px;
    padding: 9.5px;
    overflow: auto;
    font-size: var(--ui-size);
    line-height: 1.4286;
    word-break: break-all;
    overflow-wrap: break-word;
    color: #333333;
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    border-radius: 4px;
}
pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}

/* Tables scroll sideways on narrow screens instead of widening the page */
table {
    display: block;
    max-width: 100%;
    margin: 0 0 20px;
    overflow-x: auto;
    border-collapse: collapse;
}
th, td {
    padding: 4px 16px 4px 0;
    text-align: left;
    vertical-align: top;
}
thead th {
    border-bottom: 1px solid var(--rule-light);
}

.entry-content img,
.summary img {
    max-width: 100%;
    height: auto;
}
.entry-content figcaption,
.caption {
    margin-bottom: 2px;
    font-size: small;
}
.imagecaption {
    display: block;
    max-width: 500px;
    margin: auto;
    padding: 0.3em 0 0.2em;
    font-size: 0.8em;
    text-align: center;
}
.contactlogo {
    display: block;
    margin: 0 auto;
    vertical-align: middle;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.floatright, .align-right { float: right; margin-left: 4px; }
.floatleft, .align-left { float: left; margin-right: 4px; }
.floatcenter, .align-center {
    display: block;
    margin: 0 auto 11px;
}

/* Table of contents from [TOC] */
.toc {
    display: table;
    width: auto;
    font-size: small;
}
.toc .toctitle {
    font-size: medium;
    font-weight: bold;
}
.toc ul {
    padding-left: 1rem;
    list-style-type: none;
}
.toc > ul {
    margin-top: 0;
    padding-left: 0;
}

/* Typogrify */
.caps { font-size: 0.92em; }
.amp {
    font-family: "Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", serif;
    font-size: 1.05em;
    font-style: italic;
    color: var(--amp);
}
.dquo { margin-left: -0.38em; }


/* 6. Code highlighting (Pygments "native") ================================= */

.highlighttable { display: table; width: 100%; margin-bottom: 11px; }
.highlighttable pre { margin-bottom: 0; }
.highlight pre .hll { background-color: #404040 }
.highlight pre, .highlighttable pre { background: #202020; color: #d0d0d0 }
.highlight pre .c { color: #999999; font-style: italic } /* Comment */
.highlight pre .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.highlight pre .g { color: #d0d0d0 } /* Generic */
.highlight pre .k { color: #6ab825; font-weight: bold } /* Keyword */
.highlight pre .l { color: #d0d0d0 } /* Literal */
.highlight pre .n { color: #d0d0d0 } /* Name */
.highlight pre .o { color: #d0d0d0 } /* Operator */
.highlight pre .x { color: #d0d0d0 } /* Other */
.highlight pre .p { color: #d0d0d0 } /* Punctuation */
.highlight pre .cm { color: #999999; font-style: italic } /* Comment.Multiline */
.highlight pre .cp { color: #cd2828; font-weight: bold } /* Comment.Preproc */
.highlight pre .c1 { color: #999999; font-style: italic } /* Comment.Single */
.highlight pre .cs { color: #e50808; font-weight: bold; background-color: #520000 } /* Comment.Special */
.highlight pre .gd { color: #d22323 } /* Generic.Deleted */
.highlight pre .ge { color: #d0d0d0; font-style: italic } /* Generic.Emph */
.highlight pre .gr { color: #d22323 } /* Generic.Error */
.highlight pre .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
.highlight pre .gi { color: #589819 } /* Generic.Inserted */
.highlight pre .go { color: #cccccc } /* Generic.Output */
.highlight pre .gp { color: #aaaaaa } /* Generic.Prompt */
.highlight pre .gs { color: #d0d0d0; font-weight: bold } /* Generic.Strong */
.highlight pre .gu { color: #ffffff; text-decoration: underline } /* Generic.Subheading */
.highlight pre .gt { color: #d22323 } /* Generic.Traceback */
.highlight pre .kc { color: #6ab825; font-weight: bold } /* Keyword.Constant */
.highlight pre .kd { color: #6ab825; font-weight: bold } /* Keyword.Declaration */
.highlight pre .kn { color: #6ab825; font-weight: bold } /* Keyword.Namespace */
.highlight pre .kp { color: #6ab825 } /* Keyword.Pseudo */
.highlight pre .kr { color: #6ab825; font-weight: bold } /* Keyword.Reserved */
.highlight pre .kt { color: #6ab825; font-weight: bold } /* Keyword.Type */
.highlight pre .ld { color: #d0d0d0 } /* Literal.Date */
.highlight pre .m { color: #3677a9 } /* Literal.Number */
.highlight pre .s { color: #ed9d13 } /* Literal.String */
.highlight pre .na { color: #bbbbbb } /* Name.Attribute */
.highlight pre .nb { color: #24909d } /* Name.Builtin */
.highlight pre .nc { color: #447fcf; text-decoration: underline } /* Name.Class */
.highlight pre .no { color: #40ffff } /* Name.Constant */
.highlight pre .nd { color: #ffa500 } /* Name.Decorator */
.highlight pre .ni { color: #d0d0d0 } /* Name.Entity */
.highlight pre .ne { color: #bbbbbb } /* Name.Exception */
.highlight pre .nf { color: #447fcf } /* Name.Function */
.highlight pre .nl { color: #d0d0d0 } /* Name.Label */
.highlight pre .nn { color: #447fcf; text-decoration: underline } /* Name.Namespace */
.highlight pre .nx { color: #d0d0d0 } /* Name.Other */
.highlight pre .py { color: #d0d0d0 } /* Name.Property */
.highlight pre .nt { color: #6ab825; font-weight: bold } /* Name.Tag */
.highlight pre .nv { color: #40ffff } /* Name.Variable */
.highlight pre .ow { color: #6ab825; font-weight: bold } /* Operator.Word */
.highlight pre .w { color: #666666 } /* Text.Whitespace */
.highlight pre .mf { color: #3677a9 } /* Literal.Number.Float */
.highlight pre .mh { color: #3677a9 } /* Literal.Number.Hex */
.highlight pre .mi { color: #3677a9 } /* Literal.Number.Integer */
.highlight pre .mo { color: #3677a9 } /* Literal.Number.Oct */
.highlight pre .sb { color: #ed9d13 } /* Literal.String.Backtick */
.highlight pre .sc { color: #ed9d13 } /* Literal.String.Char */
.highlight pre .sd { color: #ed9d13 } /* Literal.String.Doc */
.highlight pre .s2 { color: #ed9d13 } /* Literal.String.Double */
.highlight pre .se { color: #ed9d13 } /* Literal.String.Escape */
.highlight pre .sh { color: #ed9d13 } /* Literal.String.Heredoc */
.highlight pre .si { color: #ed9d13 } /* Literal.String.Interpol */
.highlight pre .sx { color: #ffa500 } /* Literal.String.Other */
.highlight pre .sr { color: #ed9d13 } /* Literal.String.Regex */
.highlight pre .s1 { color: #ed9d13 } /* Literal.String.Single */
.highlight pre .ss { color: #ed9d13 } /* Literal.String.Symbol */
.highlight pre .bp { color: #24909d } /* Name.Builtin.Pseudo */
.highlight pre .vc { color: #40ffff } /* Name.Variable.Class */
.highlight pre .vg { color: #40ffff } /* Name.Variable.Global */
.highlight pre .vi { color: #40ffff } /* Name.Variable.Instance */
.highlight pre .il { color: #3677a9 } /* Literal.Number.Integer.Long */


/* 7. Print ================================================================= */

@media print {
    :root { color-scheme: light !important; }
    body { margin: 0; padding-top: 0; }
    .site-header, .sidebar, .pager, #related-posts, .site-footer { display: none; }
    .page-narrow main { max-width: none; }
}