@media (prefers-color-scheme: light) {
    :root {
        --background-color: #ffffff;
        --highlighted-background-color: #c8fcfe;
        --pimary-text-color: #333;
        --secondary-text-color: #666;
        --accent-color: #f92c85;
        --accent-color-light: #5ebec4;
        --boxshadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        --hover-color: #AAA;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #272727;
        --highlighted-background-color: #005a5e;
        --pimary-text-color: #dbdbdb;
        --secondary-text-color: #b1b1b1;
        --accent-color: #c10053;
        --accent-color-light: #00858f;
        --boxshadow: rgba(49, 49, 49, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
        --hover-color: #AAA;
    }
}