/* MIDDLE DIV */

#middle, #popUp{
    grid-area: main;
    height: max-content;
    /* position: absolute; */
    /* top: 55%;
    left: 50%;
    transform: translate(-50%, -55%); */
    margin: auto;
    /* display: grid;
    justify-content: center; */
}

#shadow {
    position: absolute;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transition: 400ms;
}

.formArea {
    /* width: 400px; */
    /* height: max-content; */
    justify-content: center;
    padding: 25px 50px 25px 50px;
    border-radius: 15px;
    /* background: rgba(255, 255, 255, 0.9); */
    background: rgba(245, 245, 245, 0.95);
    display: grid;
}

form {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

.navigation{
    height: max-content;
    display: flex;
    justify-content: center;
    margin: 20px;
}

.navigationButton{
    width: 75px;
    border: none;
    border-radius: 15px;
    margin: 0px 6px 0px 6px;
    transition: 200ms;
    padding: 5px 12px 5px 12px;
    font-family: MontserratL;
    background: rgb(255, 255, 255);
    box-shadow: 0px 0px 4px 0px rgb(179, 179, 179);
}

.navigationButton:hover{
    background: rgba(57, 55, 56, 1);
    color: white;
}