body {background:#111166;margin:0;overflow:hidden}
div {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	opacity: 0.75;
	transition: all 10s;
	position: absolute;
	transform: translate3d(20px, 50px, 10px);
}
.yellow {
	background: radial-gradient(at 50% 50%, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 50%, rgba(0, 0, 0, 0) 70%);
}
.yellow.sharper {
	background: radial-gradient(at 50% 50%, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 60%, rgba(0, 0, 0, 0) 70%);
}
.yellow.sharpest {
	background: radial-gradient(at 50% 50%, rgb(255, 255, 0) 0%, rgb(255, 255, 0) 65%, rgba(0, 0, 0, 0) 70%);
}
.green {
	background: radial-gradient(at 50% 50%, rgb(75, 255, 0) 0%, rgb(75, 255, 0) 50%, rgba(0, 0, 0, 0) 70%);
}
.green.sharper {
	background: radial-gradient(at 50% 50%, rgb(75, 255, 0) 0%, rgb(75, 255, 0) 60%, rgba(0, 0, 0, 0) 70%);
}
.green.sharpest {
	background: radial-gradient(at 50% 50%, rgb(75, 255, 0) 0%, rgb(75, 255, 0) 65%, rgba(0, 0, 0, 0) 70%);
}
.purple {
	background: radial-gradient(at 50% 50%, rgb(255, 0, 235) 0%, rgb(255, 0, 235) 50%, rgba(0, 0, 0, 0) 70%);
}
.purple.sharper {
	background: radial-gradient(at 50% 50%, rgb(255, 0, 235) 0%, rgb(255, 0, 235) 60%, rgba(0, 0, 0, 0) 70%);
}
.purple.sharpest {
	background: radial-gradient(at 50% 50%, rgb(255, 0, 235) 0%, rgb(255, 0, 235) 65%, rgba(0, 0, 0, 0) 70%);
}
.blue {
	background: radial-gradient(at 50% 50%, rgb(0, 220, 255) 0%, rgb(0, 220, 255) 50%, rgba(0, 0, 0, 0) 70%);
}
.blue.sharper {
	background: radial-gradient(at 50% 50%, rgb(0, 220, 255) 0%, rgb(0, 220, 255) 60%, rgba(0, 0, 0, 0) 70%);
}
.blue.sharpest {
	background: radial-gradient(at 50% 50%, rgb(0, 220, 255) 0%, rgb(0, 220, 255) 65%, rgba(0, 0, 0, 0) 70%);
}
.red {
	background: radial-gradient(at 50% 50%, rgb(185, 0, 0) 0%, rgb(185, 0, 0) 50%, rgba(0, 0, 0, 0) 70%);
}
.red.sharper {
	background: radial-gradient(at 50% 50%, rgb(185, 0, 0) 0%, rgb(185, 0, 0) 60%, rgba(0, 0, 0, 0) 70%);
}
.red.sharpest {
	background: radial-gradient(at 50% 50%, rgb(185, 0, 0) 0%, rgb(185, 0, 0) 65%, rgba(0, 0, 0, 0) 70%);
}
.size75 {width: 75px; height: 75px;}
.size100 {width: 100px; height: 100px;}
.size125 {width: 125px; height: 125px;}
.size150 {width: 150px; height: 150px;}
.size300 {width: 300px; height: 300px;}
.size75.grow  {width: calc(1.1 * 75px); height: calc(1.1 * 75px);}
.size100.grow {width: calc(1.1 * 100px); height: calc(1.1 * 100px);}
.size125.grow {width: calc(1.1 * 125px); height: calc(1.1 * 125px);}
.size150.grow {width: calc(1.1 * 150px); height: calc(1.1 * 150px);}
.size300.grow {width: calc(1.1 * 300px); height: calc(1.1 * 300px);}