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

body{
	display:flex;
	width:100%;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	//background: linear-gradient(45deg,#8460ed,#ff1252);
}

.menu{
	position:relative;
	width:200px;
	height:200px;
	//background:#0f0;
	display:flex;
	justify-content: center;
	align-items:center;
}


.menu li{
	position:absolute;
	left: -45px;
	list-style:none;
	transform-origin: 150px;
	transition: 3.75s;
	transition-delay: calc(0.1s * var(--i));
	transform:rotate(0deg) translateX(100px);
}

.menu li a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:70px;
	height:70px;
	background:#FFFFFF;
	border-radius:50%;
	transform:rotate(calc(360deg / -8 * var(--i)));
	box-shadow: 0 3px 4px rgba(0,0,0,0.15);
	color: #111;
	transition: 0.5s;
}

.menu li a:hover{
	color:#ff1252;
}

.menu.active li{
	transform: rotate(calc(360deg / 8 * var(--i)));
}

.toggle{
	position:absolute;
	width:60px;
	height: 60px;
	background:#fff;
	display:flex;
	justify-content: center;
	align-items: center;
	z-index: 10000;
	border-radius: 50%;
	cursor:pointer;
	box-shadow: 0 3px 4px rgba(0,0,0,0.15);
	font-size: 2em;
	transition: transform 1.25s;
}

.menu.active .toggle{
	transform: rotate(315deg);
}