.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.circle{
    position: absolute;
    width: 30px;
    height: 30px;
	background: transparent;
    border-radius: 50%;
	box-shadow: 
		30px 30px 0px #1abc9c,
		30px -30px 0px #2ecc71,
		-30px 30px 0px #9b59b6,
		-30px -30px 0px #e67e22,
		0px 42px 0px #f1c40f,
		0px -42px 0px #2c3e50,
		42px 0px 0px #66ccff,
		-42px 0px 0px #e74c3c;
	animation: animate 3s infinite;
}
@keyframes animate{
	0%{
		box-shadow: 
			3px 3px 3px #1abc9c,
		 	3px -3px 0px #2ecc71,
		 	-3px 3px 0px #9b59b6,
		 	-3px -3px 0px #e67e22,
		 	0px 4px 0px #f1c40f,
		 	0px -4px 0px #2c3e50,
		 	4px 0px 0px #66ccff,
		 	-4px 0px 0px #e74c3c;
		transform: rotate(0deg)
	}
	50%{
		box-shadow: 
			30px 30px 0px #1abc9c,
			30px -30px 0px #2ecc71,
			-30px 30px 0px #9b59b6,
			-30px -30px 0px #e67e22,
			0px 42px 0px #f1c40f,
			0px -42px 0px #2c3e50,
			42px 0px 0px #66ccff,
			-42px 0px 0px #e74c3c;
		transform: rotate(360deg)
	}
	100%{
		box-shadow: 
			3px 3px 3px #1abc9c,
		 	3px -3px 0px #2ecc71,
		 	-3px 3px 0px #9b59b6,
		 	-3px -3px 0px #e67e22,
		 	0px 4px 0px #f1c40f,
		 	0px -4px 0px #2c3e50,
		 	4px 0px 0px #66ccff,
		 	-4px 0px 0px #e74c3c;
		transform: rotate(720deg)
	}
}