:root, :root.light {
    --primary-color: #2c3e50;
    --accent-background: rgb(30, 30, 82);
    --secondary-color: white;
    --background-color: white;
    --popup-color: rgb(224, 224, 224);
    --accent-color: #42b983;
    --hover-color: rgb(165, 165, 165);
    --accent-background-hover: rgb(124, 140, 236);
    --overlay-color: rgba(0, 0, 0, 0.7);
    --inactive-color: rgb(100, 100, 100);
    --highlight-backdrop: rgb(143, 134, 192);
    --hint-color: rgb(174, 210, 221);
    --PI: 3.14159265358979;
}

:root.dark {
    --primary-color: white;
    --accent-background: rgb(56, 56, 112);
    --secondary-color: white;
    --background-color: rgb(32, 32, 32);
    --popup-color: rgb(58, 58, 58);
    --accent-color: #42b983;
    --hover-color: rgb(83, 83, 83);
    --accent-background-hover: #4380a8;
    --overlay-color: rgba(104, 104, 104, 0.575);
    --inactive-color: rgb(190, 190, 190);
    --highlight-backdrop: rgb(85, 63, 207);
    --hint-color: rgb(88, 91, 110);
}

@media ( prefers-color-scheme: dark ) {
    :root {
        --primary-color: white;
        --accent-background: rgb(56, 56, 112);
        --secondary-color: white;
        --background-color: rgb(32, 32, 32);
        --popup-color: rgb(58, 58, 58);
        --accent-color: #42b983;
        --hover-color: rgb(83, 83, 83);
        --accent-background-hover: #4380a8;
        --overlay-color: rgba(104, 104, 104, 0.575);
        --inactive-color: rgb(190, 190, 190);
        --highlight-backdrop: rgb(85, 63, 207);
        --hint-color: rgb(88, 91, 110);
    }
}

::selection {
    background-color: var( --highlight-backdrop );
    color: var( --secondary-color );
}

#themeSelector {
    background-color: rgba( 0, 0, 0, 0 );
    color: var( --primary-color );
    font-size: 130%;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
}

nav {
    padding: 30px;
}

nav a {
    font-weight: bold;
    color: var( --primary-color );
}

nav .home {
    color: #42b983;
    text-decoration: underline;
    cursor: default;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    color: var( --primary-color );
    background-color: var( --background-color );
    transition: all 0.5s;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
}