/* FONTS JH */
@font-face {
    font-family: 'ibmSans';
    src: url('/rez/font/IBMPlexSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ibmSans';
    src: url('/rez/font/IBMPlexSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'ibmSans';
    src: url('/rez/font/IBMPlexSans-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ibmSans';
    src: url('/rez/font/IBMPlexSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sourceSerif';
    src: url('/rez/font/SourceSerif4-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sourceSerif';
    src: url('/rez/font/SourceSerif4-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'sourceSerif';
    src: url('/rez/font/SourceSerif4-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sourceSerif';
    src: url('/rez/font/SourceSerif4-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sourceSerif';
    src: url('/rez/font/SourceSerif4-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}


/* Light mode colors */
:root {
    --back-col: #fbfeff;
    --text-col: #1e293b;
    --card-back-col: #ffffff;
    --accent-color: #0096c7;
    --light-border: 2px solid color-mix(in srgb, var(--accent-color) 15%, transparent);
    --heading-color: var(--text-col);
    --header-back-col: #e3edf5;
    --link-col: #2563eb;
    --link-under-col: oklch(from var(--link-col) l c h / 30%);
    --link-active-col: #007a8a;
    --badge-bg-col: #f9ea24;
    --light-text-col: rgba(30, 41, 59, 0.75);

    --font-sans: 'ibmSans', 'helvetica neue', Helvetica, clean, sans-serif;
    --font-serif: 'sourceSerif', Georgia, serif;

    --layout-width: 1100px;
    --note-width: 300px;
    --radius: 4px;
}
h1, h2, h3, h4, h5, h6, header .text {
    color: var(--heading-color);
    line-height: 3rem;
    font-family: var(--font-sans);
}

body {
    background: var(--back-col);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 150%;
    text-align: center;
    color: var(--text-col);

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    margin: 0;
    text-wrap: pretty;
}

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

/** Layout */
header, footer, section {
    flex-shrink: 0;
}

main {
    flex: 1;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

/** x > div is the aligning outer div for each section */
main, footer > div, section > div {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--layout-width);
    width: 100%;
    text-align: left;
}

/* Home page modifiers */
.type-home {
    & main, & main .body {
        max-width: 50rem;
        font-family: var(--font-sans);
    }

    & h2 {
        margin-top: 2rem;
    }

}

/* Next / Prev buttons at end of articles */
.nextprev {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;

    margin-top: 4rem;
    margin-bottom: 2rem;

    & .nav-card {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        padding: 16px;
        background: var(--card-back-col);
        border-radius: 8px;

        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        text-decoration: none;

        &:active {
            transform: translate(2px, 2px);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        & .nav-text {
            display: flex;
            flex-wrap: wrap;
        }

        & .nav-label {
            margin-right: 0.5rem;
            color: var(--text-col);
        }

        & .nav-title {
            text-decoration: underline;
            text-decoration-color: var(--link-under-col);
        }
    }

    & .prev {
        text-align: left;
        justify-self: start;

    }

    & .next {
        text-align: right;
        justify-self: end;
        margin-left: auto;
    }
}

/* Footer */
footer {
    border-top: 1px solid oklch(from var(--header-back-col) calc(l * 0.9) calc(c * 5) h / 1);
    background-color: var(--header-back-col);
    padding: 8px;
    text-wrap: balance;
    margin-top: 6rem;
    font-size: 90%;
}

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

footer .contact-links {
    text-wrap: auto; /** otherwise safari will sometimes wrap from balance, depending on load state (!) */
}

footer .contact-links a {
    margin-left: 1rem;
}

/* General section stripe e.g. pagers */
section {
    padding-left: 8px;
    padding-right: 8px;
}

/* Header */
header {
    position: relative;
    background: var(--header-back-col);
    border-bottom: 1px solid #4f4f4f;
}
header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), #0969DA);
}

header > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 3em;
    padding-right: 3em;
}

header img.badge {
    width: 80px;
}

header h1 {
    font-size: 200%;
    color: var(--text-col);
}

header .text {
    text-align: right;
}

main  {
    font-size: 110%;
    font-family: var(--font-serif);
    line-height: 1.7rem;

    /* immediately following a header, tighten up the margin */
    :is(h1, h2, h3, h4, h5, h6) + & {
        margin-top: 0;
    }

}

main .body {
    position: relative;
    margin-left: 1rem;
    margin-right: 1rem;

    /* subtract width of the notes */
    max-width: calc(100% - (var(--note-width) + 4rem));
}

/* side notes. dumb !important because of very specific type-article selector */
.body .note, .body p.note.lb {
    float: right;
    clear: right;
    max-width: var(--note-width);
    width: calc(100% - 22px);
    margin-right: calc(var(--note-width) * -1);
    position: relative;
    left: 20px;
    /*right: calc(var(--note-width) * -1);*/

    margin-top: 0.1rem;
    font-size: 85%;
    line-height: 1.5rem !important;
    color: var(--light-text-col);
}
p.lb ~ h1 {
    margin-top: 2rem;
}
a.lb img {
    border-radius: 4px;

    box-shadow: 0px 0.9px 1px rgba(0, 0, 0, 0.073),
    0px 2.5px 3.1px rgba(0, 0, 0, 0.105),
    0px 6px 7.4px rgba(0, 0, 0, 0.137),
    0px 20px 20px rgba(0, 0, 0, 0.21);
}


/** Idler */
body:not(.type-home) {
    & header, & footer {
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    &.idle {
        cursor: none;
        * {
            cursor: none !important;
        }
        & header, & footer, .pswp button {
            opacity: 0.2;
            transition: opacity 2s ease;
        }
    }
}

/* Homepage portfolio cards */
.portfolio-card {
    background: var(--card-back-col);
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    margin: 1rem;

    & p { margin-left: 0; }
    & a {
        display: block;
        height: 100%;
        &:has(div) {
            text-decoration: none;
        }
        padding: 16px;
        padding-top: 0;
    }

    & span.icon {
        float: right;
        margin-top: 4px;
        padding: 1.5rem;
        color: var(--accent-color);
    }
    & div {
        color: var(--text-col);
    }

    &:hover {
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);

        & span.icon {
            background-color: var(--accent-color);
        }

        & h3 {
            color: var(--link-active-col);
            text-decoration-color: var(--link-active-col);
        }
    }
    & h3 {
        text-decoration: underline;
        text-decoration-color: var(--link-under-col);
    }
}

/* Homepage AKA links */
.aka-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-bottom: 2rem;

    & a {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        background: var(--card-back-col);
        color: var(--link-col);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: background 0.2s, box-shadow 0.2s;
    }

    & a:hover {
        background: var(--accent-color);
        color: var(--card-back-col);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        text-decoration: none;

        & .icon {
            background-color: var(--back-col);
        }
    }

    & .icon {
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
}

/* Pubdate calendar icon */
div.meta {
    font-family: var(--font-sans);
    font-size: 90%;
    color: var(--light-text-col);

    & ::before {
        content: "";
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.5rem;
        background-color: var(--accent-color);
        mask-image: url('/rez/ico/calendar.svg');
        -webkit-mask-image: url('/rez/ico/calendar.svg');
        vertical-align: text-bottom;
    }
}

/* Tag based sizing, colors (no layout) */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--link-col);
    text-decoration: underline;
    text-decoration-color: var(--link-under-col);
}

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

a :is(h1, h2, h3, h4, h5, h6) {
    color: var(--link-col);
    text-decoration: none;
}

h1 {
    font-size: 180%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 155%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 120%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

pre {
    overflow: auto;
    padding: 0.5rem;
    border-radius: 4px;
    max-width: var(--layout-width);
    min-width: 100%;
    width: fit-content;
}

.card, .chroma {
    border: var(--light-border);
    border-radius: 4px;
    background-color: var(--card-back-col);
    overflow-y: auto;
    margin-top: 1.1rem;
}

pre code {

}

p {
    margin-top: 1.1rem;
    margin-bottom: 0;
}

ol, ul {
}

li {
    margin-bottom: 0.6rem;
}

hr {
    border: 0;
    border-top: var(--light-border);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

blockquote {
    font-size: 90%;
    background: var(--card-back-col);
    margin: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    border-left: var(--light-border);
    border-radius: 0px 4px 4px 0px;
    padding-bottom: 1rem;
}

/* Just used in tools/plain-text (?) */
textarea {
    font-family: monospace;
    font-size: 90%;
    line-height: 150%;
    text-align: left;
    color: var(--text-col);
    background-color: var(--card-back-col);
    border: var(--light-border);
    border-radius: var(--radius);
    padding: 8px;
    margin: 8px;
    width: 100%;
    max-width: 100%;
    min-height: 100px;
}

/* small screens */
/* medium (landscape) screens, keep two cols */
@media (max-width: 1000px) {
    main .body {
        max-width: 900px;
    }

    pre {
        width: unset;
    }

    /* Notes */
    div.notegroup {
        display: flex;
        flex-direction: column;

        & >:not(.note) {
            order: 1;
        }
        & >.note {
            margin-top: 1.1rem;
            order: 2;
        }
    }

    .body .note, .body p.note.lb {
        margin-right: 1rem;
        padding-left: 2rem;
        float: none;
        width: 80%;
        max-width: unset;
    }

    .body p.note.lb {
        max-width: 30rem;
        border: none;
        text-align: right;
    }
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --accent-color: #f2df04;
        --back-col: #162234;
        --header-back-col: #213757;
        --card-back-col: #193052;
        --text-col: #eaf0f5;
        --link-col: #97e3f5;
        --link-under-col: oklch(from var(--link-col) l c h / 0.66);
        --link-active-col: var(--accent-color);
        --link-visited-col: oklch(from var(--link-col) l c h / 0.7);
        --light-border: 2px solid var(--link-under-col);
        --light-text-col: rgba(190, 218, 239, 0.8);
    }

    body {
        background-color: var(--back-col);
        color: var(--text-col);
    }

    .body .note {
        color: var(--light-text-col);
    }

    .card {
        background-color: var(--card-back-col);
    }

    a {
        color: var(--link-col);
        text-decoration-color: var(--link-under-col);
    }

    a:hover {
        color: var(--link-active-col);
        text-decoration-color: var(--link-active-col);
    }

    header, footer {
        background-color: var(--header-back-col);
    }

    header {
        border-bottom: 1px solid #1b2b44;
    }

    footer {
        border-top: 1px solid #1b2b44;
    }

    hr {
        border-top-color: var(--link-under-col);
    }

    textarea {
        background-color: var(--card-back-col);
        color: var(--text-col);
    }

    /* Nav */
    .nextprev {
        & .nav-card {
            &:active {
                box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7);
            }

            background: #193052;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

            & .nav-title {
                text-decoration-color: rgba(95, 173, 231, 0.56);
            }

            & .nav-label {
                color: #f0f6fc;
            }
        }
    }
}

/* Icons */
.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
}
a:hover .icon {
    background-color: var(--link-active-col);
}

.icon-github {
    mask-image: url('/rez/ico/github.svg');
    -webkit-mask-image: url('/rez/ico/github.svg');
}

.icon-linkedin {
    mask-image: url('/rez/ico/linkedin.svg');
    -webkit-mask-image: url('/rez/ico/linkedin.svg');
}

.icon-mastodon {
    mask-image: url('/rez/ico/mastodon.svg');
    -webkit-mask-image: url('/rez/ico/mastodon.svg');
}

.icon-stackoverflow {
    mask-image: url('/rez/ico/stackoverflow.svg');
    -webkit-mask-image: url('/rez/ico/stackoverflow.svg');
}

.icon-email {
    mask-image: url('/rez/ico/email@DC54PJ.svg');
    -webkit-mask-image: url('/rez/ico/email@DC54PJ.svg');
}

.icon-at {
    mask-image: url('/rez/ico/at@rwjncE.svg');
    -webkit-mask-image: url('/rez/ico/at@rwjncE.svg');
}

.icon-globe {
    mask-image: url('/rez/ico/globe@r9Gui-.svg');
    -webkit-mask-image: url('/rez/ico/globe@r9Gui-.svg');
}

.icon-rss {
    mask-image: url('/rez/ico/rss@ItHeO9.svg');
    -webkit-mask-image: url('/rez/ico/rss@ItHeO9.svg');
}

.icon-chev-left {
    mask-image: url('/rez/ico/chev-left@F2VNOw.svg');
    -webkit-mask-image: url('/rez/ico/chev-left@F2VNOw.svg');
}

.icon-chev-right {
    mask-image: url('/rez/ico/chev-right@5kTRZj.svg');
    -webkit-mask-image: url('/rez/ico/chev-right@5kTRZj.svg');
}

.icon-dbl-chev-left {
    mask-image: url('/rez/ico/dbl-chev-left@VAWLDM.svg');
    -webkit-mask-image: url('/rez/ico/dbl-chev-left@VAWLDM.svg');
}

.icon-dbl-chev-right {
    mask-image: url('/rez/ico/dbl-chev-right@JCpflZ.svg');
    -webkit-mask-image: url('/rez/ico/dbl-chev-right@JCpflZ.svg');
}

.icon-html {
    mask-image: url('/rez/ico/html@jnlBaq.svg');
    -webkit-mask-image: url('/rez/ico/html@jnlBaq.svg');
}

.icon-play {
    mask-image: url('/rez/ico/play@SBwsfm.svg');
    -webkit-mask-image: url('/rez/ico/play@SBwsfm.svg');
}

.icon-magnify {
    mask-image: url('/rez/ico/magnify@NYh-WC.svg');
    -webkit-mask-image: url('/rez/ico/magnify@NYh-WC.svg');
}

.icon-newspaper  {
    mask-image: url('/rez/ico/newspaper@oF0Jzl.svg');
    -webkit-mask-image: url('/rez/ico/newspaper@oF0Jzl.svg');
}

/* Syntax highlighting, light (theme github): */
@media (prefers-color-scheme: light) {
    /* PreWrapper */
    .chroma {
        background-color: #ffffff;
    }

    /* Error */
    .chroma .err {
        color: #f6f8fa;
        background-color: #82071e
    }

    /* 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: #e5e5e5
    }

    /* 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: #cf222e
    }

    /* KeywordConstant */
    .chroma .kc {
        color: #cf222e
    }

    /* KeywordDeclaration */
    .chroma .kd {
        color: #cf222e
    }

    /* KeywordNamespace */
    .chroma .kn {
        color: #cf222e
    }

    /* KeywordPseudo */
    .chroma .kp {
        color: #cf222e
    }

    /* KeywordReserved */
    .chroma .kr {
        color: #cf222e
    }

    /* KeywordType */
    .chroma .kt {
        color: #cf222e
    }

    /* NameAttribute */
    .chroma .na {
        color: #1f2328
    }

    /* NameBuiltin */
    .chroma .nb {
        color: #6639ba
    }

    /* NameBuiltinPseudo */
    .chroma .bp {
        color: #6a737d
    }

    /* NameClass */
    .chroma .nc {
        color: #1f2328
    }

    /* NameConstant */
    .chroma .no {
        color: #0550ae
    }

    /* NameDecorator */
    .chroma .nd {
        color: #0550ae
    }

    /* NameEntity */
    .chroma .ni {
        color: #6639ba
    }

    /* NameFunction */
    .chroma .nf {
        color: #6639ba
    }

    /* NameLabel */
    .chroma .nl {
        color: #990000;
        font-weight: bold
    }

    /* NameNamespace */
    .chroma .nn {
        color: #24292e
    }

    /* NameOther */
    .chroma .nx {
        color: #1f2328
    }

    /* NameTag */
    .chroma .nt {
        color: #0550ae
    }

    /* NameVariable */
    .chroma .nv {
        color: #953800
    }

    /* NameVariableClass */
    .chroma .vc {
        color: #953800
    }

    /* NameVariableGlobal */
    .chroma .vg {
        color: #953800
    }

    /* NameVariableInstance */
    .chroma .vi {
        color: #953800
    }

    /* LiteralString */
    .chroma .s {
        color: #0a3069
    }

    /* LiteralStringAffix */
    .chroma .sa {
        color: #0a3069
    }

    /* LiteralStringBacktick */
    .chroma .sb {
        color: #0a3069
    }

    /* LiteralStringChar */
    .chroma .sc {
        color: #0a3069
    }

    /* LiteralStringDelimiter */
    .chroma .dl {
        color: #0a3069
    }

    /* LiteralStringDoc */
    .chroma .sd {
        color: #0a3069
    }

    /* LiteralStringDouble */
    .chroma .s2 {
        color: #0a3069
    }

    /* LiteralStringEscape */
    .chroma .se {
        color: #0a3069
    }

    /* LiteralStringHeredoc */
    .chroma .sh {
        color: #0a3069
    }

    /* LiteralStringInterpol */
    .chroma .si {
        color: #0a3069
    }

    /* LiteralStringOther */
    .chroma .sx {
        color: #0a3069
    }

    /* LiteralStringRegex */
    .chroma .sr {
        color: #0a3069
    }

    /* LiteralStringSingle */
    .chroma .s1 {
        color: #0a3069
    }

    /* LiteralStringSymbol */
    .chroma .ss {
        color: #032f62
    }

    /* LiteralNumber */
    .chroma .m {
        color: #0550ae
    }

    /* LiteralNumberBin */
    .chroma .mb {
        color: #0550ae
    }

    /* LiteralNumberFloat */
    .chroma .mf {
        color: #0550ae
    }

    /* LiteralNumberHex */
    .chroma .mh {
        color: #0550ae
    }

    /* LiteralNumberInteger */
    .chroma .mi {
        color: #0550ae
    }

    /* LiteralNumberIntegerLong */
    .chroma .il {
        color: #0550ae
    }

    /* LiteralNumberOct */
    .chroma .mo {
        color: #0550ae
    }

    /* Operator */
    .chroma .o {
        color: #0550ae
    }

    /* OperatorWord */
    .chroma .ow {
        color: #0550ae
    }

    /* Punctuation */
    .chroma .p {
        color: #1f2328
    }

    /* Comment */
    .chroma .c {
        color: #57606a
    }

    /* CommentHashbang */
    .chroma .ch {
        color: #57606a
    }

    /* CommentMultiline */
    .chroma .cm {
        color: #57606a
    }

    /* CommentSingle */
    .chroma .c1 {
        color: #57606a
    }

    /* CommentSpecial */
    .chroma .cs {
        color: #57606a
    }

    /* CommentPreproc */
    .chroma .cp {
        color: #57606a
    }

    /* CommentPreprocFile */
    .chroma .cpf {
        color: #57606a
    }

    /* GenericDeleted */
    .chroma .gd {
        color: #82071e;
        background-color: #ffebe9
    }

    /* GenericEmph */
    .chroma .ge {
        color: #1f2328
    }

    /* GenericInserted */
    .chroma .gi {
        color: #116329;
        background-color: #dafbe1
    }

    /* GenericOutput */
    .chroma .go {
        color: #1f2328
    }

    /* GenericUnderline */
    .chroma .gl {
        text-decoration: underline
    }

    /* TextWhitespace */
    .chroma .w {
        color: #ffffff
    }
}

/* Syntax highlighting, dark mode, theme: github dark) */
@media (prefers-color-scheme: dark) {
    /* PreWrapper */
    .chroma {
        color: #e6edf3;
        background-color: #0d1117;
    }

    /* Error */
    .chroma .err {
        color: #f85149
    }

    /* 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: #6e7681
    }

    /* 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: #737679
    }

    /* 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: #6e7681
    }

    /* Line */
    .chroma .line {
        display: flex;
    }

    /* Keyword */
    .chroma .k {
        color: #ff7b72
    }

    /* KeywordConstant */
    .chroma .kc {
        color: #79c0ff
    }

    /* KeywordDeclaration */
    .chroma .kd {
        color: #ff7b72
    }

    /* KeywordNamespace */
    .chroma .kn {
        color: #ff7b72
    }

    /* KeywordPseudo */
    .chroma .kp {
        color: #79c0ff
    }

    /* KeywordReserved */
    .chroma .kr {
        color: #ff7b72
    }

    /* KeywordType */
    .chroma .kt {
        color: #ff7b72
    }

    /* NameClass */
    .chroma .nc {
        color: #f0883e;
        font-weight: bold
    }

    /* NameConstant */
    .chroma .no {
        color: #79c0ff;
        font-weight: bold
    }

    /* NameDecorator */
    .chroma .nd {
        color: #d2a8ff;
        font-weight: bold
    }

    /* NameEntity */
    .chroma .ni {
        color: #ffa657
    }

    /* NameException */
    .chroma .ne {
        color: #f0883e;
        font-weight: bold
    }

    /* NameFunction */
    .chroma .nf {
        color: #d2a8ff;
        font-weight: bold
    }

    /* NameLabel */
    .chroma .nl {
        color: #79c0ff;
        font-weight: bold
    }

    /* NameNamespace */
    .chroma .nn {
        color: #ff7b72
    }

    /* NameProperty */
    .chroma .py {
        color: #79c0ff
    }

    /* NameTag */
    .chroma .nt {
        color: #7ee787
    }

    /* NameVariable */
    .chroma .nv {
        color: #79c0ff
    }

    /* Literal */
    .chroma .l {
        color: #a5d6ff
    }

    /* LiteralDate */
    .chroma .ld {
        color: #79c0ff
    }

    /* LiteralString */
    .chroma .s {
        color: #a5d6ff
    }

    /* LiteralStringAffix */
    .chroma .sa {
        color: #79c0ff
    }

    /* LiteralStringBacktick */
    .chroma .sb {
        color: #a5d6ff
    }

    /* LiteralStringChar */
    .chroma .sc {
        color: #a5d6ff
    }

    /* LiteralStringDelimiter */
    .chroma .dl {
        color: #79c0ff
    }

    /* LiteralStringDoc */
    .chroma .sd {
        color: #a5d6ff
    }

    /* LiteralStringDouble */
    .chroma .s2 {
        color: #a5d6ff
    }

    /* LiteralStringEscape */
    .chroma .se {
        color: #79c0ff
    }

    /* LiteralStringHeredoc */
    .chroma .sh {
        color: #79c0ff
    }

    /* LiteralStringInterpol */
    .chroma .si {
        color: #a5d6ff
    }

    /* LiteralStringOther */
    .chroma .sx {
        color: #a5d6ff
    }

    /* LiteralStringRegex */
    .chroma .sr {
        color: #79c0ff
    }

    /* LiteralStringSingle */
    .chroma .s1 {
        color: #a5d6ff
    }

    /* LiteralStringSymbol */
    .chroma .ss {
        color: #a5d6ff
    }

    /* LiteralNumber */
    .chroma .m {
        color: #a5d6ff
    }

    /* LiteralNumberBin */
    .chroma .mb {
        color: #a5d6ff
    }

    /* LiteralNumberFloat */
    .chroma .mf {
        color: #a5d6ff
    }

    /* LiteralNumberHex */
    .chroma .mh {
        color: #a5d6ff
    }

    /* LiteralNumberInteger */
    .chroma .mi {
        color: #a5d6ff
    }

    /* LiteralNumberIntegerLong */
    .chroma .il {
        color: #a5d6ff
    }

    /* LiteralNumberOct */
    .chroma .mo {
        color: #a5d6ff
    }

    /* Operator */
    .chroma .o {
        color: #ff7b72;
        font-weight: bold
    }

    /* OperatorWord */
    .chroma .ow {
        color: #ff7b72;
        font-weight: bold
    }

    /* Comment */
    .chroma .c {
        color: #8b949e;
        font-style: italic
    }

    /* CommentHashbang */
    .chroma .ch {
        color: #8b949e;
        font-style: italic
    }

    /* CommentMultiline */
    .chroma .cm {
        color: #8b949e;
        font-style: italic
    }

    /* CommentSingle */
    .chroma .c1 {
        color: #8b949e;
        font-style: italic
    }

    /* CommentSpecial */
    .chroma .cs {
        color: #8b949e;
        font-weight: bold;
        font-style: italic
    }

    /* CommentPreproc */
    .chroma .cp {
        color: #8b949e;
        font-weight: bold;
        font-style: italic
    }

    /* CommentPreprocFile */
    .chroma .cpf {
        color: #8b949e;
        font-weight: bold;
        font-style: italic
    }

    /* GenericDeleted */
    .chroma .gd {
        color: #ffa198;
        background-color: #490202
    }

    /* GenericEmph */
    .chroma .ge {
        font-style: italic
    }

    /* GenericError */
    .chroma .gr {
        color: #ffa198
    }

    /* GenericHeading */
    .chroma .gh {
        color: #79c0ff;
        font-weight: bold
    }

    /* GenericInserted */
    .chroma .gi {
        color: #56d364;
        background-color: #0f5323
    }

    /* GenericOutput */
    .chroma .go {
        color: #8b949e
    }

    /* GenericPrompt */
    .chroma .gp {
        color: #8b949e
    }

    /* GenericStrong */
    .chroma .gs {
        font-weight: bold
    }

    /* GenericSubheading */
    .chroma .gu {
        color: #79c0ff
    }

    /* GenericTraceback */
    .chroma .gt {
        color: #ff7b72
    }

    /* GenericUnderline */
    .chroma .gl {
        text-decoration: underline
    }

    /* TextWhitespace */
    .chroma .w {
        color: #6e7681
    }
}