html, body { margin: 0;	padding: 0;	 }
label { cursor: pointer; }
/*input { display: none; }*/	
	
.GameFrame {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;	
	top: 0;
	left: 0;	
	background-color: rgba(   0,   65,   135, 0.6);
	
	overflow: hidden;
	}
	
.SpinCon {
	display: block;
	position: absolute;	
	width: 10vmin;
	height: 10vmin;	
	top: 50%;
	left: 50%;	
	box-sizing: border-box;	
	border: 1px solid blue;	
	animation-delay: 0s;
	}
	
.SpinFire {
	display: block;
	position: absolute;	
	box-sizing: border-box;	
	border: 1px solid red;
	text-align: center;		
	animation-direction: reverse;
	}
	
.SpinCon,
.SpinFire {
	animation-name: SpinFireAni01;		
	animation-duration: 7s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;	
	}

.SpinFire:hover  { animation-name: SpinFireAni01RST; }	
.SpinFire > .Enemy { animation-name: EnemyPathAni01; }
.SpinFire:hover > .Enemy { animation-name: EnemyPathAni01RST; }
	
.Entity {
	display: block;
	position: relative;
	box-sizing: border-box;	
	border: 1px solid green;
	border-radius: 30%;	
	width: 0vmax;
	}
	
.Friendly { display: none; }

.Enemy:after {
	content: "";
	position: relative;
	display: block;	
	height: 50%;
	padding: 50%;
	border-radius: 50%;
	}	
	
.Enemy {
	animation-duration: 7s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	}	
	
/* */
.SpinCon:nth-of-type(1) { animation-delay: 0s; }
.SpinCon:nth-of-type(2) { animation-delay: 3s; }
.SpinCon:nth-of-type(3) { animation-delay: 6s; }

/**/
/*
.SpinCon:nth-of-type(2) { animation-direction: reverse; }
.SpinCon:nth-of-type(2) > .SpinFire { animation-direction: normal; }	
*/
.SpinCon > .SpinFire:nth-of-type(1) { transform: rotate(  0deg); }
.SpinCon > .SpinFire:nth-of-type(2) { transform: rotate( 90deg); }
.SpinCon > .SpinFire:nth-of-type(3) { transform: rotate(180deg); }
.SpinCon > .SpinFire:nth-of-type(4) { transform: rotate(270deg); }		
/*
.SpinCon > .SpinFire:nth-of-type(1),
.SpinCon > .SpinFire:nth-of-type(1) > .Enemy { animation-delay: 0s; }
.SpinCon > .SpinFire:nth-of-type(2),
.SpinCon > .SpinFire:nth-of-type(2) > .Enemy { animation-delay: 1s; }
.SpinCon > .SpinFire:nth-of-type(3),
.SpinCon > .SpinFire:nth-of-type(3) > .Enemy { animation-delay: 2s; }
.SpinCon > .SpinFire:nth-of-type(4),
.SpinCon > .SpinFire:nth-of-type(4) > .Enemy { animation-delay: 3s; }
*/

.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(1),
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(1) > .Enemy { animation-delay: 1.5s; }
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(2),           
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(2) > .Enemy { animation-delay: 3s; }
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(3),           
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(3) > .Enemy { animation-delay: 4.5s; }
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(4),           
.SpinCon:nth-of-type(1) > .SpinFire:nth-of-type(4) > .Enemy { animation-delay: 6s; }

.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(1),
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(1) > .Enemy { animation-delay: 9s; }
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(2),
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(2) > .Enemy { animation-delay: 6s; }
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(3),
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(3) > .Enemy { animation-delay: 3s; }
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(4),
.SpinCon:nth-of-type(2) > .SpinFire:nth-of-type(4) > .Enemy { animation-delay: 12s; }	


.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(1),
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(1) > .Enemy { animation-delay: 6s; }
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(2),
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(2) > .Enemy { animation-delay: 9s; }
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(3),
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(3) > .Enemy { animation-delay: 12s; }
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(4),
.SpinCon:nth-of-type(3) > .SpinFire:nth-of-type(4) > .Enemy { animation-delay: 15s; }	




.SpinFire:nth-of-type(1) > .Enemy:after { background-color: rgba( 120,   0,   0, 0.9); }	
.SpinFire:nth-of-type(2) > .Enemy:after { background-color: rgba(   0, 120,   0, 0.9); }	
.SpinFire:nth-of-type(3) > .Enemy:after { background-color: rgba(   0,   0, 120, 0.9); }	
.SpinFire:nth-of-type(4) > .Enemy:after { background-color: rgba(  80,  20,  60, 0.9); }	

/*  TESTING  */ /*
.SpinFire { width: 50%; height: 50%; }
*/
.SpinCon, .SpinFire { width: 0; height: 0; }
.Enemy, .SpinCon, .SpinFire { position:absolute;  border: none;}

.SpinCon > .SpinFire:nth-of-type(1) { top:  0%; left:  0%; transform: rotate(  0deg); }
.SpinCon > .SpinFire:nth-of-type(2) { top: 50%; left:  0%; transform: rotate( 90deg); }
.SpinCon > .SpinFire:nth-of-type(3) { top:  0%; left: 50%; transform: rotate(180deg); }
.SpinCon > .SpinFire:nth-of-type(4) { top: 50%; left: 50%; transform: rotate(270deg); }	



@keyframes EnemyPathAni01 { 
	  0%   { top:    0vmax; width:  0vmax; }
	100%   { top: -100vmax; width: 16vmax; }
	}
	
@keyframes EnemyPathAni01RST { 
	  0%   { top:    0vmax; width:  0vmax; }
	100%   { top: -100vmax; width: 16vmax; }
	}

@keyframes SpinFireAni01 { 
	  0%   { transform: rotate(  0deg); }
	100%   { transform: rotate(360deg); }
	}			
	
@keyframes SpinFireAni01RST { 
	  0%   { transform: rotate(  0deg); }
	100%   { transform: rotate(360deg); }
	}