body {
    text-align: center;
    /* For now, light background color and dark text color. */
    background-color: #2b2d46;
    color: white;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    font-family: Arial, sans-serif;
    min-height: 100vh; /* body takes up at least the entire height of the window. */
    /* These three lines center the login form vertically. */
    display: flex;
    justify-content: center;
    flex-direction: column;

    /* TODO: add background image or gradient. */
}

.container {
    /* All containers will start out hidden, except for the login container. */
    display: none;
    overflow-y: auto;
}

.icon-button {
    /* Remove default button styling */
    background: none;
    border: none;
    /* Make the cursor indicate that this button is clickable */
    cursor: pointer;
}

.icon-button:hover img {
    opacity: 70%;
}

#settings-button {
    /* Make settings button float over everything else, except pop-ups */
    z-index: 2;
    /* Pin the button to the bottom right corner */
    position: absolute;
    bottom: 10px;
    right: 10px;
}

footer {
    font-size: 12px;
}

#credits-link {
    /* Make the color of this link the same as the surrounding text. */
    color: inherit;
}