@font-face {
    font-family: 'Poplar';
    src: url('fonts/luckiest-guy.regular.ttf');
    src: url('fonts/passion.one-bold.ttf');
    font-weight: bold;
    font-style: bold;
	
	}


html, body { margin: 0;	padding: 0;	overflow: hidden; position:fixed; width:100%; height: 100%; }
label { cursor: grab; }
input { display: none;  } 

.GameFrame {
	position: relative;
	width: 100%;
	height: 100%;	
	margin-top: 0%;
	margin-left: 0%;
	text-align: center;	
	}
	
.TheGame {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	/*padding-bottom: 61%;*/
	background-color: #00588A;
	
	/*top: 20%;
	left: 20%;
	width: 60%;
	height: 100%;
	height: 0%;
	padding-bottom: 60%;
	*/
	
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(pics/pSqr.svg);
	background-image: none;
	/*transform: rotate(45deg);  ;P */
	overflow: hidden;
	}

.theDot {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5vmax;
	cursor: grabbing;
	box-sizing: border-box;
	}
	
.theCatch {
	display: block;	
	z-index: 109;
	position: relative;
	width: 0px;
	height: 0px;	
	/*top: -200%; <-- Fail!  */
	left: -100%;
	padding: 100%;
	margin-top: -100%;
	border-radius: 50%;	
	transform: rotate(45deg);	
	background-image: radial-gradient(farthest-corner at 0% 75%, #A20000, #FFC25F);	
	}
	
	
	
/* Themes:START */	
.theCatch {	
	transform: rotate(240deg);
	background-size: 300% 100%;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-image: url(pics/FlyStrip.svg);
	animation: TheFlyAni;
	animation-duration: 0.2s;
	animation-timing-function: steps(4);
	animation-iteration-count: infinite;
	animation-play-state: running;
	}
	
.theCatch:hover  {
	animation: TheFlyAniCaught;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	}
	

#XPause:checked ~ .TheGame > .theDot  { 
	animation: TheFlyAniIdle;
	animation-duration: 3.3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-direction: reverse;
	}
	
	

	
@keyframes TheFlyAniIdle { 
	  0% {  transform: rotate(360deg); top: 50%; left: 49%; }
	 20% {  transform: rotate(288deg); top:47%;  }
	 40% {  transform: rotate(216deg); top:46%;}
	 60% {  transform: rotate(144deg); top:48%;}
     80% {  transform: rotate(72deg); top: 50%;}
	100% {  transform: rotate(0deg); top: 50%; left: 49%; }
	}
	
@keyframes TheFlyAniCaught { 
	  0%   { background-position:   0% 0%; }
	 49.9% { background-position:   0% 0%; }
	 50%   { background-position:  50% 0%; }
	100%   { background-position:  50% 0%; }
	}
	
@keyframes TheFlyAni { 
	  0%   { background-position:   0% 0%; }
	 24.9% { background-position:   0% 0%; }
	 25%   { background-position:  50% 0%; }
	 49.9% { background-position:  50% 0%; }
	 50%   { background-position: 100% 0%; }
	 74.9% { background-position: 100% 0%; }
	 75%   { background-position:  50% 0%; }
	100%   { background-position:  50% 0%; }
	}

/*  Themes:END */	


.theCatch:after {
	content: "";
	display: block;
	z-index: 300;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;	
	border-radius: 50%;
	}

.theCatch:hover::after {
	/*  difficulty PRECISION TOLERANCE default: 50% N/E/W/S*/
	top: -10%;
	left: -10%;
	width: 120%;
	height: 120%;
	top: -25%;
	left: -25%;
	width: 150%;
	height: 150%;
	}
	
.theDot:hover { transition: top 0.4s linear .0s, bottom 0.4s linear .0s, left 0.4s linear .0s, right 0.4s linear .0s; }	


/* difficulty BALL SPEED  * counter speed loss @linear, bi-directional vs. mono-directional */
.dia:hover ~ .theDot { transition: top 1.2s linear .0s, bottom 1.2s linear .0s, left 1.2s linear .0s, right 1.2s linear .0s; }	
.lin:hover ~ .theDot { transition: top 0.9s linear .0s, bottom 0.9s linear .0s, left 0.9s linear .0s, right 0.9s linear .0s; }	

