/* <script>
document.querySelectorAll(".ham").forEach(b => {

    b.addEventListener("click", function (e) {

        console.log("123")
        b.classList.toggle("open")

    });
})
</script> */

.btn_ham,
.btn_mess {
    display: none;
    height: 50%;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 4px;
}


.ham {
    aspect-ratio: 115 / 100;
    height: 20px;
    position: relative;
    margin: 50px auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

.ham span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: var(--color_1_1);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}


.ham span:nth-child(1) {
    top: 0px;
}

.ham span:nth-child(2),
.ham span:nth-child(3) {
    top: 9px;
}

.ham span:nth-child(4) {
    top: 18px;
}

.ham.open span:nth-child(1) {
    top: 9px;
    width: 0%;
    left: 50%;
}

.ham.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ham.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ham.open span:nth-child(4) {
    top: 9px;
    width: 0%;
    left: 50%;
}




@media screen and (max-width: 1100px) {

    .btn_ham,
    .btn_mess {
        display: flex;
    }
}




.btn_mess {
    animation: view_me 5s linear infinite;
}

@keyframes view_me {
    0% {
        transform: rotate(0deg)
    }

    2% {
        transform: rotate(10deg)
    }

    4% {
        transform: rotate(0deg)
    }

    6% {
        transform: rotate(-10deg)
    }

    8% {
        transform: rotate(0deg)
    }
}