body {
    margin: 0;
    background-color: #dfb0b8;
}

#main {
    /* margin: auto; */

    min-height: 100dvh;
    min-width: 100dvw;
    max-width: 100dvw;

    display: grid;
    grid-template-rows: auto 1fr auto;
}

#page-container {
    background-color: #d8dfdf;
    color: #2f0808;
    border-radius: 1em;

    padding: 1em;
    margin: .75em;
    
    padding-bottom: 2em;
    margin-bottom: 5em;
}

#footer {
    background-color: #d8dfdf;

    max-width: fit-content;
    margin-inline: auto;

    display: flex;
    flex-wrap: wrap;
    gap: .2em;

    bottom: 2em;

    border-radius: .25em;
    padding: .4em;
    margin-bottom: 1em;
}

#navbar {
    background-color: #dfb0b8;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;
    row-gap: .8em;

    padding-top: .8em;
    padding-bottom: .3em;
}

#navbar button {
    /* remove undesired default button styling */
    padding: 0;
    border: none;


    font-size: 1.2em;

    background-color: #efb6bb;
    border-radius: .35em;

    padding-left: .35em;
    padding-right: .35em;
    margin-top: .1em;
    margin-bottom: .1em;

    cursor: pointer;
}

#navbar button:hover  {
    background-color: #ffbfc8;
}

img {
    max-width: calc(100dvw - 3.5em);
}