.thoeDoes {
	z-index: 99;
	position: absolute;	
	transition: none;
	box-sizing: border-box;
	}

.dia { width: 50%;	height: 50%; box-sizing: border-box; }
.lin { width: 0px; height: 9px; }

.lin:after {
	content: " ";
	display: inline-block;
	position: absolute;	
	width: 200px;
	height: 200px;
	box-sizing: border-box;		
	}
	
/*  Spears  */
.etR:after,
.wtR:after,
.etL:after,
.wtL:after { width: 342px; height: 690px; }

.ntL:after,
.stL:after,
.ntR:after,
.stR:after { width: 432px; height: 500px; }

.etL:after { bottom:  -31px; left:  1342px; border-bottom: 1px solid lime;   }	
.wtL:after { top:     -30px; right: 1342px; border-top: 1px solid red;    }
.ntL:after { bottom: 1143px; left:  -602px; border-top: 1px solid orange; }	
.stL:after { top:    1143px; right: -603px; border-bottom: 1px solid yellow; }

.etR:after { top:     -30px; left:  1342px; border-top: 1px solid lime;   }	
.wtR:after { bottom:  -31px; right: 1342px; border-bottom: 1px solid red; 	  }
.ntR:after { bottom: 1143px; right: -603px; border-top: 1px solid orange; }	
.stR:after { top:    1143px; left:  -602px; border-bottom: 1px solid yellow; }

	

.etL:after,
.wtL:after { transform: skew(-76.15deg, -56deg) rotate(-34deg); }
.ntL:after,
.stL:after { transform: skew( 56deg,  76.15deg) rotate( 56deg); }

.etR:after,
.wtR:after { transform: skew( 76.15deg,  56deg) rotate( 34deg); }
.ntR:after,
.stR:after { transform: skew(-56deg, -76.15deg) rotate(-56deg); }

.etL { top:    50%; right: 50%; }
.wtL { bottom: 50%; left:  50%; }
.ntL { top:    50%; left:  50%; }
.stL { bottom: 50%; right: 50%; }

.etR { bottom: 50%; right: 50%; }
.wtR { top:    50%; left:  50%; }
.ntR { top:    50%; right: 50%; }
.stR { bottom: 50%; left:  50%; }

.nw  { top:     0%; left:   0%; }
.ne  { top:     0%; right:  0%; }
.se  { bottom:  0%; right:  0%; }
.sw  { bottom:  0%; left:   0%; }


.ntR:hover,	
.stR:hover,
.ntL:hover,	
.stL:hover { height: 45%; }

.etR:hover,
.wtR:hover,
.etL:hover,
.wtL:hover { width: 45%;  }

.nw:hover,	
.ne:hover,
.sw:hover,	
.se:hover {	width: 90%;	height: 90%; }

.ntL:hover ~ .theDot { top:  97%; left: 75%; }
.ntR:hover ~ .theDot { top:  97%; left: 25%; }

.stL:hover ~ .theDot { top:   3%; left: 25%; }
.stR:hover ~ .theDot { top:   3%; left: 75%; }

.etL:hover ~ .theDot { left:  3%; top:  75%; }
.etR:hover ~ .theDot { left:  3%; top:  25%; }

.wtR:hover ~ .theDot { left: 97%; top:  75%; }
.wtL:hover ~ .theDot { left: 97%; top:  25%; }
	
.nw:hover ~ .theDot { top: 97%; left: 97%; }
.ne:hover ~ .theDot { top: 97%; left:  3%; }
.se:hover ~ .theDot { top:  3%; left:  3%; }
.sw:hover ~ .theDot { top:  3%; left: 97%; }

/* escape directions */
.ntL:hover ~ .theDot > .theCatch { transform: rotate(345deg);}
.wtR:hover ~ .theDot > .theCatch { transform: rotate(285deg);}
.wtL:hover ~ .theDot > .theCatch { transform: rotate(255deg);}
.stR:hover ~ .theDot > .theCatch { transform: rotate(195deg);}
.stL:hover ~ .theDot > .theCatch { transform: rotate(165deg);}
.etR:hover ~ .theDot > .theCatch { transform: rotate(105deg);}
.etL:hover ~ .theDot > .theCatch { transform: rotate(75deg);}
.ntR:hover ~ .theDot > .theCatch { transform: rotate(15deg);}

