:root {
    --c-bg: #16181A;
    --c-bgAlt: #1E2124;
    --c-bgHighlight: #3C4048;
    --c-fg: #FFFFFF;
    --c-grey: #7B8496;
    --c-blue: #5EA1FF;
    --c-green: #5EFF6C;
    --c-cyan: #5EF1FF;
    --c-red: #FF6E5E;
    --c-yellow: #F1FF5E;
    --c-magenta: #FF5EF1;
    --c-pink: #FF5EA0;
    --c-orange: #FFBD5E;
    --c-purple: #BD5EFF;
}

pre {
    width: auto;
    max-width: fit-content;
    background: var(--c-bg);
    border: 2px solid var(--c-bgHighlight);
    border-radius: 4px;
    padding: 2px 5px;
    overflow-x: scroll;
}

code {
    background-color: var(--c-bg);
    color: var(--c-fg);
}

code .comment {
    color: var(--c-grey);
}

code .string {
    color: var(--c-green);
}

code .boolean {
    color: var(--c-cyan);
}

code .keyword_modifier, code .keyword, code .keyword_type, code .attribute, code .conditional, code .number {
    color: var(--c-orange);
}

code .builtin {
    color: var(--c-magenta);
}

code .bracket {
    color: var(--c-red);
}

code .type, code .type_builtin {
    color: var(--c-purple);
}

code .function, code .variable_member, code .property, code .tag {
    color: var(--c-blue);
}

code .operator {
    color: var(--c-pink);
}