html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: rgb(100, 148, 237);
}

nav{
    position: fixed;
    top: 0;
    left: 0;
}

main {
    height: 100%;
    width: 100vh;
    margin: 0 auto;
    padding: 0;
    background-color: aqua;
}

/* UI */
.message-backdrop{
    width: 100vw;
    height: 100vh;
    z-index: 1010;
    top: 0;
    left: 0;
    position: fixed;
    background-color: rgb(0, 0, 0, 0.8);
}

/* the 'popup' */
#data-entry-box {
    position: relative;
    top: 50%;
    left: 50%;
    width: 600px;
    max-width: 100%;
    height: 400px;
    max-height: 100%;
    transform: translate(-50%, -50%);

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

    background-color: rgb(0, 0, 0);
}

#cancel{
    grid-area: 2 / 1 / 2 / 2;
}

#save{
    grid-area: 2 / 2 / 3 / 3;
}

.data-entry {
    padding: 1em;
    margin: 0;
    grid-area: 1 / 1 / 2 / 3;
    color: cornsilk;
}

.data-entry > textarea{
    width: 99%;
    height: 80%;
    resize: none;
}

.hidden{
    display: none;
}
.shown{
    display: block;
}