:root {
    --color: rgba(var(--color-dev), 0.161);
    --color-half: rgba(var(--color-dev), 0.5);
    --color-full: rgb(var(--color-dev));
    --color-dark: color-mix(in srgb, var(--color-full) 60%, black);
    --font-color: color-mix(in srgb, var(--color-full) 30%, white);
    --active-link-color: color-mix(in srgb, var(--color-full) 40%, white);
    --inactive-link-color: var(--color-full);
    --main-background-color: color-mix(in srgb, var(--color-full) 20%, black);

    /* color: rgb(30, 143, 143); */
    --color-dev: 30, 143, 143;

    /* --accent-color: rgba(138, 18, 18, 0.586); */
    --accent-color: rgba(143, 30, 143, 0.5);
}

[data-theme="green"] {
    /* color: rgb(3, 146, 58); */
    --color-dev: 3, 146, 58 !important;
}

/* [data-theme="orange"] { */
/* color: rgb(209, 125, 0); */
/* --color-dev: 209, 125, 0 !important; */
/* } */

[data-theme="purple"] {
    /* color: rgb(139, 30, 143); */
    --color-dev: 139, 30, 143 !important;
}

[data-theme="red"] {
    /* color: rgb(143, 30, 30); */
    --color-dev: 143, 30, 30 !important;
}

[data-theme="yellow"] {
    /* color: rgb(223, 226, 43); */
    --color-dev: 223, 226, 43 !important;
}

[data-theme="black"] {
    /* color: rgb(80, 80, 80); */
    --color-dev: 80, 80, 80 !important;
    --main-background-color: black !important;
}

html {
    background-color: var(--main-background-color);
}