* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  display:flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222327;
}

.menu{
  position: relative;
  width: 51px;
  height: 51px;
  display: flex;
  background-color: rgb(77, 132, 235);
  border-radius: 50%;
  justify-content: center;
  align-items: center; 

	padding: 15px 25px;
	background-image: linear-gradient(rgb(77, 132, 235),rgb(107, 217, 250));

	/* text styles */
	text-decoration: none;
	color: #fff;
	font-size: 15px;
	font-family: sans-serif;
	font-weight: 100;

  text-shadow: 0px 1px 4px -2px #333;
  

}
.menu:after{
    content: '';
    position: absolute;
    top: 1px;
    left: 3px;
    width: calc(100% - 7px);
    height: 50%;
    border-radius: 50%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
  }

  .menu:hover{
    background: linear-gradient(rgb(38, 106, 233),rgb(64, 201, 243));
  }

.menu .toggle{
  position: absolute;
  width: 52px;
  height: 52px;
  color: rgb(107, 217, 250);
  border: 4px solid rgb(107, 217, 250);
  border-radius: 50%; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  cursor: pointer;
  transition: 0.5s;
}

.menu .toggle.active{
  transform: rotate(720deg);
  background: rgb(99, 146, 235);
  color: #222327;

}


.menu li{
  position: absolute;
  left:-112px;
  list-style: none;
  transform-origin: 140px;
  border: 2px solid rgb(107, 217, 250);
  border-radius: 50%;
  transform: rotate(calc(360deg / 8 * var(--i)))translateX(40px);
  z-index: 10;
  pointer-events: none;
  scale: 0;
  transition: 0.5s;
  transition-delay: calc(0.1s * var(--i));
}

.menu.active li{
  scale:1;
  pointer-events: initial;
}
.menu li a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 43px;
  height: 43px;
  font-size: 1.75em;
  color: rgb(247, 195, 119);
  border-radius: 50%;
  transition: 0.5s;
  transform: rotate(calc(360deg / -8 * var(--i)));
}

.menu li:hover{
  background: linear-gradient(rgb(38, 106, 233),rgb(64, 201, 243));
}

.menu li.active a {
  width: 46px;
  height: 46px;
  background-image: linear-gradient(rgb(77, 132, 235),rgb(107, 217, 250));
  color: rgb(255, 124, 48);
}