:root {
    --background-color: coral;
    --font-color: black;
    --hover-color-on-background: lightblue;
    --nav-button-color: lightgreen;
    --nav-button-hover-color: lightblue;
}

/* -------------------- Home Page -------------------- */

/* ---------- Header ---------- */

body {
    margin: 0 auto;
    font-size: 20px;
    overflow: scroll;
}

nav, #ponder_links {
    background-color: var(--background-color);
    height: 80px;
    display: flex;
    justify-content: left;
    align-items: center;
    overflow: scroll;
}

nav a, #ponder_links a {
    font-size: 1em;
    color: var(--font-color);
    text-decoration: none;
    padding: 20px;
    text-align: center;
}

nav button {
    font-size: 1em;
    background-color: var(--nav-button-color);
    border-radius: 5px;
    border: 0px;
    margin-right: 20px;
}

nav button:hover {
    background-color: var(--nav-button-hover-color);
}

#ponder_links {
    display: none;
}

nav a:hover, #ponder_links a:hover {
    color: var(--hover-color-on-background);
}

/* ---------- Main ---------- */

h1 {
    text-align: center;
}

main p {
    margin: 20px 10%;
    font-size: 1em;
}

/* ---------- Footer ---------- */


/* ---------- Small Device Settings ---------- */

@media (max-width: 700px)  {
    nav, #ponder_links {
        flex-direction: column;
        height: auto;
    }
    nav a, #ponder_links a {
        padding: 0;
        margin: 6px auto;
        width: 100%;
    }
}