@import url(http://fonts.googlefonts.net/css?family=Poiret+One);
div.container {
	height:200%;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#006666; 
	font-size:62.5%;
	font-family:'Poiret One',cursive;
}
div.main {
	width:200px;
	height:200px;
	border-radius:50%;
	border:2px solid #003333;
	font-size:10em;
	line-height:2em;
	text-align:center;
	position:relative;
	z-index:999;
}
div.main:before {
	content:" ";
	display:block;
	position:absolute;
	width:200px;
	height:200px;
	border-radius:50%;
	border-top:5px solid #ffffff;
	animation:rotate 1s linear infinite;
	top:-2;
}
div.main:after {
	content:" ";
	display:block;
	position:absolute;
	width:190px;
	height:190px;
	border-radius:50%;
	left:5;
	top:5;
	z-index:-1;
	animation:background 2s linear infinite;
}
@keyframes rotate {
	100% {
	transform:rotate(360deg);
}
}@keyframes background {
	0% {
	background:linear-gradient(to top,#3366FF 50%,transparent 50%);
}
20% {
	background:linear-gradient(to top,#3366FF 60%,transparent 40%);
}
40% {
	background:linear-gradient(to top,#3366FF 70%,transparent 30%);
}
60% {
	background:linear-gradient(to top,#3366FF 80%,transparent 20%);
}
80% {
	background:linear-gradient(to top,#3366FF 90%,transparent 10%);
}
100% {
	background:linear-gradient(to top,#3366FF 100%,transparent 0%);
}
}canvas {
	position:absolute;
	top:-80%;
	left:-20%;
}