:root{
    --font-color: #3c4043;
    --bg-color: #ffffff;
    --code-bg-color: #F5F1EC;
    --code-count-color: #e7e5e3;
    --var-color: #3b82f6;
    --func-name-color: #f87171;
    --comment-color: #708090;
    --string-color: #22c55e;
    --keyword-color: #bd2cbd;
    --link-color:#690;
    --templateLit-color: #3436bb;
    --err-color: #ef5350;
    --succ-color: #4caf50;
    --btn-bg-color: #3ac267;
    --btn-bg-hoover: #1f8860e5;
    --border-color: #dadce0;
    --bg-hover-color: #E3EDF7;
    --popover-bg-color: #001a34e5;
    --popover-color: #fffffff5;
    --disabled-bg-color: rgb(0 0 0 / 40%);
    --disabled-color: rgba(41, 41, 41, 0.4);
}
:root.dark{
    --font-color: #EEF1F3;
    --bg-color: #0d1117;
    --code-bg-color: #161b22;
    --code-count-color: #30363d;
    --var-color: #3b82f6;
    --func-name-color: #f87171;
    --comment-color: #708090;
    --string-color: #22c55e;
    --keyword-color: #bd2cbd;
    --link-color:#690;
    --templateLit-color: #5254df;
    --err-color: #ef5350;
    --succ-color: #4caf50;
    --btn-bg-color: #3ac267;
    --btn-bg-hoover: #1f8860e5;
    --border-color: #30363d;
    --bg-hover-color: #30363d;
    --popover-bg-color: #fffffff5;
    --popover-color: #001a34e5;
    --disabled-bg-color: rgba(71, 71, 71, 0.4);
    --disabled-color: rgba(104, 104, 104, 0.4);
}
.variable, .tag{
    color: var(--var-color);
}
.function, .attr{
    color: var(--func-name-color)
}
.string{
    color: var(--string-color);
}
.comment{
    color: var(--comment-color);
}
.keyword{
    color: var(--keyword-color);
}
.templateLit{
    color: var(--templateLit-color);
}
.code{
    background-color: #afb8c133;
    color: var(--font-color);
    padding: .2em .4em;
    border-radius: 6px;
    font-size: 85%;
}
label:has(.code){
    .code{
        font-size: 14px;
    }
}
label:is(.wrong-answer), label:is(.right-answer){
    .code{
        color: white;
        background-color: inherit;
    }
}
.comment:has(.string){
    .variable, .string, .function, .keyword{
        color: inherit;
    }
}