*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background:#242424}.menu,body{display:flex;justify-content:center;align-items:center}.menu{position:relative;width:280px;height:280px}.menu li{position:absolute;left:0;list-style:none;transition:.5s;transition-delay:calc(.1s * var(--i));transform-origin:140px;transform:rotate(0deg) translateX(110px)}.menu .toggle{position:absolute;width:60px;height:60px;background:#242424;border:2px solid #fff;border-radius:50%;color:#fff;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10000;font-size:2em;transition:1.25s}.menu.active .toggle{transform:rotate(315deg) translateX(110px)}.menu.active li{transform:rotate(calc((1turn / 4) * var(--i)))}.menu li a{display:flex;justify-content:center;align-items:center;width:60px;height:60px;color:var(--clr);border:2px solid var(--clr);border-radius:50%;font-size:1.5em;transform:rotate(calc((1turn / -4) * var(--i)));transition:1s}.menu li a:hover{transition:0s;background:var(--clr);color:#333;box-shadow:0 0 10px var(--clr),0 0 30px var(--clr),0 0 50px var(--clr)}.menu li:nth-child(2){--i:1;--clr:#0072b1}.menu li:nth-child(3){--i:2;--clr:#fff}.menu li:nth-child(4){--i:3;--clr:#fe00f1}.menu li:nth-child(5){--i:0;--clr:#ff2972}