/* Menu */
.menuON {
    display: flex; flex-direction: column;
    position: fixed;
    height: 70%; width: 70%;
    top: 80%; 
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    background-color: var(--bg);
    border: var(--border-main-all);
    pointer-events: none;
    transition: top 0.4s ease, opacity 0.4s ease;
    z-index: 1000;
}
    .menuON.active {
        top: 52%;
        opacity: 1;
        pointer-events: auto;
    }

    .closeBTNcontainer {
        display: flex; flex-direction: row-reverse;
        padding: 1rem;
    }

        .closeBTNcontainer img {
            cursor: pointer;
            width: 1rem;
        }

    .menuSettings {
        display: flex; flex-direction: column;
        margin: 1rem auto;
        height: auto; width: 95%;
        overflow: hidden scroll;
    }

        .menuSettings a {
            display: flex; flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: auto; width: 80%;
            margin: .5rem auto;
            padding: 1rem;
            border: var(--border-secondary-all);
            background-color: var(--bg-accent);
            transition: .1s;
        }

            .menuSettings a:hover {
                width: 85%;
                background-color: var(--bg);
            }

        .menuSettings a img {
            width: 2rem;
        }


/* Hover and Active -- States -- Buttons "Open and Close" */
.roundBTNanim:hover {transition: .2s; transform: rotate(20deg);}
.roundBTNanim:active {transform: rotate(-15deg);}