:root {
    --codebox-background-color: #0d192a;
    --codebox-scrollbar-track-color: #404040;
    --codebox-scrollbar-thumb-color: #808080;
}

html[data-theme="dark"] {
    --codebox-background-color: #0d192a;
    --codebox-scrollbar-track-color: #404040;
    --codebox-scrollbar-thumb-color: #808080;
}

code {
    color: var(--text-code-color);
    font-size: 105%;
}

.code-box {
    text-align: left;
    background-color: var(--codebox-background-color);
    border-radius: 8px;
    padding: 20px 20px 10px 20px;
    margin: 0 auto;
    overflow-y: auto;
}

.code-box pre {
    color: #858585;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.code-box::-webkit-scrollbar {
    height: 10px;
}

.code-box::-webkit-scrollbar-track {
    background-color: var(--codebox-scrollbar-track-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.code-box::-webkit-scrollbar-thumb {
    background-color: var(--codebox-scrollbar-thumb-color);
    border-radius: 5px;
}

.code-box pre .tag {
    color: #569cd6;
}

.code-box pre .data {
    color: #9cdcfe;
}

.code-box pre .string {
    color: #ce9178;
}

.code-box pre .method {
    color: #dcdcaa;
}

.code-box pre .text {
    color: #d4d4d4;
}

pre[class*=language-].line-numbers {
    margin: 2em 0;
    background-color: var(--codebox-background-color);
    border: 1px solid var(--border-color);
    box-shadow: none;
    border-radius: 8px;
    font-size: 14px;
}

pre[class*=language-].line-numbers>code {
    color: #d4d4d4;
}

pre[class*=language-].line-numbers::-webkit-scrollbar {
    height: 10px;
}

pre[class*=language-].line-numbers::-webkit-scrollbar-track {
    background-color: var(--codebox-scrollbar-track-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

pre[class*=language-].line-numbers::-webkit-scrollbar-thumb {
    background-color:  var(--codebox-scrollbar-thumb-color);
    border-radius: 5px;
}

.line-numbers .line-numbers-rows {
    border-right: none;
}

pre[class*=language-].line-numbers {
    padding-left: 3.5em;
    color: red;
}

.line-numbers-rows>span:before {
    color: #858585;
}

.token.tag, .token.keyword {
    color: #569cd6;
}

.token.attr-name {
    color: #9cdcfe;
}

.token.attr-value {
    color: #ce9178;
}

.token.punctuation {
    color: #858585;
    opacity: 1;
}

.token.value.javascript {
    color: #9cdcfe;
}

.token.function {
    color: #dcdcaa;
}

.token.string {
    color: #ce9178;
}