.nav-button{
    cursor: pointer;
}

.wrap{
    position: none;

    top: 50%;
    left: 50%;

    transform: translate(-50% , -50%);

    width: 0;
    height: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 97;
}

.show{
    position: fixed;
    width: 100%;
    height: 100vh;
}

.menu{
    width: 20%;
    height: 70vh;

    background-color: var(--background-color);

    scale: 0.1;
    scale: 0.9;
    opacity: 0;

    transform: translate(0 , 10%);

    transition: 0.6s;

}

.shown-2{
    opacity: 1;
    transform: translate(0 , 0);
}

.shown-1{
    scale: 1;
}

.removed-1{
    opacity: 0;
    transform: translate(-50% , -40%);
}

.removed-2{
    transform: translate(-50% , -50%) scale(0.9);
}