.nw:hover ~ .theDot > .theCatch { transform: rotate(315deg);} 
.sw:hover ~ .theDot > .theCatch { transform: rotate(225deg);} 
.se:hover ~ .theDot > .theCatch { transform: rotate(135deg);} 
.ne:hover ~ .theDot > .theCatch { transform: rotate(45deg);} 

/*
.dia:hover { z-index: 105; transition: width 1.2s linear .0s, height 1.2s linear .0s;}
.lin:hover { z-index: 105; transition: width 0.8s linear .0s, height 0.8s linear .0s;}
*/
.thoeDoes:hover { z-index: 105; transition: width 1.2s linear .0s, height 1.2s linear .0s;}
		
.dia:hover ~ .lin { z-index: 108; }





/* Matrix:START */
.TheMtrX { display: none; position: absolute; width: 50%;	height: 50%; }
.TheMtrX:nth-of-type(1) {top: 0; left: 0; border-right: 1px solid lime; border-bottom: 1px solid lime; }
.TheMtrX:nth-of-type(2) {top: 50%; left: 50%; border-left: 1px solid lime; border-top: 1px solid lime; }

.nw { border-right: 1px solid red; border-bottom: 1px solid red; }
.ne { border-left:  1px solid red; border-bottom: 1px solid red; }
.se { border-left:  1px solid red; border-top:    1px solid red; }
.sw { border-right: 1px solid red; border-top:    1px solid red; }
.lin:after,
.dia { border-color: rgba(0,0,0,0); }

#matrix:checked ~ .TheGame > .TheMtrX { display: block; }
#matrix:checked ~ .TheGame > .lin:after { border-color: lime; }
#matrix:checked ~ .TheGame > .dia:hover { border-color: lime; }
#matrix:checked ~ .TheGame > .theDot > .theCatch:after { border: 1px solid lime; }
/* Matrix:END */



/*  Menu Screens Overlay */
.MainScreen {
	/*display: none;*/
	z-index: 666;
	position: absolute;
	width: 100%;
	
	height: 0%;
	overflow: hidden;
	
	background-color: rgba(0,0,0,0.5);
	text-align:center;
	}
	

	
.MainScreen > div > label {
	font-size: 8vmin;
	}
	
.MainScreen > div > p:nth-of-type(1) { margin-top: 10vmin; }


.MainScreen > div > p {	
	margin: -3vh 0;
	color: #3F8C00;
	color: #0068A2;
	font-family: Poplar;
	font-size: 18vmin;/*184px;*/
	letter-spacing: -0.6vmin;
	}
	
.MainScreen > p {	
	position: absolute;
	display: block;
	margin: -3vh 0;
	top: 35vmin;
	left: 0;
	right: 0;
	color: #A20000;
	text-align: center;
	font-family: Poplar;
	font-size: 26vmin;
	letter-spacing: -0.6vmin;
	}

.btn {
	display: inline-block;
	position: relative;
	margin-top: 5vmin;
	margin-right: 2vmin;
	color: #E07A00;
	font-family: Poplar;
	font-size: 12vmin;
	letter-spacing: -0.4vmin;
	}
	
.btn::after {
	content: '';
	display: none; 
	position: absolute;
	width: 100%;
	height: 10%;
	left: 0;
	bottom: -2%;
	background-color: #E07A00;
}


.btn::after { transform: rotate(2deg); }
.btn:nth-of-type(2n-1)::after { transform: rotate(-1.2deg); }

#matrix:checked ~ #OptionScreen .btn[for="matrix"]::after,
#speed1:checked ~ #OptionScreen .btn[for="speed1"]::after,
#speed2:checked ~ #OptionScreen .btn[for="speed2"]::after,
#speed3:checked ~ #OptionScreen .btn[for="speed3"]::after { display: block; }



	
.CntrlBtn {
	z-index: 999;
	position: absolute;
	display: block;	
	width: 28%;	
	bottom: 15%;
	color: #E07A00;
	font-family: Poplar;
	font-size: 12vmin;
	letter-spacing: -0.5vmin;
	overflow: hidden;
	}

