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

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

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

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

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

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

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

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

@font-face {
    font-family: 'sourceSerif';
    src: url('/rez/font/SourceSerif4-BoldItalic@f4e-o0.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;
    --layout-width: 1100px;
    --text-width: 40rem;
    --article-image-width: 50rem;
    --note-width: 18rem;
    --content-gap: 4rem;
}
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;
    max-width: var(--layout-width);
    width: 100%;
    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)
;
}


.body.layout-entry {
    position: relative;
    display: grid;
    width: 100%;
    max-width: var(--layout-width);
    align-content: start;
}

.body.layout-entry.layout-reading,
.body.layout-entry.layout-pic {
    --content-offset: max(0px, calc((100% - var(--text-width)) / 2 - 10rem));
}

.body.layout-entry.layout-reading {
    grid-template-columns:
        minmax(0, var(--content-offset))
        minmax(0, var(--text-width))
        minmax(0, var(--content-gap))
        minmax(0, var(--note-width))
        minmax(0, 1fr);
}

.body.layout-entry.layout-pic {
    grid-template-columns:
        minmax(0, var(--content-offset))
        minmax(0, var(--text-width))
        minmax(0, 1fr);
}

.body.layout-entry :is(p, ol, ul, pre, blockquote, .meta) {
    font-family: var(--font-serif);
    line-height: 2rem;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

.body.layout-entry :is(ol, ul) {
    padding-left: 0;
}

.body.layout-entry > :not(.note-group, .note, .media-block) {
    grid-column: 2;
    width: min(100%, var(--text-width));
    margin-left: auto;
    margin-right: auto;
}

.entry-intro p {
    max-width: 100%;
    margin-top: 0;
}

.body.layout-entry.layout-reading > .note-group {
    display: grid;
    grid-template-columns:
        minmax(0, var(--text-width))
        minmax(0, var(--content-gap))
        minmax(0, var(--note-width));
    align-items: start;
    grid-column: 2 / 5;
    width: min(100%, calc(var(--text-width) + var(--content-gap) + var(--note-width)));
    justify-self: start;
    margin-top: 1.1rem;
}

.note-group > .note-body {
    grid-column: 1;
    width: min(100%, var(--text-width));
    max-width: none;
    min-width: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: auto;
}

.note-group > .note-body.media-block {
    grid-column: 1 / 3;
    width: min(100%, var(--article-image-width));
    max-width: var(--article-image-width);
    margin: 4rem 0;
}

.note-group > .note-stack {
    grid-column: 3;
    width: 100%;
    min-width: 0;
}

.body.layout-entry.layout-reading > .media-block {
    grid-column: 1 / -1;
    width: min(100%, var(--article-image-width));
    max-width: var(--article-image-width);
    justify-self: center;
    margin: 4rem 0;
}

.body.layout-entry.layout-pic > .media-block {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
}

.note-stack > .note, .note-stack > p.note.lb {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 85%;
    line-height: 1.5rem !important;
    color: rgba(0,0,0,0.63);
}

.note-stack > :first-child {
    margin-top: 0.1rem !important;
}

.note-stack > :not(:first-child) {
    margin-top: 1rem !important;
}

.note-stack > p.note.lb {
    border: none;
    text-align: right;
}

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

.body.layout-entry > :is(h2, h3, h4, h5, h6) {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.body.layout-entry > :is(h2, h3, h4, h5, h6) + :is(p, ol, ul, pre, blockquote) {
    margin-top: 0;
}

.body.layout-entry > :is(h2, h3, h4, h5, h6) + .note-group {
    margin-top: 0;
}

/* 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: var(--text-width);
    margin-top: 1.1rem;
    margin-bottom: 0;
}

ol, ul {
    max-width: var(--text-width);
}

li {
    margin-bottom: 0.6rem;
}

.media-block + .entry-head > 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@PqcDKS.svg');
        -webkit-mask-image: url('/rez/ico/calendar@PqcDKS.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%;
    }

    .body.layout-entry :is(ol, ul) {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* medium (landscape) screens, keep two cols */
@media (max-width: 1000px) {
    .body.layout-entry.layout-reading,
    .body.layout-entry.layout-pic {
        grid-template-columns: minmax(0, 1fr);
    }

    .body.layout-entry > :not(.note) {
        grid-column: 1;
    }

    .body.layout-entry > :not(.note-group, .note, .media-block) {
        justify-self: center;
    }

    .body.layout-entry > :is(.note-group, .media-block) {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .body.layout-entry.layout-reading > .note-group,
    .body.layout-entry.layout-reading > .media-block,
    .body.layout-entry.layout-pic > .media-block {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    .note-group > .note-body {
        width: min(100%, var(--text-width));
        max-width: var(--text-width);
        margin-left: auto;
        margin-right: auto;
    }

    .note-group > .note-body.media-block,
    .body.layout-entry.layout-reading > .media-block,
    .body.layout-entry.layout-pic > .media-block {
        width: 100%;
        max-width: 100%;
        justify-self: stretch;
    }

    /* Notes */
    .body.layout-entry.layout-reading > .note-group {
        display: flex;
        flex-direction: column;
    }

    .note-group > .note-stack {
        width: 85%;
        max-width: 500px;
        margin: 1.1rem auto 0;
    }

    .note-stack > .note, .note-stack > p.note.lb {
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        max-width: 100%;
    }

    .note-stack > p.note.lb {
        max-width: 30rem;
        text-align: right;
    }
}

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

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

    .note-stack > .note, .note-stack > p.note.lb {
        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
    }
}