*,*:before,*:after{
	box-sizing:border-box;
	margin:0;
	padding:0;
}
:root,html,body{
	background:gray;
	color:white;
	overflow:hidden;
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
} 
.row{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:0;
	/*
	background-image:url(bg4.jpeg);
	background-position:center center;
	background-size:100%;
	*/
}
.city{
	display:block;
	width:100%;
	height:40%;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	/*
	background-image: url("grad.svg");
    background-repeat:no-repeat;
	background-size:cover;
	background-position:bottom;
	*/
}

.cell {
	display:block;
	width:50%;
	height:50%;
	position:absolute;
	top:30%;
	left:50%;
	right:10%;
	bottom:30%;
	text-align: center;
	/* border:1px solid green; */
}
	
.circle{
	display:inline-block;
	width:150px;
	height:150px;
	//background:gray;
	box-shadow:0px -1px 60px 5px rgb(26,117,206);
	border-radius:50%;
	/*
	background-image: url(moon.png);
	background-position:center center;
	background-repeat: no-repeat;
	*/
}




/* Rotiramo element u kojem se nalazi mjesec! */

.rotate-in-up-left  {
animation:rotate-in-up-left 40s infinite;
}
@keyframes rotate-in-up-left{
	0%{
		transform-origin:left bottom ;
		transform:rotate(60deg);
	}
	100%{
		transform-origin: left bottom;
		transform: rotate(-180deg);
	}
}


/* Mjenjamo boju mjesecu! */

.boja-mjeseca{
animation:change-boja-mjeseca 40s infinite;
}
@keyframes change-boja-mjeseca{
	0%{
		background:#414141;
	}
	50%{
		background:gray;
	}
	65%{
	background:red;
	}
}

#gamearea {
    border:0;
    left: 1%;
	top:1%;
	bottom:1%;
	right:1%;
	display:block;
	position:absolute;
	overflow:hidden;		z-index:99;
}

#player {
    left: 10%;
	bottom:10%;
	width:45px;
	height:45px;
	display:block;
	position:absolute;
}

.enemy {
	width:45px;
	height:45px;
	display:block;
	position:absolute;
	background-position:center center;
	background-size: 100%;
	background-repeat: no-repeat;
	rotate: 180deg;
	border:none;
	background-color:transparent;
	left:-50px;
	bottom:-50px;
}

.enemy1 {
	background-image:url(enemy1.png);	
}

.enemy2 {
	background-image:url(enemy2.png);
	
}

.enemy3 {
	background-image:url(enemy3.png);	
	
}

.explosion {
	background-image:url(boom-explosion.gif);	
}

.missile {
	width:15px;
	height:17px;
	display:block;
	position:absolute;
	background-position:center center;
	background-size: 100%;
	background-repeat: no-repeat;
	background-color:transparent;	
	background-image:url(shot.gif);	
	left:-50px;
	bottom:-50px;	
}

#gameover {
	display:none;
	font-size:4rem;
	color:red;
	position:absolute;
	top:40%;
	left:38%;
	width:30%;
	height:50;	z-index:100;
}

#gameover .restart { 
	display: block;
    position: relative;
    margin: 0 23%;
    padding: 10px;
	background-color:#40405b;
	color:white;
	border-radius: 10px;
}

#gameover .restart:hover {
	background-color:green;
	color:white;
	cursor: pointer;	
	
}

#gamepause {
	display:none;
    font-size: 4rem;
    color: red;
    position: absolute;
    top: 40%;
    left: 25%;
    width: 50%;
    height: auto;
    z-index: 100;
    text-align: center;
}

#scorebar { 
	position:absolute; 
	left:0; 
	top:0; 
	width:30%; 
	height:4rem; 
	z-index:199; 
	padding:0.5rem;
	border:0;
	font-size:1.5rem;
 }
#scorebar .result { 

	display: flex;
    width: 80%;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}

#scorebar .result span { font-weight:600; }

#scorebar .playerbar {	
	display: flex; 
	width: 50%;	
	background-color:gray;	
	height:25px;		
	margin: 8px;	
}

#scorebar .playerbar #playerenergy {
	display: flex;
	width: 100%;	
	background-color:green;		
	height:25px;		
	margin: 0;		
}

#help {
 position: absolute;
 width: 64px;
 height: 64px;
 display:block;
 z-index:5888;
 top:10px;
 right:10px;
  
}

#helpcontent {
	
	position:relative;
    width: 48%;
    height: auto;
    display: block;
    z-index: 5889;
    text-align: center;
    padding: 20px;
    background-color: #021a91;
	float:right;
}

#postavke {

    position: absolute;
    width: 60%;
    height: auto;
    display: none;
    z-index: 5888;
    top: 20%;
    right: 20%;
    left: 20%;
    text-align: center;
    border: 8px solid #673AB7;
    padding: 20px;
    background-color: #021a91;
    border-radius: 20px;
}

#postavke #configform {
	display: block;
	width:49%;
	float:left;
	clear:none;
	
}