styles.css

:root {
    --vocab-hl-basic-opacity: 0.5;
    --vocab-hl-intermediate-opacity: 0.5;
    --vocab-hl-advanced-opacity: 0.5;
    --vocab-hl-specialized-opacity: 0.5;
    --vocab-hl-idiomatic-opacity: 0.5;
    --vocab-hl-basic: 68, 207, 110;
    --vocab-hl-intermediate: 83, 223, 221;
    --vocab-hl-advanced: 233, 151, 63;
    --vocab-hl-specialized: 2, 122, 255;
    --vocab-hl-idiomatic: 168, 130, 255;
	--vocab-hl-tooltip: none;
	--voab-hl-hover-brightness: 140%;
}

.vocab-hl {
    border-radius: 3px;
}

.vocab-hl:hover {
    filter: brightness(var(--voab-hl-hover-brightness));
	
}

.vocab-hl.vocab-hl-1 {
    background-color: rgba(
        var(--vocab-hl-basic),
        var(--vocab-hl-basic-opacity)
    );
}

.vocab-hl.vocab-hl-2 {
    background-color: rgba(
        var(--vocab-hl-intermediate),
        var(--vocab-hl-intermediate-opacity)
    );
}

.vocab-hl.vocab-hl-3 {
    background-color: rgba(
        var(--vocab-hl-advanced),
        var(--vocab-hl-advanced-opacity)
    );
}

.vocab-hl.vocab-hl-4 {
    background-color: rgba(
        var(--vocab-hl-specialized),
        var(--vocab-hl-specialized-opacity)
    );
}

.vocab-hl.vocab-hl-5 {
    background-color: rgba(
        var(--vocab-hl-idiomatic),
        var(--vocab-hl-idiomatic-opacity)
    );
}