* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    color-scheme: light dark;

    --primary-color: cadetblue;
    --secondary-color: rgb(250, 205, 150);
    --heading-color: cadetblue;
    --link: rgb(250, 160, 35);
    --button: rgb(250, 185, 105);
    --shadow: rgb(140, 100, 0);
    --neutral-bg: white;
    --contrast-bg: #f9f9f9;
    --text-muted: #4c4c4c;
    --text-contrast: black;
}

html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: "Roboto", sans-serif;
    background-color: var(--primary-color);
}

main {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    background-color: var(--neutral-bg);
}

a {
    color: var(--link);
    white-space: pre-wrap;
}

table {
    max-width: 100vw;
}

/* Footer stays at bottom */
footer {
    background-color: light-dark(#f2f2f2, rgb(80, 80, 80));
    padding: 0.75rem 2rem;
    text-align: center;
    font-size: 0.9rem;
    /* prevent shrinking */
    flex-shrink: 0;

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;

        & a {
            text-decoration: none;
        }
    }
    /* Accessibility */
    & ol li a{
        display: inline-block;
        margin: 4px 0;
    }
    & ul li a{
        display: inline-block;
        margin: 4px 0;
    }
}



@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: rgb(50, 105, 110);
        --heading-color: cadetblue;
        --link: rgba(250, 205, 150, 0.8);
        --button: rgb(250, 185, 105, 0.8);
        --neutral-bg: #27272a;
        --contrast-bg: #2d2d32;
        --text-muted: #9aa0a6;
        --text-contrast: white;
    }
}