nav {
 position: relative;
}

.menu-toggle {
 display: flex;
 flex-direction: column;
 position: absolute;
 top: 40px;
 right: 20px;
 z-index: 1;
 user-select: none;
}

.menu-toggle input {
 display: flex;
 width: 40px;
 height: 32px;
 position: absolute;
 cursor: pointer;
 opacity: 0;
 z-index: 2;
}

.menu-toggle span {
 display: flex;
 width: 29px;
 height: 2px;
 margin-bottom: 5px;
 background: #333;
 border-radius: 3px;
 transition: transform 0.5s, background 0.5s, opacity 0.55s;
}

.menu-toggle input:checked ~ span {
 transform: rotate(45deg);
 background: #555;
}

.menu-toggle input:checked ~ span:nth-last-child(2) {
 transform: rotate(-45deg);
}

.menu-toggle input:checked ~ span:nth-last-child(3) {
 opacity: 0;
}

.menu-nav {
 display: none;
 flex-direction: column;
 position: absolute;
 top: 60px;
 right: 0;
 background: #fff;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 padding: 10px;
}

.menu-nav li {
 list-style: none;
 margin: 10px 0;
}

.menu-nav li a {
 text-decoration: none;
 color: #333;
}

.menu-toggle input:checked ~ .menu-nav {
 display: flex;
}