.menu_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: all .5s ease-in-out;
}

.menu_hamburger {
    width: 20px;
    height: 2px;
    /* background: rgb(25, 25, 25); */
    border-radius: 5px;
    z-index: 10;
    transition: all .5s ease;
}

.menu_hamburger::before,
.menu_hamburger::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    /* background: rgb(25, 25, 25); */
    border-radius: 5px;
    transition: all .5s ease;
}

.menu_hamburger::before {
    transform: translateY(-6px);
}

.menu_hamburger::after {
    transform: translateY(6px);
}

.menu_btn input:checked~.menu_hamburger::before {
    /* transform: rotate(45deg) translate(35px, -35px); */
    transform: rotate(45deg);
}

.menu_btn input:checked~.menu_hamburger::after {
    /* transform: rotate(-45deg) translate(35px, 35px); */
    transform: rotate(-45deg)
}

.menu_btn input:checked~.menu_hamburger {
    /* transform: translateX(-50px); */
    background: transparent;
}

.menu_btn input {
    display: none;
}

.menu-white{
    background: white;
}
.menu-white::before,.menu-white::after{
    background: white;
}

.menu-black{
    background: rgb(25, 25, 25);
}
.menu-black::before,.menu-black::after{
    background: rgb(25, 25, 25);
}

.menu-black-apline{
    background: rgb(25, 25, 25);
}
.menu-black-apline::before,.menu-black-apline::after{
    background: rgb(25, 25, 25);
}