:root {
    --color: #000;
    --background-color: #fff;
    --background-color-translucent: #ffffff3b;
    --background-color-hover: #d6d6d64b;
    --background-color-active: #a3a3a34b;
    --selection: rgba(40, 40, 40, 0.12);
    --opacity-hover: 0.55;
    --opacity-active: 0.25;

    --transition-speed: .24s;
}

html[theme=dark] {
    --color: white;
    --background-color: #0f0f0f;
    --background-color-translucent: #0f0f0f3b;
    --background-color-hover: #6464644b;
    --background-color-active: #8b8b8b4b;
    --selection: rgba(215, 215, 215, 0.12);
    --opacity-hover: 0.75;
    --opacity-active: 0.5;
}

html {
    color: var(--color);
    background-color: var(--background-color);
    scrollbar-color: grey var(--background-color);
}