body {
  background-color: black;
}

.container {
  color: white;
  width: 99%;
  height: 100%;
  margin: 0 auto;
  position: absolute;
  display: block;
}

h1 {
  width: 100%;
  font-size: 28px;
  height: 5%;
  text-align: center;
  margin: 0 0 3px 0;
}

.gameInstructions {
  padding: 1% 1%;
  margin: 0 2px;
  font-size: 14px;
  border-radius: 10px;
  opacity: 0.8;
  top: 6%;
  left: 0%;
  width: 14%;
  height: 84%;
  position: absolute;
  display: inline;
  background-color: grey;
  border: 3px solid white;
}

.icons {
  height: 40px;
  width: 40px;
}

.gameOverlay {
  top: 6%;
  left: 17%;
  width: 83%;
  height: 89%;
  position: absolute;
  display: block;
  background-image: url("../img/layOver.jpg");
  background-size: cover;
  z-index: 1;
}

.overlayText {
  font-size: 28px;
  border-radius: 5px;
  opacity: 0.7;
  color: black;
  text-align: center;
  border: 5px solid black;
  padding: 6% 0 0 0;
  width: 40%;
  height: 30%;
  top: 35%;
  left: 5%;
  position: absolute;
  background-color: grey;
  display: none;
}

.hint {
  border-radius: 10px;
  opacity: 0.8;
  font-size: 18px;
  text-align: center;
  border: 5px solid black;
  padding: 3px 0 1% 0;
  width: 40%;
  height: 3%;
  bottom: 5%;
  left: 25%;
  position: absolute;
  background-color: grey;
}

.easyStartBtn {
  font-size: 18px;
  border-radius: 3px;
  border: 2px solid black;
  top: 8%;
  left: 5%;
  width: 15%;
  height: 5%;
  position: absolute;
  display: block;
}

.normalStartBtn {
  font-size: 18px;
  border-radius: 3px;
  border: 2px solid black;
  top: 14%;
  left: 5%;
  width: 15%;
  height: 5%;
  position: absolute;
  display: block;
}

.hardStartBtn {
  font-size: 18px;
  border-radius: 3px;
  border: 2px solid black;
  top: 20%;
  left: 5%;
  width: 15%;
  height: 5%;
  position: absolute;
  display: block;
}

.retryBtn {
  font-size: 28px;
  font-family: serif;
  border-radius: 10px;
  border: 5px solid black;
  opacity: 0.7;
  top: 5%;
  left: 5%;
  width: 30%;
  height: 20%;
  position: absolute;
  display: none;
}

.gameScreen {
  /*cursor: url(../img/crosshair.png) 22 22, auto;*/
  top: 6%;
  left: 17%;
  width: 83%;
  height: 89%;
  position: absolute;
  display: block;
  background-color: black;
  background-image: url("../img/buildingsEvening.jpg");
  background-size: cover;
}

.gun {
  position: absolute;
  bottom: 0;
  left: 46%;
  width: 25%;
}

.playerHealth {
  background-color: green;
  border-radius: 15px;
  opacity: 0.8;
  color: white;
  border: 1px solid white;
  padding-top: 5px;
  text-align: center;
  top: 1%;
  left: 1%;
  width: 10%;
  height: 4%;
  position: absolute;
  display: block;
}

.playerAmmo {
  background-color: black;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  color: white;
  text-align: center;
  padding: 8px 0px 0px 0px;
  opacity: 0.7;
  top: 0;
  right: 0;
  width: 10%;
  height: 5%;
  position: absolute;
}

.playerGrenade {
  background-color: black;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
  color: white;
  text-align: center;
  padding: 8px 0px 0px 0px;
  opacity: 0.7;
  top: 7%;
  right: 0;
  width: 10%;
  height: 5%;
  position: absolute;
}

.timer {
  background-color: black;
  border: 1px solid red;
  color: white;
  text-align: center;
  padding: 8px 0px 0px 0px;
  opacity: 0.7;
  color: white;
  bottom: 0;
  left: 0;
  width: 15%;
  height: 5%;
  position: absolute;
}

.spawn {
  height: 18px;
  width: 18px;
  position: absolute;
}

.enemyEasy {
  background-color: black;
  border: 6px double white;
  border-radius: 999px;
}

.enemyNormal {
  background-color: black;
  border: 6px double orange;
  border-radius: 999px;
}

.enemyHard {
  background-color: black;
  border: 6px double red;
  border-radius: 999px;
}

.ally {
  width: 33px;
  height: 33px;
  background-image: url("../img/triangle.png");
  background-size: contain;
}

.healthPack {
  border: 3.5px solid red;
  background-color: white;
}

.ammoBox {
  background-image: url("../img/bullet.png");
  background-size: contain;
  height: 54px;
  width: 50px;
}

.grenadeRefill {
  background-image: url("../img/grenade.png");
  background-size: contain;
  height: 52px;
  width: 50px;
}