.stars {
	position:absolute;
	color:#0ef;
	width:100%;
	background-color:black;
	height:100%;
	overflow:hidden;
	transform-style:preserve-3d;
	perspective:1000px;
}
.stars:hover .hoop,.stars:hover .hoop:nth-of-type(2),.stars:hover .hoop:nth-of-type(3),.stars:hover .hoop:nth-of-type(4) {
	animation-play-state:paused;
}
.stars:hover .hoop .star,.stars:hover .hoop .center,.stars:hover .hoop:nth-of-type(2) .star,.stars:hover .hoop:nth-of-type(2) .center,.stars:hover .hoop:nth-of-type(3) .star,.stars:hover .hoop:nth-of-type(3) .center,.stars:hover .hoop:nth-of-type(4) .star,.stars:hover .hoop:nth-of-type(4) .center {
	animation-play-state:paused;
}
.stars .center,.stars .star,.stars .earth-star {
	display:block;
	width:40px;
	height:40px;
	background-color:#0ef;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-20px;
	margin-left:-20px;
	border-radius:50%;
	box-shadow:0px 0px 2px #00DDFF,0px 0px 4px #00CCFF,0px 0px 6px #00BBFF,0px 0px 12px rgba(255,255,255,0.1),0px 0 10px rgba(255,255,255,0.1),0px 0px 6px rgba(255,255,255,0.1),0px 0px 10px rgba(255,255,255,0.1),0px 0px 40px rgba(255,255,255,0.15);
}
.stars .hoop {
	position:absolute;
	width:100px;
	height:100px;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
	border:dashed 1px #099;
	border-radius:50%;
	box-sizing:border-box;
	transform-style:preserve-3d;
	backface-visibility:hidden;
	perspective:1000px;
	animation:loop1 7s linear infinite;
}
.stars .hoop .star {
	width:20px;
	height:20px;
	top:10px;
	left:60px;
	animation:star1 7s linear infinite;
}
.stars .hoop .center {
	animation:center 7s linear infinite;
}
.stars .hoop:nth-of-type(2) {
	width:200px;
	height:200px;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-100px;
	animation:loop1 8s linear infinite;
}
.stars .hoop:nth-of-type(2) .star {
	width:18px;
	height:18px;
	top:11px;
	left:109px;
	animation:star1 8s linear infinite;
}
.stars .hoop:nth-of-type(3) {
	width:300px;
	height:300px;
	top:50%;
	left:50%;
	margin-top:-150px;
	margin-left:-150px;
	animation:loop1 9s linear infinite;
}
.stars .hoop:nth-of-type(3) .star {
	width:10px;
	height:10px;
	top:15px;
	left:155px;
	animation:star1 9s linear infinite;
}
.stars .hoop:nth-of-type(4) {
	width:400px;
	height:400px;
	top:50%;
	left:50%;
	margin-top:-200px;
	margin-left:-200px;
	animation:loop1 10s linear infinite;
}
.stars .hoop:nth-of-type(4) .star {
	width:10px;
	height:10px;
	top:15px;
	left:205px;
	animation:star1 10s linear infinite;
}
.stars .hoop:nth-of-type(5) {
	width:480px;
	height:480px;
	margin-top:-240px;
	margin-left:-240px;
	border:dotted 3px #099;
	animation:loop1 10s linear infinite;
}
.stars .hoop:nth-of-type(6) {
	width:470px;
	height:470px;
	margin-top:-235px;
	margin-left:-235px;
	border:dotted 3px #099;
	animation:loop1 10s linear infinite;
}
.stars .hoop:nth-of-type(7) {
	width:460px;
	height:460px;
	margin-top:-230px;
	margin-left:-230px;
	border:dotted 3px #099;
	animation:loop1 10s linear infinite;
}
.stars .hoop:nth-of-type(8) {
	width:450px;
	height:450px;
	margin-top:-225px;
	margin-left:-225px;
	border:dotted 3px #099;
	animation:loop1 10s linear infinite;
}
.stars .earth {
	position:absolute;
	width:40px;
	height:40px;
	top:-15px;
	left:-15px;
	border:dashed 1px #099;
	border-radius:50%;
	box-sizing:border-box;
	transform-style:preserve-3d;
	perspective:1000px;
	animation:loop2 6s linear infinite;
}
.stars .earth .earth-star {
	width:6px;
	height:6px;
	top:20px;
	left:25px;
	animation:star2 6s linear infinite;
}
@keyframes loop1 {
	0% {
	transform:rotateX(60deg) rotateY(30deg) rotateZ(0deg);
}
100% {
	transform:rotateX(60deg) rotateY(30deg) rotateZ(360deg);
}
}@keyframes star1 {
	0% {
	transform:rotateZ(360deg) rotateY(-30deg) rotateX(-60deg);
}
100% {
	transform:rotateZ(0deg) rotateY(-30deg) rotateX(-60deg);
}
}@keyframes center {
	0% {
	transform:rotateZ(360deg) rotateY(0deg) rotateX(120deg);
}
100% {
	transform:rotateZ(0deg) rotateY(0deg) rotateX(120deg);
}
}@keyframes loop2 {
	0% {
	transform:rotateX(-30deg) rotateY(30deg) rotateZ(0deg);
}
100% {
	transform:rotateX(-30deg) rotateY(30deg) rotateZ(360deg);
}
}@keyframes star2 {
	0% {
	transform:rotateZ(360deg) rotateY(-30deg) rotateX(30deg);
}
100% {
	transform:rotateZ(0deg) rotateY(-30deg) rotateX(30deg);
}
}