.burger-menu__button {
 position: fixed;
 top: 10px;
 right: 10px;
 z-index: 30;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 background-image: radial-gradient(circle, blue 0%, black 100%);
 transition: 0.4s;
}

.burger-menu__button:hover .burger-menu__lines {
 filter: brightness(0.7);
}

.burger-menu__lines,
.burger-menu__lines::after,
.burger-menu__lines::before {
 position: absolute;
 width: 40px;
 height: 6px;
 background-color: #fff;

}

.burger-menu__lines {
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

.burger-menu__lines::before {
 content: "";
 top: -12px;
}

.burger-menu__lines::after {
 content: "";
 top: 12px;
}
.burger-menu_active .burger-menu__button,
.burger-menu_active .burger-menu__lines {
 background-color: transparent;
}


.burger-menu_active .burger-menu__lines::before {
 top: 0;
 transform: rotate(45deg);
}

.burger-menu_active .burger-menu__lines::after {
 top: 0;
 transform: rotate(-45deg);
}

.burger-menu__nav {
 padding-top: 80px;
 position: fixed;
 z-index: 20;
 display: flex;
 flex-flow: column;
 height: 100%;
 background-image: radial-gradient(circle, blue 0%, black 100%);
 overflow-y: auto;
 right: -120%;
 transition: 0.5s;
}

.burger-menu_active .burger-menu__nav {
 right: 0;
}

.burger-menu__link {
 padding: 30px;
 font-size: 32px;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 5px;
 color: #fff;
}

.burger-menu__link :hover {
 filter: brightness(0.7);
}

.burger-menu__overlay {
 display: none;
 position: fixed;
 top: 0;
 right: 0;
 width: 100vw;
 height: 100vh;
 z-index: 10;
}
.burger-menu_active .burger-menu__overlay {
 display: block;

}