:root[data-theme="light"] {
    --text-50: #edf7f5;
    --text-100: #dbf0eb;
    --text-200: #b8e0d6;
    --text-300: #94d1c2;
    --text-400: #70c2ad;
    --text-500: #4db399;
    --text-600: #3d8f7a;
    --text-700: #2e6b5c;
    --text-800: #1f473d;
    --text-900: #0f241f;
    --text-950: #08120f;

    --background-50: #f0f5f4;
    --background-100: #e0ebe8;
    --background-200: #c2d6d1;
    --background-300: #a3c2ba;
    --background-400: #85ada3;
    --background-500: #66998c;
    --background-600: #527a70;
    --background-700: #3d5c54;
    --background-800: #293d38;
    --background-900: #141f1c;
    --background-950: #0a0f0e;

    --primary-50: #e8fdf3;
    --primary-100: #d0fbe8;
    --primary-200: #a1f7d0;
    --primary-300: #72f3b9;
    --primary-400: #43efa2;
    --primary-500: #14eb8a;
    --primary-600: #10bc6f;
    --primary-700: #0c8d53;
    --primary-800: #085e37;
    --primary-900: #042f1c;
    --primary-950: #02170e;

    --secondary-50: #edeff7;
    --secondary-100: #dce0ef;
    --secondary-200: #b8c1e0;
    --secondary-300: #95a2d0;
    --secondary-400: #7182c1;
    --secondary-500: #4e63b1;
    --secondary-600: #3e4f8e;
    --secondary-700: #2f3c6a;
    --secondary-800: #1f2847;
    --secondary-900: #101423;
    --secondary-950: #080a12;

    --accent-50: #eeedf7;
    --accent-100: #dddbf0;
    --accent-200: #bcb8e0;
    --accent-300: #9a94d1;
    --accent-400: #7870c2;
    --accent-500: #574db3;
    --accent-600: #453d8f;
    --accent-700: #342e6b;
    --accent-800: #231f47;
    --accent-900: #110f24;
    --accent-950: #090812;

}

:root[data-theme="dark"] {
    --text-50: #08120f;
    --text-100: #0f241f;
    --text-200: #1f473d;
    --text-300: #2e6b5c;
    --text-400: #3d8f7a;
    --text-500: #4db399;
    --text-600: #70c2ad;
    --text-700: #94d1c2;
    --text-800: #b8e0d6;
    --text-900: #dbf0eb;
    --text-950: #edf7f5;

    --background-50: #0a0f0e;
    --background-100: #141f1c;
    --background-200: #293d38;
    --background-300: #3d5c54;
    --background-400: #527a70;
    --background-500: #66998c;
    --background-600: #85ada3;
    --background-700: #a3c2ba;
    --background-800: #c2d6d1;
    --background-900: #e0ebe8;
    --background-950: #f0f5f4;

    --primary-50: #02170e;
    --primary-100: #042f1c;
    --primary-200: #085e37;
    --primary-300: #0c8d53;
    --primary-400: #10bc6f;
    --primary-500: #14eb8a;
    --primary-600: #43efa2;
    --primary-700: #72f3b9;
    --primary-800: #a1f7d0;
    --primary-900: #d0fbe8;
    --primary-950: #e8fdf3;

    --secondary-50: #080a12;
    --secondary-100: #101423;
    --secondary-200: #1f2847;
    --secondary-300: #2f3c6a;
    --secondary-400: #3e4f8e;
    --secondary-500: #4e63b1;
    --secondary-600: #7182c1;
    --secondary-700: #95a2d0;
    --secondary-800: #b8c1e0;
    --secondary-900: #dce0ef;
    --secondary-950: #edeff7;

    --accent-50: #090812;
    --accent-100: #110f24;
    --accent-200: #231f47;
    --accent-300: #342e6b;
    --accent-400: #453d8f;
    --accent-500: #574db3;
    --accent-600: #7870c2;
    --accent-700: #9a94d1;
    --accent-800: #bcb8e0;
    --accent-900: #dddbf0;
    --accent-950: #eeedf7;
}


@media (prefers-color-scheme: light) {

    :root .icon,
    :root[data-theme="dark"] .icon-dark,
    :root[data-theme="light"] .icon {
        -webkit-filter: invert(0);
        filter: invert(0);
    }

    :root .icon-dark,
    :root[data-theme="light"] .icon-dark,
    :root[data-theme="dark"] .icon {
        -webkit-filter: invert(1);
        filter: invert(1);
    }
}

@media (prefers-color-scheme: dark) {

    :root .icon,
    :root[data-theme="light"] .icon-dark,
    :root[data-theme="dark"] .icon {
        -webkit-filter: invert(1);
        filter: invert(1);
    }

    :root .icon-dark,
    :root[data-theme="dark"] .icon-dark,
    :root[data-theme="light"] .icon {
        -webkit-filter: invert(0);
        filter: invert(0);
    }
}

body {
    background-color: var(--background-50);
    color: var(--text-950)
}

p {
    color: var(--text-800);
}

#about p {
    color: var(--text-950);
}

header q {
    color: var(--text-800)
}

footer {
    background-color: var(--secondary-500);
    color: var(--secondary-900);
}

h1 {
    background-color: var(--primary-700);
    text-shadow: 1.5px 1.5px var(--background-50);
}

h2 {
    background-color: var(--accent-500);
}

a {
    color: var(--primary-700);
}

footer a {
    color: var(--secondary-800);
}

footer .button:hover {
    -webkit-filter: invert(0.2);
    filter: invert(0.2);
}

footer .button:active {
    -webkit-filter: invert(0.8);
    filter: invert(0.8);
}

select {
    background-color: var(--accent-600);
    color: var(--text-950);
}

select option {
    background-color: var(--accent-600);
    color: var(--accent-800);
}

/* doesnt work
select option:hover {
    background-color: var(--accent-700);
}*/

a:hover {
    color: var(--text-950);
}

th {
    background-color: var(--secondary-500);
}

td {
    background-color: var(--secondary-200);
}

button {
    border: none;
}

button .icon {
    width: 100%;
}

#audio-player button {
    background-color: var(--accent-700);
}

#status th {
    background-color: var(--secondary-500);
}

#calendar .month {
    background-color: var(--secondary-500);
}

#calendar .weekdays {
    background-color: var(--secondary-500);
}

#calendar .days td {
    background-color: var(--background-200);
    color: var(--background-800);
}

#calendar .days .event {
    background-color: var(--background-400);
    color: var(--background-950);
}

#calendar .days .cal-preview-prev,
#calendar .days .cal-preview-next {
    background-color: var(--secondary-300);
    color: var(--secondary-700);
}

#calendar .days td:hover,
#calendar .days .cal-preview-prev:hover,
#calendar .days .cal-preview-next:hover {
    background-color: var(--secondary-500);
    color: var(--background-900);
}

#theme-toggle-label {
    background-color: var(--secondary-300);
    filter: drop-shadow(2px 2px var(--background-950));
}

#calendar .days .active {
    background-color: var(--primary-600);
    color: var(--background-50);
}

.clock {
    background-color: var(--secondary-200);
}