#HomeScreen .CntrlBtn[for="Running"] { left: 4% }
#HomeScreen .CntrlBtn[for="Options"] { left: 36% }
#HomeScreen .CntrlBtn[for="Credits"] { left: 68% }

.CntrlBtn[for="Running"] { left: 22% }
.CntrlBtn[for="Pause"] { right: 22% }

#LoseScreen .CntrlBtn[for="Pause"] { right: 36%; }


.noneBeta > label { cursor: default; opacity: 0.5; }




/* HUD */
.TheHud {}


.ShoutBox {	
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	
	
	}

.ShoutBox > i {
	display: block;
	position: absolute;
	top: 10vmin;

	
	color: #E07A00;
	font-family: Poplar;
	font-style: normal;
	font-size: 12vh;
	text-align: center;	
	line-height: 0.8em;
	opacity: 0;
	transform: rotate(20deg);
	
	animation: ShoutBoxAni;
	animation-duration: 0.7s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-play-state: running;
}

#ShtMiss {		
	right: 10vmin;
	transform: rotate(20deg);	
	}
	
#ShtClose { 
	left: 10vmin;
	transform: rotate(-15deg);
	animation-delay: 0.6s; }

	
@keyframes ShoutBoxAni {	
	  0% { opacity: 0; }
	 30% { opacity: 1; }
	 90% { opacity: 1; }
	100% { opacity: 0; }
	}
	
#Pause:checked   ~ .TheGame > .ShoutBox,
#Gotcha:checked  ~ .TheGame > .ShoutBox { overflow: hidden; height: 0vh;}
.thoeDoes:active ~ .ShoutBox > #ShtMiss,
.theDot:hover    ~ .ShoutBox > #ShtClose { animation: none; }

.Timer {	
	position: absolute;
	left: 0;
	top: 5vmin;
	width: 100%;
	
	}
	


.Timer > i {	
	position: absolute;
	left: 42.3vw;
	top: 0;
	height: 17vh;
	width: 16vw;
	
	opacity: 0;
	overflow: hidden;
	
	color: #56C000;
	font-family: Poplar;
	font-style: normal;
	font-size: 16vh;
	text-align: center;	
	
    animation: ticktockAni;
	animation-duration: 1.1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-play-state: running;
	}
	
.Timer > i {transform: rotate(5deg); }
.Timer > i:nth-child(2n+1) {transform: rotate(-5deg); }

@keyframes ticktockAni { 
	  0% { opacity: 0; }
	  3% { opacity: 0; }
	  4% { opacity: 1; }
	 96% { opacity: 1; }
	 97% { opacity: 0; }
	100% { opacity: 0; }
	}

