html[data-theme="light"] {
    --font-size: 16px;
    --bg-color: #ffffff;
    --middle-color: #253092;
    --main-color: #04010a;
    --similar-color: #04010b;
    --similar-bg-color: #fffafb;
    --red: #bf3011;
    --cherry: #fd5ff0;
    /* --cherry: #69122d; */
    --orange: #df8022;
    --yellow: #e5b527;
    --mint: #26d07e;
    --green: #06694a;
    --blue: #3896d4;
    --indigo: #253092;
    --purple: #820d7c;
    --gray: #929292;
    --light-gray: #d3d3d3;
    color: var(--main-color);
    --operator-color: #0033b3;
    --bracket-color: #c8511e;
    --string-color: #067d17;
}

html[data-theme="dark"] {
    --font-size: 16px;
    --bg-color: #282a36;
    --middle-color: #3896d4;
    /* --main-color: snow; */
    --main-color: #cfcfc2;
    --similar-color: #cfcfc3;
    --similar-bg-color: #04010b;
    --red: #bf3011;
    --cherry: #fd5ff0;
    --orange: #df8022;
    --yellow: #e5b527;
    --mint: #06694a;
    --green: #26d07e;
    --blue: #3896d4;
    --indigo: #253092;
    --purple: #820d7c;
    --gray: LightGray;
    --light-gray: #5d5d5d;
    color: var(--main-color);
    --string-color: #f1fa8c;
    --operator-color: #3896d4;
    --bracket-color: #b17215;
}

a {
    color: var(--middle-color)
}

.error {
    color: var(--red)
}

.complete {
    background-color: var(--mint)
}

.hoverable:hover {
    background-color: var(--light-gray);
}

.string {
    color: var(--string-color)
}

.operator {
    color: var(--operator-color)
}

.bracket {
    color: var(--bracket-color)
}