:root {
    --solarized-base01: #586e75;
    --solarized-base00: #657b83;
    /* --solarized-base0: #839496; */
    --solarized-base1: #93a1a1;
    --solarized-base2: #eee8d5;
    --solarized-base3: #fdf6e3;
    --solarized-yellow: #b58900;
    --solarized-orange: #cb4b16;
    --solarized-red: #dc322f;
    --solarized-blue: #268bd2;
    --solarized-cyan: #2aa198;
    --solarized-green: #859900;
}

.highlight {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: var(--solarized-base01);
    // darkened base2
    background: darken(#eee8d5, 4%);
}

.highlight > code {
    display: block;
}

.hl-cmt {
    color: var(--solarized-base00);
    font-style: italic;
}

.hl-kw,
.hl-const {
    color: var(--solarized-green);
}

.hl-punct-sp,
.hl-tag {
    color: var(--solarized-blue);
}

.hl-emb {
    color: var(--solarized-base01);
}

.hl-attr,
.hl-mod,
.hl-key,
.hl-prop {
    color: var(--solarized-red);
}

.hl-str {
    color: var(--solarized-cyan);
}

.hl-builtin,
.hl-type,
.hl-num {
    color: var(--solarized-yellow);
}

.hl-fn {
    color: var(--solarized-orange);
}