/*   Timing Base   */
/* 10sec */
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(1),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(2),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(3),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(4),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(5),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(6),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(7),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(8),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(9),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(10),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(11),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(12),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(13),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(14),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(15),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(16),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(17),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(18),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(19),
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(20) { animation: none; }                                                                            
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(21) { animation-delay: 0s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(22) { animation-delay: 1s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(23) { animation-delay: 2s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(24) { animation-delay: 3s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(25) { animation-delay: 4s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(26) { animation-delay: 5s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(27) { animation-delay: 6s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(28) { animation-delay: 7s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(29) { animation-delay: 8s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(30) { animation-delay: 9s; }
#speed1:checked ~ .TheHud .Timer > i:nth-of-type(31) { animation-delay: 10s; }
/* 20sec */
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(1),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(2),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(3),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(4),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(5),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(6),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(7),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(8),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(9),
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(10) { animation: none; } 
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(11) { animation-delay: 0s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(12) { animation-delay: 1s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(13) { animation-delay: 2s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(14) { animation-delay: 3s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(15) { animation-delay: 4s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(16) { animation-delay: 5s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(17) { animation-delay: 6s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(18) { animation-delay: 7s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(19) { animation-delay: 8s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(20) { animation-delay: 9s; }                                                                            
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(21) { animation-delay: 10s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(22) { animation-delay: 11s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(23) { animation-delay: 12s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(24) { animation-delay: 13s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(25) { animation-delay: 14s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(26) { animation-delay: 15s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(27) { animation-delay: 16s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(28) { animation-delay: 17s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(29) { animation-delay: 18s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(30) { animation-delay: 19s; }
#speed2:checked ~ .TheHud .Timer > i:nth-of-type(31) { animation-delay: 20s; }
/* 30sec */	
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(1)  { animation-delay: 0s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(2)  { animation-delay: 1s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(3)  { animation-delay: 2s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(4)  { animation-delay: 3s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(5)  { animation-delay: 4s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(6)  { animation-delay: 5s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(7)  { animation-delay: 6s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(8)  { animation-delay: 7s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(9)  { animation-delay: 8s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(10) { animation-delay: 9s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(11) { animation-delay: 10s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(12) { animation-delay: 11s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(13) { animation-delay: 12s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(14) { animation-delay: 13s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(15) { animation-delay: 14s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(16) { animation-delay: 15s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(17) { animation-delay: 16s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(18) { animation-delay: 17s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(19) { animation-delay: 18s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(20) { animation-delay: 19s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(21) { animation-delay: 20s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(22) { animation-delay: 21s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(23) { animation-delay: 22s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(24) { animation-delay: 23s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(25) { animation-delay: 24s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(26) { animation-delay: 25s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(27) { animation-delay: 26s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(28) { animation-delay: 27s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(29) { animation-delay: 28s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(30) { animation-delay: 29s; }
#speed3:checked ~ .TheHud .Timer > i:nth-of-type(31) { animation-delay: 30s; }
/* 10sec */	
#speed1:checked ~ #Running:checked ~ #LoseScreen { transition: height 0s linear 10.8s; height: 100%; }
#speed1:checked ~ #Running:checked ~ .CntrlBtn   { transition: bottom 0s linear 10.8s; bottom:  15%; }
/* 20sec */	
#speed2:checked ~ #Running:checked ~ #LoseScreen { transition: height 0s linear 20.8s; height: 100%; }
#speed2:checked ~ #Running:checked ~ .CntrlBtn   { transition: bottom 0s linear 20.8s; bottom:  15%; }
/* 30sec */	
#speed3:checked ~ #Running:checked ~ #LoseScreen { transition: height 0s linear 30.8s; height: 100%; }
#speed3:checked ~ #Running:checked ~ .CntrlBtn   { transition: bottom 0s linear 30.8s; bottom:  15%; }

#OptionScreen     { height: 0%; }
#Options:checked ~ #OptionScreen     { height: 100%; }
#Options:checked ~ #HomeScreen,
#Options:checked ~ #WinScreen,
#Options:checked ~ #LoseScreen   { height:   0% !important; transition: none !important; } 
#Options:checked ~ .CntrlBtn     { bottom: -50%; transition: none; } 

#Pause:checked   ~ #HomeScreen,
#Gotcha:checked  ~ #WinScreen  { height: 100%; }

#Pause:checked   ~ .TheHud .Timer > i,
#Gotcha:checked  ~ .TheHud .Timer > i,
.CntrlBtn[for="Running"]:hover:active ~ .TheHud .Timer > i { animation: none !important; }


#Pause:checked   ~ .CntrlBtn,
#Gotcha:checked  ~ .CntrlBtn,
.CntrlBtn[for="Running"]:hover:active,
.CntrlBtn[for="Running"]:hover:active ~ .CntrlBtn   { transition-delay: 0.125s !important; bottom: -50% !important; }
.CntrlBtn[for="Running"]:hover:active ~ #LoseScreen { height:   0% !important; }

/*
.CntrlBtn[for="Running"]:active { bottom: -50% !important; }
*/



/* testing */
/*
#HomeScreen { height: 0% !important;}
*/


/* difficulty settings */
#retard:checked ~ #diffRet { display: block; }




#lemming:checked ~ #diffLem { display: block; }





#neo:checked ~ #diffNeo { display: block; }