pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8em;
}

code.hljs {
    padding: 3px 5px;
    font-family: "JetBrains Mono", monospace;
}

.hljs-ln td {
    padding-right: 16px!important;
}

.hljs-ln-n {
    opacity: 0.7;
}

[data-theme="light"] {
    .hljs {
        color: #383a42;
    }

    .hljs-comment,
    .hljs-quote {
        color: #a0a1a7;
        font-style: italic;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
        color: #a626a4;
    }

    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
        color: #e45649;
    }

    .hljs-literal {
        color: #0184bb;
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta .hljs-string {
        color: #50a14f;
    }

    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
        color: #986801;
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
        color: #4078f2;
    }

    .hljs-built_in,
    .hljs-title.class_,
    .hljs-class .hljs-title {
        color: #c18401;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    .hljs-link {
        text-decoration: underline;
    }
}

[data-theme="dark"] {
    .hljs {
        color: #b5bdca;
    }

    .hljs-comment,
    .hljs-quote {
        color: #5c6370;
        font-style: italic;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
        color: #c678dd;
    }

    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
        color: #f5c2e4;
    }

    .hljs-literal {
        color: #f3a472;
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta .hljs-string {
        color: #8ca878;
    }

    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
        color: #d19a66;
    }

    .hljs-meta {
        color: #ebb371;
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-selector-id,
    .hljs-title {
        color: #61aeee;
    }

    .hljs-built_in {
        color: #6cb4ed;
    }

    .hljs-title.class_,
    .hljs-class .hljs-title {
        color: #6cb4ed;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-strong {
        font-weight: bold;
    }

    .hljs-link {
        text-decoration: underline;
    }

    .hljs-params {
        color: #b5bdca;
    }
}

@media screen and (max-width: 600px) {
    pre code.hljs {
        font-size: 0.7em;
    }
}