@font-face{
  font-family: Samim;
  src: url(theme/fonts/Samim.woff);
}
@font-face{
  font-family: Samim;
  font-weight: bold;
  src: url(theme/fonts/Samim-Bold.woff);
}
body{
	font-family: Courier New;
	font-size: 12px;
	font-weight: bold;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	                      supported by Chrome and Opera */
  background-image: url(images/bg.svg);;
  background-size: cover;
}
main{
  width: 370px;
  height: 500px;
  /*border: 1px solid black;*/
  left: 50%;
  margin-left: -185px;
  position: fixed;
  background-image: url(images/bg.svg);
  background-size: 5260px auto;
  background-position: -1000px 0px;
  /*animation: bgLoop 30s forwards infinite linear;*/
  overflow: hidden;
  box-shadow: 2px 2px 2px gray;
  background-color: white;
}
@keyframes bgLoop{
	to{
		background-position: 1000px 2900px;
	}
}
#jet{
  width: 30px;
  height: 45px;
  position: absolute;
  left: 50%;
  bottom: 10px;
  background-image: url(images/airplane.png);
  background-size: cover;
  z-index: 51;
  /*filter: drop-shadow(5px 5px 2px silver);*/
  /*border: 1px solid black;*/
}
.enemy{
  position: absolute;
  width: 25px;
  height: 40px;
  /*border: 1px solid black;*/
  left: 50%;
  background-image: url(images/enemy.svg);
  background-size: cover;
  background-position: center center;
  z-index: 5;
  top: -20%;
  animation: enemyPlay linear forwards;
}
.bullet{
	width: 2px;
	height: 5px;
	background-color: black;
	position: absolute;
	bottom: 30px;
	animation: bulletPlay 2s forwards;
  z-index: 50;
}
@keyframes bulletPlay{
	from{

	}
	to{
		bottom: 150%;
	}
}
.bullet_enemy{
	width: 2px;
	height: 4px;
	background-color: red;
	position: absolute;
	animation: bulletPlayEnemy 2s forwards;
	z-index: 4;
}
@keyframes bulletPlayEnemy{
	to{
		top: 120%;
	}
}
@keyframes enemyPlay{
	to{
		top: 120%;
	}
}
#gameover{
	position: absolute;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	z-index: 103;
	top: 0px;
	left: 0px;
}
#gameover_text{
	/*border: 1px solid black;*/
	width: 250px;
	height: 50px;
	position: absolute;
	top: 25%;
	left: 50%;
	font-size: 40px;
	margin-left: -125px;
	text-align: center;
	color: white;
	z-index: 99999;
}
.shake_vertical {
  animation: shake_vertical 100ms ease-in-out infinite;
}

