@font-face
{
font-family: 'Comica BD';
src: url('Comica BD.ttf');
}
@font-face
{
font-family: 'Dafunk_FREE';
src: url('Dafunk_FREE.otf');
}
*{margin:0;padding:0;}
html, body{
	height: 100%;
}
body{
	overflow:hidden;
	background:#6ca;
	background:-webkit-linear-gradient(tan,#7dc);
	background:-moz-radial-gradient(#999,#ccc);
	background:-o-radial-gradient(tan,#7dc);
	background:-ms-radial-gradient(tan,#7dc);
	font-family: 'Dafunk_FREE';
	width:100%;
	cursor:url('bug.gif'),auto;
}
.d-none{
	display:none !important;
}
.game-arena{
	cursor:url(sword.png),auto;
	height: 100%;
	display: flex;
}
.entrance{
	width: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
h1{
	margin-top: 5%;
}
button{
	font-family: 'Dafunk_FREE';
	margin:3%;
	color:brown;
	background:#ac6;
	background:-webkit-linear-gradient(silver,grey);
	background:-moz-linear-gradient(#cc2,#ffe);
	border-radius:60px 1%;
	width:60%;
	font-size: 1.3rem;
	padding: 1% 5%;
	box-shadow:5px 5px 10px #a33;
	cursor:url(weRock.png),pointer;
	letter-spacing:5px;
}

.moreGames {
	display: contents;
}
.moreGames button {
	cursor: url(moreGames.png), pointer;
}
.entrance button:hover, .help-page button:hover{
	background:#89a;
	background:-webkit-linear-gradient(grey,silver);
	background:-moz-linear-gradient(#ffe,#cc2);
	color:gold;
	box-shadow:0px 0px 25px white;
	text-shadow:0px 0px 10px blue;
}
.play-btn {cursor: url(play.png), pointer;}
.help-btn{ cursor:url(help.png), pointer;}
.full-screen-btn {cursor: url(fullscreen.png), pointer;}
.result{
	background:-webkit-radial-gradient(#ccc,#666);
	background:-moz-radial-gradient(#666,#ccc);
	background:-o-radial-gradient(#ccc,#666);
	background:-ms-radial-gradient(#ccc,#666);
	color:blue;
	margin: 0 auto;
	padding: 5%;
	text-align: center;
	width: 100%;
	height: 100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
.game-arena .game-box{
	position: absolute;
	z-index: 1;
	width:50px;
	height:50px;
	top:48%;
	left:3%;
	background:black;
	cursor:url(gameBox.png),pointer;
	box-shadow: -10px -10px 25px black; 
}
.game-arena .bars .bar{
	width: 1%;
    background: #222;
    height: 100%;
    position: relative;
    margin: 0 20%;
}

.bar.top-bar,
.bar.bottom-bar{
	width: 100%;
    height: 1%;
    background: #222;
    position: absolute;
	outline : 5px dotted red;
}
.bar.bottom-bar{
	bottom: 0;
}

.game-arena[data-level="1"] .bars .bar:nth-child(odd),
.game-arena[data-level="2"] .bars .bar:nth-child(odd),
.game-arena[data-level="5"] .bars .bar:nth-child(odd) {
	display: none;
}
.game-arena[data-level="1"] .bars .bar:nth-child(2),
.game-arena[data-level="2"] .bars .bar:nth-child(2),
.game-arena[data-level="4"] .bars .bar:nth-child(odd) {
	top: -100px;
}
.game-arena[data-level="1"] .bars .bar:nth-child(4),
.game-arena[data-level="2"] .bars .bar:nth-child(4),
.game-arena[data-level="4"] .bars .bar:nth-child(even) {
	top: 100px;
}
.game-arena[data-level="3"] .bars .bar,
.game-arena[data-level="4"] .bars .bar {
	margin: 0 11%;
}
.game-arena[data-level="3"] .bars .bar:nth-child(odd) {
	display: block;
}

.game-arena[data-level="2"] .bars .bar:nth-child(2),
.game-arena[data-level="3"] .bars .bar:nth-child(odd){
	animation: odd-bars 1s infinite;
}

.game-arena[data-level="2"] .bars .bar:nth-child(4),
.game-arena[data-level="3"] .bars .bar:nth-child(even){
	animation: even-bars 1s infinite;
}

.game-arena[data-level="4"] .bars .bar:nth-child(odd){
	animation: odd-bars-animate-4 3s infinite;
}
.game-arena[data-level="4"] .bars .bar:nth-child(even){
	animation: even-bars-animate-4 3s infinite;
}

.game-arena[data-level="5"] .bars .bar:nth-child(2){
	height: 90%;
	animation: bars-animate-5 3s infinite alternate-reverse ease-in-out;
} 
.game-arena[data-level="5"] .bars .bar:nth-child(4){
	height: 90%;
	animation: bars-animate-5 3s infinite alternate ease-in-out;
	animation-delay: 1s;
}

@keyframes odd-bars-animate-4 {
	0%{ left: 0; }
	50%{ left: 10%; }
	100%{ left: 0; }
}

@keyframes even-bars-animate-4 {
	0%{ left: 0; }
	50%{ left: -10%; }
	100%{ left: 0; }
}

@keyframes bars-animate-5 {
	0%{ left: 0; top: -10%; }
	25% { left: 10%; }
	50%{ top: 20%; left: 25%; }
	75%{ left : 10%; }
	100%{ top : -10%; left: 0; }
}

@keyframes even-bars {
	0% { top: 120px; }
	50%{ top: 0px; }
	100%{ top: 120px; }
}

@keyframes odd-bars {
	0% { top: -120px; }
	50%{ top: 0px; }
	100%{ top: -120px; }
}

.game-arena .bars{
	display: flex;
    margin-left: 15%;
    width: 100%;
    height: 100%;
}

.game-arena .game-cover{
	background: #000;
    width: 0;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2;
}
h1.remove-finger{
    text-align: center;
}

.help-page{		
	font-size: 1.8rem;
	font-weight: bold;
	margin:0 auto;
	padding:5%;
	line-height: 1.5em;
	width:50%;
	text-shadow: 0px 0px 10px #678;
	font-family: 'Comica BD';
}
.help-page button{
	display:inline;
	margin:2% 6%;
	width:30%;
}
.lives, .level, .game-menu-btn{
	position: absolute;
	left:2%;				
	font-size: 1rem;
	color:maroon;
	top:2%;
}
.level {
	top: 6%;
	color: blue;
}
.game-menu-btn{
	top: 10%;
    width: 10%;
    margin: 0;
    padding: 0;
}
.result button{
	color:blue;
	background:yellow;
	margin:5% auto;
	width: 25%;
	display: block;
	cursor:url(laserPen.gif),pointer;
}
.disable-dbl-tap-zoom {
    touch-action: manipulation;
}
/*-----media queries-----*/

@media (orientation: portrait) {
	.entrance{
		width: 100%;
	}
	button {
		width: 90%;
	}
	.game-arena .game-box{
		outline: 10px dotted;
	}
	.help-page{
		width: 90%;
		height: 100%;
		font-size: 1.6rem;
	}
	.help-page button {
		display: flex;
		margin: 5% auto;
		width: 100%;
		justify-content: center;
	}
	.result button{
		width: 100%;
	}
	.game-arena[data-level="3"] .bars .bar:last-child{
		display: none;
	}
	.game-arena[data-level="3"] .bars .bar,
	.game-arena[data-level="4"] .bars .bar{
		margin: 0 14%;
	}
	.game-arena[data-level="4"] .bars .bar:nth-child(4){
		display: none;
	}
	.game-arena[data-level="4"] .bars .bar:nth-child(odd){
		animation: odd-bars-animate-4 2s infinite;
		top: -100px;
	}
	.game-arena[data-level="4"] .bars .bar:nth-child(even){
		animation: even-bars-animate-4 2s infinite;
	}
	@keyframes even-bars-animate-4 {
		0%{ left: 0; }
		25%{ left: -10%}
		50%{ left: 0; }
		75%{ left: 10%;}
		100%{ left: 0; }
	}
	
	.game-menu-btn {
		width: 25%;
		padding: 1%;
	}
	h1.remove-finger{
		color: white;
	}
}
@media (orientation: landscape) and (max-height: 480px) {
	.game-arena .game-box{
		outline: 10px dotted;
	}
	h1 {
		margin-top: 2%;
	}
	.help-page{		
		width: 85%;
		font-size: 1.5rem;
	}
	.entrance{
		width: 80%;
	}
	button {
		width: 75%;
		margin: 1.5%;
		font-size: 1rem;
	}
	button:hover {
		font-size: 1.3rem;
	}
	.level {
		top: 8%;
	}
	.game-menu-btn {
		top: 15%;
		width: 15%;
		padding: 0%;
	}
	h1.remove-finger{
		color: white;
	}

	.game-arena[data-level="4"] .bars .bar:nth-child(odd){
		animation: odd-bars-animate-4 1.5s infinite;
	}
	.game-arena[data-level="4"] .bars .bar:nth-child(even){
		animation: even-bars-animate-4 1.5s infinite;
	}
}