body {
    --text-color: #333333;
    --background-color: #FAFAFA;
}
body.dark-theme {
    --text-color: #E9E9E9;
    --background-color: #202020;
}

@media (prefers-color-scheme: dark) {
    body { 
        --text-color: #E9E9E9;
        --background-color: #202020;
    }
    body.light-theme {
        --text-color: #333333;
        --background-color: #FAFAFA;
    }
}

body, html {
    margin: 0;
    padding: 0;
    color: var(--text-color);
    background: var(--background-color);
    font-family: Roboto, sans-serif;
}

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    
}

* {
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
}

main {
    display: flex;
    justify-content: center;
    flex-grow: 1;
    flex-direction: column;
    width: 70%;
}

main div {
    text-align: center;
}

h1 {
    font-size: 3rem;
    margin: 0.4rem 0;
}

footer {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

footer > *:not(:last-child)::after {
    content: '|';
    padding: 0 0.4rem;
    opacity: 0.8;
}

#toggle-theme {
    cursor: default;
    user-select: none;
}