@keyframes shake_vertical {
  2% {
    transform: translate(0, 6px) rotate(0);
  }
  4% {
    transform: translate(0, -1px) rotate(0);
  }
  6% {
    transform: translate(0, -7px) rotate(0);
  }
  8% {
    transform: translate(0, -1px) rotate(0);
  }
  10% {
    transform: translate(0, 9px) rotate(0);
  }
  12% {
    transform: translate(0, 1px) rotate(0);
  }
  14% {
    transform: translate(0, 3px) rotate(0);
  }
  16% {
    transform: translate(0, 6px) rotate(0);
  }
  18% {
    transform: translate(0, 0px) rotate(0);
  }
  20% {
    transform: translate(0, 2px) rotate(0);
  }
  22% {
    transform: translate(0, 1px) rotate(0);
  }
  24% {
    transform: translate(0, 3px) rotate(0);
  }
  26% {
    transform: translate(0, 4px) rotate(0);
  }
  28% {
    transform: translate(0, 0px) rotate(0);
  }
  30% {
    transform: translate(0, -8px) rotate(0);
  }
  32% {
    transform: translate(0, 6px) rotate(0);
  }
  34% {
    transform: translate(0, 6px) rotate(0);
  }
  36% {
    transform: translate(0, -4px) rotate(0);
  }
  38% {
    transform: translate(0, 2px) rotate(0);
  }
  40% {
    transform: translate(0, -8px) rotate(0);
  }
  42% {
    transform: translate(0, -9px) rotate(0);
  }
  44% {
    transform: translate(0, -3px) rotate(0);
  }
  46% {
    transform: translate(0, 0px) rotate(0);
  }
  48% {
    transform: translate(0, -7px) rotate(0);
  }
  50% {
    transform: translate(0, 0px) rotate(0);
  }
  52% {
    transform: translate(0, 3px) rotate(0);
  }
  54% {
    transform: translate(0, -4px) rotate(0);
  }
  56% {
    transform: translate(0, 3px) rotate(0);
  }
  58% {
    transform: translate(0, -9px) rotate(0);
  }
  60% {
    transform: translate(0, 9px) rotate(0);
  }
  62% {
    transform: translate(0, -6px) rotate(0);
  }
  64% {
    transform: translate(0, 0px) rotate(0);
  }
  66% {
    transform: translate(0, -4px) rotate(0);
  }
  68% {
    transform: translate(0, 1px) rotate(0);
  }
  70% {
    transform: translate(0, 5px) rotate(0);
  }
  72% {
    transform: translate(0, 0px) rotate(0);
  }
  74% {
    transform: translate(0, -6px) rotate(0);
  }
  76% {
    transform: translate(0, -3px) rotate(0);
  }
  78% {
    transform: translate(0, 3px) rotate(0);
  }
  80% {
    transform: translate(0, 6px) rotate(0);
  }
  82% {
    transform: translate(0, 2px) rotate(0);
  }
  84% {
    transform: translate(0, -3px) rotate(0);
  }
  86% {
    transform: translate(0, 1px) rotate(0);
  }
  88% {
    transform: translate(0, 1px) rotate(0);
  }
  90% {
    transform: translate(0, 10px) rotate(0);
  }
  92% {
    transform: translate(0, -2px) rotate(0);
  }
  94% {
    transform: translate(0, -2px) rotate(0);
  }
  96% {
    transform: translate(0, -6px) rotate(0);
  }
  98% {
    transform: translate(0, -9px) rotate(0);
  }
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
#replay{
	width: 48px;
	height: 48px;
	position: absolute;
	top: 40%;
	left: 50%;
	margin-left: -24px;
	background-image: url(images/replay.svg);
	animation: replayLoop 2s infinite forwards;
	z-index: 9999;
	fill: white;
}
#replay:hover{
	cursor: pointer;
	filter: drop-shadow(0px 0px 5px yellow);
}
@keyframes replayLoop{
	50%{
		transform: scale(1.5,1.5);
	}
	100%{
		transform: scale(1,1);
	}
}
#thermostat{
	width: 100px;
	height: 10px;
	position: absolute;
	top: 10px;
	right: 10px;
	/*border: 1px solid black;*/
	background: rgb(0,9,255);
	background: linear-gradient(90deg, rgba(0,9,255,1) 0%, rgba(241,255,0,1) 50%, rgba(255,0,0,1) 100%);
	font-family: Courier New;
	font-size: 9px;
}
#temperature{
	width: 100%;
	height: 100%;
	background-color: white;
	float: right;
}
#score{
	width: 50px;
	height: 30px;
	position: absolute;
	left: 10px;
	top: 10px;
}
#shoot_butten{
	width: 50px;
	height: 50px;
	border: 1px solid black;
	position: absolute;
	right: 40px;
	bottom: 100px;
	border-radius: 50%;
	background-color: rgba(255,0,0,0.5);
  z-index: 102;
  display: none;
}
@media screen and (max-width: 1024px) {
  main {
  	margin: 0px;
  	top: 0px;
  	left: 0px;
    width: 100%;
    height: 100%;
    border: none;
  }
}
#clouds{
	position: absolute;
	width: 400px;
	height: 300px;
	top: -300px;
	animation: cloudPlay 20s linear infinite;
  animation-delay: 10s;
	left: 50%;
  transform: translateX(-50%);
  z-index: 101;
}
#cloud1{
	width: 256px;
	height: 256px;
	background-image: url(images/cloud.png);
	z-index: 101;
}
#cloud2{
	width: 256px;
	height: 256px;
	background-image: url(images/cloud.png);
	z-index: 101;
	position: absolute;
	left: 150px;
	top: 20px;
	animation: cloudPlay2 6s linear infinite;
}
@keyframes cloudPlay{
	to{
		top: 120%;
	}
}
@keyframes cloudPlay2{
	50%{
		top: 50px;
	}
	100%{
		top: 20px;
	}
}

#joyDiv{
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  bottom: 100px;
  z-index: 103;
  /*border: 1px solid black;*/
}

.qcontainer{
  position: absolute;
  width: 100%;
  top: -20%;
  animation: qLoop linear forwards;
  direction: rtl;
}
.qflex{
  display: flex;
  justify-content: space-around;
  /*background-color: DodgerBlue;*/
}
.qflex > div {
  /*background-color: #f1f1f1;*/
  background-color: DodgerBlue;
  flex-grow: 1;
  margin: 10px;
  text-align: center;
  line-height: 30px;
  color: white;
  align-items: center;
}
@keyframes qLoop{
  to{
    top: 120%;
  }
}
#stars{
  width: 10px;
  min-height: 450px;
  position: absolute;
  left: 10px;
  top: 30px;
}
#login{
  width: 250px;
  min-height: 250px;
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
  border-radius: 10px;
  background-color: rgba(255,255,255,0.7);
  z-index: 99999;
  direction: rtl;
  padding: 10px;
  color: black;
  font-size: 15px;
  font-family: Samim !important;
  box-shadow: 1px 1px 2px silver;
}
#login_bg{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 103;
  top: 0px;
  left: 0px;
}
input[type=text],input[type=password]{
  width: 200px;
  height: 30px;
  border: 2px solid #eee;
  border-radius: 5px;
  margin-bottom: 10px;
}
input[type=text]:focus,input[type=password]:focus{
  border: 2px solid DodgerBlue;
}
button[type=submit]{
  width: 200px;
  height: 30px;
  background-color: DodgerBlue;
  border-radius: 5px;
  border: 0;
  /*border: 1px solid black;*/
  color: white;
  margin: 0 auto;
  font-family: Samim !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
form{
  text-align: center;
}
.error{
  color: red;
}
#your_score{
  direction: rtl;
  /*border: 1px solid black;*/
  width: 250px;
  height: 50px;
  position: absolute;
  bottom: 30%;
  left: 50%;
  font-family: Samim;
  font-size: 17px;
  font-weight: bold;
  margin-left: -125px;
  text-align: center;
  color: white;
  z-index: 99999;
}
#your_score h3{
  margin: 5px;
}
#ranks{
  width: 250px;
  height: 40px;
  /*overflow-x: scroll;*/
  direction: ltr;
  font-family: Courier New;
  font-size: 13px;
}