:root {
    --black        : rgb(65, 57, 70);
    --gray         : rgb(95, 90, 99);
    --gray-medium  : rgb(150, 150, 150);
    --gainsboro    : rgb(220, 220, 220);
    --gray-light   : rgb(247, 247, 247);
    --white        : rgb(255, 255, 255);
    --white-alpha  : rgba(255, 255, 255, 0.44);
    --pink         : rgb(173, 104, 216);
    --pink-light   : rgb(178, 155, 194);
    --pink-alpha3  : rgba(208, 146, 247, 0.20);
    --pink-alpha2  : rgba(208, 146, 247, 0.15);
    --pink-alpha1  : rgba(208, 146, 247, 0.10);
    --purple       : rgb(131, 57, 194);
    --purple-medium: rgb(94, 67, 112);
    --purple-dark  : rgb(103, 58, 131);
    --yellow-js    : rgb(247, 223, 30);
    --yellow-dark  : rgb(197, 166, 0);
}

.hljs {
    color: var(--black);
}

.hljs-comment,
.hljs-template_comment {
    color: var(--gray-medium);
    font-style: italic;
}

.hljs-keyword,
.css .rule .hljs-keyword,
.javascript .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
    font-weight: bold;
}

.hljs-number,
.hljs-hexcolor {
    color: var(--yellow-dark)
}

.hljs-string,
.hljs-tag .hljs-value {
    color: var(--purple-dark);
}

.hljs-title,
.hljs-id {
    color: var(--purple);
    font-weight: bold;
}

.javascript .hljs-title,
.hljs-list .hljs-keyword,
.hljs-subst {
    font-weight: bold;
}

.hljs-class .hljs-title,
.hljs-type {
    font-weight: bold;
}

.hljs-attribute,
.hljs-variable {
    color: var(--pink);
}

.hljs-regexp {
    color: var(--yellow-dark);
}

.hljs-built_in {
    color: var(--purple);
}

.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
    font-weight: bold;
}
