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

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

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

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

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

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

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

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

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


:root {
    --accent-color: #b9370e;
    --light-text-col: rgba(30, 41, 59, 0.75);
    --font-sans: 'ibmSans', 'helvetica neue', Helvetica, clean, sans-serif;
    --font-serif: 'sourceSerif', Georgia, serif;
}
h1, h2, h3, h4, h5, h6, header .text {
    color: var(--accent-color);
    line-height: 3rem;
}

body {
    background: #efefef;
    font: 16px/1.231 var(--font-sans);
    font-size: 100%;
    line-height: 150%;
    text-align: center;
    color: #192943;

    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;
    margin: 8px;
}

main > div, header > div, footer > div, section > div {
    margin-left: auto;
    margin-right: auto;
    width: 1100px;
    text-align: left;
}

.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: #f5f5f5;
        border-radius: 8px;
        font-family: var(--font-sans);
        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: #192943;
        }

        & .nav-title {
            text-decoration: underline;
            text-decoration-color: rgba(9, 105, 218, 0.18);
        }
    }

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

    }

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

footer {
    border-top: 1px solid #4f4f4f;
    background-color: #e5e5e5;
    padding: 8px;
    text-wrap: balance;
    margin-top: 1rem;

}

footer > div {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

section {
    padding-left: 8px;
    padding-right: 8px;
}

header {
    position: relative;
    background: #e5e5e5;
    border-bottom: 1px solid #4f4f4f;
}
:is(.type-article, .type-home) header::after { /* not -pic */
    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;
}

.type-home header > div {
    align-items: baseline;
}

header div.text {
    font-size: 200%;
}

header img.avatar {
    width: 6rem;
    border-radius: 4px;

    box-shadow:
            0px 0.4px 1px rgba(0, 0, 0, 0.21),
            0px 1px 3.1px rgba(0, 0, 0, 0.137),
            0px 2.4px 7.4px rgba(0, 0, 0, 0.105),
            0px 8px 20px rgba(0, 0, 0, 0.073)
;
}


/* Article layout modifications */
body:not(.type-home) .body {
    :is(h1,h2,h3,h4,h5,h6) { /* align headers to the body copy */
        max-width: 40rem;
        margin: 2.5rem auto 0.0rem;
        transform: translate(-10rem); /* move for side notes */
    }
    /* body text in serif */
    :is(p, ol, ul, pre, blockquote, .meta) {
        font-family: var(--font-serif);
        line-height: 2rem;
        hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
        transform: translate(-10rem);

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

    :is(ol, ul) {
        padding-left: 0; /** moves bullets left into gutter */

        /* narrow screen, move them in */
        @media (max-width: 1110px) {
            padding-left: 40px;
            padding-right: 40px;
        }
    }

}

/* wider but not full width img in articles */
.type-article .body p.lb {
    margin: 4rem auto;
    max-width: 50rem;
}

.type-pic .body p.lb {
    transform: translateX(0);
}

/* side notes. dumb !important because of very specific type-article selector */
.body .note, .body p.note.lb {
    float: right;
    width: 18rem;
    clear: right;
    margin-top: 0.1rem !important;
    margin-right: -6rem;
    margin-left: 0.8rem;
    font-size: 85%;
    line-height: 1.5rem !important;
    color: rgba(0,0,0,0.63);
}


/* set a default narrower max width for the text column, for all body text types */
.body p, ol, ul, pre, blockquote, div.meta {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

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

.highlight-box {
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

    & p { margin-left: 0; }
}
footer .footer {
    display: flex;
    justify-content: space-between;
}

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

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

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: #0969DA;
    text-decoration: underline;
    text-decoration-color: rgba(9, 105, 218, 0.18);
}

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

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

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

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

/* horizontal divider matches article text column */
hr {
    margin: 3em auto;
    border: none;
    height: 2px;
    background-color: #d4d4d4;
}

pre {
    max-width: 100%;
    overflow: auto;
    padding: 0.5rem;
    border-radius: 4px;
}

pre code {

}

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

ol, ul {
    max-width: 40rem;
}

li {
    margin-bottom: 0.6rem;
}

p.lb ~ h1 {
    margin-top: 2rem;
}

p.lb {
    max-width: 100%;
}

main  {
    font-size: 120%;
}

footer {
    font-size: 90%;
}

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)
;
}

/* Pubdate calendar icon */
div.meta {
    font-family: var(--font-sans) !important;
    font-size: 85%;
    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;
    }
}

/* small screens */
@media (max-width: 1110px) {
    h1 {
        line-height: 130%;
    }

    .header > div {
        height: auto;
        margin-left: 10px;
        margin-right: 10px;
    }

    main > div, header > div, footer > div, section > div  {
        width: 100%;
    }


}

/* medium (landscape) screens, keep two cols */
@media (max-width: 1000px) {
    /* counter-act translate from article layout modifications */
    h1, h2, h3, h4, h5, h6, p, ol, li, ul, pre, blockquote {
        transform: translateX(0) !important;
    }

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

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

    .body .note, .body p.note.lb {
        margin-right: auto;
        margin-left: auto;
        float: none;
        width: 85%;
        max-width: 500px;
    }

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

/* dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --accent-color: #fc10d5;
        --light-text-col: #c8cfd5;
    }

    body {
        background-color: #162234;
        color: #eaf0f5;
    }

    .body .note {
        color: rgba(240, 246, 252, 0.83);
    }

    .highlight-box {
        background-color: #193052;
    }

    a {
        color: #97e3f5;
        text-decoration-color: rgba(95, 173, 231, 0.56);
    }

    a:hover {
        color: #c0e7ef;
        text-decoration-color: #07b1d7;
    }

    header, footer {
        background-color: #0d1521;
    }

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

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

    hr {
        background-color: #243349;
    }

    /* 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;
            }
        }
    }
}

.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: currentColor;
    mask-size: contain;
    mask-repeat: no-repeat;
}

.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');
}

/* 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
    }
}