:root {
    --main-color: #57cc8a;
    --second-color: coral;
    --third-color: rgb(32, 192, 192);
    --container-color: #353b43;
    --second-container-color: #454f53;
    --side-container-color: #353f18;
    --background-color: #242930;
    --text-color: #dfdfdf;
    --inverse-text-color: #242930;
    --alt-row-color: #333;
    --row-color: #454b53;
    --lightbox-bg-color: rgba(0, 0, 0, 0.8);
    --overlay-bg-color: rgba(0, 0, 0, 0.6);
    --overlay-text-color: var(--text-color);
    --deemphasized-text-color: gray;
}

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

@media (prefers-color-scheme: light) {
    :root {
        --main-color:  rgb(64, 64, 192);
        --second-color:  green;
        --third-color: rgb(32, 92, 92);
        --container-color: #e5ebf3;
        --second-container-color: #c5cfd3;
        --side-container-color: #c5cff3;
        --background-color: white;
        --text-color: #242930;
        --inverse-text-color: #dfdfdf;
        --alt-row-color: #ccc;
        --row-color: #d5dbe3;
        --overlay-text-color: #dfdfdf;
    }
}

body {
    color: var(--text-color);
}

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

.panel {
    background-color: var(--second-container-color);
}

.mainfooter {
    background-color: var(--side-container-color);
}