pre {
    display: block;
    overflow-x: scroll;
    box-sizing: border-box;
    
    /* background-color: var(--hljs-bg); */
    color: var(--hljs-text);
    
    font-size: medium;
    padding: 1em;
    line-height: 1.5;
}

pre code.hljs {
    display: block;
}

code.hljs {
    padding: 5px;
}

/* Base text */
.hljs {
    color: var(--hljs-text);
    background: var(--hljs-bg);
}

/* Comments and quotes */
.hljs-comment,
.hljs-quote {
    color: var(--hljs-comment);
    font-style: italic;
}

/* Keywords like if, else, return */
.hljs-doctag,
.hljs-formula,
.hljs-keyword {
    color: var(--hljs-keyword);
}

/* Function & section titles */
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-subst {
    color: var(--hljs-function);
}

/* Strings like "meow" */
.hljs-string,
.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute {
    color: var(--hljs-string);
}

/* Numbers */
.hljs-number,
.hljs-literal {
    color: var(--hljs-number);
}

/* Variables, types, selectors */
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-pseudo,
.hljs-selector-attr {
    color: var(--hljs-variable);
}

/* Class titles, built-ins */
.hljs-title,
.hljs-built_in {
    color: var(--hljs-title);
}

/* Emphasis / strong */
.hljs-emphasis {
    font-style: italic;
}
.hljs-strong {
    font-weight: 700;
}

/* Links */
.hljs-link {
    text-decoration: underline;
    color: var(--hljs-link);
}

pre::selection,
pre code::selection,
code.hljs::selection,
pre code *::selection {
    background: var(--hljs-text);
    color: var(--hljs-bg);
    font-weight: bold;
}


.hljs-comment::selection,
.hljs-quote::selection {
    background: var(--hljs-comment);
    color: var(--hljs-bg);
    font-weight: normal;
    font-style: italic;
}

.hljs-doctag::selection,
.hljs-formula::selection,
.hljs-keyword::selection {
    background: var(--hljs-keyword);
    color: var(--hljs-bg);
}

.hljs-name::selection,
.hljs-section::selection,
.hljs-selector-tag::selection,
.hljs-subst::selection {
    background: var(--hljs-function);
    color: var(--hljs-bg);
}

.hljs-string::selection,
.hljs-meta .hljs-string::selection,
.hljs-regexp::selection,
.hljs-addition::selection,
.hljs-attribute::selection {
    background: var(--hljs-string);
    color: var(--hljs-bg);
}

.hljs-number::selection,
.hljs-literal::selection {
    background: var(--hljs-number);
    color: var(--hljs-bg);
}

.hljs-variable::selection,
.hljs-template-variable::selection,
.hljs-type::selection,
.hljs-selector-class::selection,
.hljs-selector-pseudo::selection,
.hljs-selector-attr::selection {
    background: var(--hljs-variable);
    color: var(--hljs-bg);
}

.hljs-title::selection,
.hljs-built_in::selection {
    background: var(--hljs-title);
    color: var(--hljs-bg);
}

.hljs-emphasis::selection {
    background: var(--hljs-text);
    color: var(--hljs-bg);
    font-style: italic;
}

.hljs-strong::selection {
    background: var(--hljs-text);
    color: var(--hljs-bg);
}

.hljs-link::selection {
    background: var(--link);
    color: var(--hljs-bg);
    text-decoration: underline;
}
