:root {
    --button-color: #243322;
    --animation-time: 700ms;
}

.btn_animated-nav {
    background: transparent;
    stroke: var(--button-color);
    border: 10px solid var(--button-color, black);
    border-radius: 1rem;
    overflow: hidden;
}
.btn_animated-nav:hover {
    cursor: pointer;
}


.btn_animated-nav .hamburger {
    width: 100%;
    transition: translate var(--animation-time), rotate var(--animation-time);
}
.btn_animated-nav[aria-expanded="true"] .hamburger {
    translate: 6% -5%;
    rotate: 45deg;
}


.btn_animated-nav .line {
    transition: var(--animation-time);
    stroke-dasharray: 60 31 60 300;

    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.btn_animated-nav[aria-expanded="true"] .line {
    stroke-dasharray: 60 104 60 300;
    stroke-dashoffset: -90;
}