.nav{--color: #ffffff;background:none;width:50px;position:relative;display:flex;justify-content:center;align-items:center}.nav svg{height:50px;fill:none;stroke:var(--color);stroke-width:7px;stroke-linecap:round;stroke-linejoin:round}.nav svg use:nth-of-type(1){opacity:1;stroke-dashoffset:221;stroke-dasharray:46 249;transition:stroke-dashoffset .12s linear .2s,stroke-dasharray .12s linear .2s,opacity 0s linear .2s}.nav svg use:nth-of-type(2){animation:stroke-animation-reverse 1.2s ease-out forwards}.nav input{position:absolute;height:100%;width:100%;z-index:2;cursor:pointer;opacity:0}.nav input:checked+svg use:nth-of-type(1){stroke-dashoffset:175;stroke-dasharray:0 295;opacity:0;transition:stroke-dashoffset .07s linear .07s,stroke-dasharray .07s linear .07s,opacity 0s linear .14s}.nav input:checked+svg use:nth-of-type(2){animation:stroke-animation 1.2s ease-out forwards}@keyframes stroke-animation{0%{stroke-dashoffset:295;stroke-dasharray:25 270}50%{stroke-dashoffset:68;stroke-dasharray:59 236}65%{stroke-dashoffset:59;stroke-dasharray:59 236}to{stroke-dashoffset:68;stroke-dasharray:59 236}}@keyframes stroke-animation-reverse{0%{stroke-dashoffset:68;stroke-dasharray:59 236}50%{stroke-dashoffset:290;stroke-dasharray:25 270}65%{stroke-dashoffset:295;stroke-dasharray:25 270}to{stroke-dashoffset:290;stroke-dasharray:25 270}}