*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-image: url('assets/bg1.jpg');
  background-repeat: no-repeat;
  background-size: auto;
  overflow: hidden;
  /* background-color: black; */
  user-select: none;
}

#overlay{
  height: 880px;
  width: 670px;
  user-select: none;
  opacity: 0.7;
  border: 5px solid black;
  position: absolute;
  top:50%;
  left:50%;
  translate : -50% -50%;
  background-color: beige;
  background-image: url('assets/keyboardControls.png');
  /* background-repeat: no-repeat; */
  background-size: cover;
  z-index: 2;
}

#clear-overlay{
  position: relative;
  top: 2%;
  left:70%;
  background-color: black;
  border-radius: 5%;
  border: 2px solid gray;
  font-size: 1em;
  font-weight: bolder;
  z-index: 4;
  height: 30px;
  color: white;
}

/* #easy{
  display: inline-block;
  position: relative;
  top: 17%;
  left: 44.5%;
  background-color: white;
  border-radius: 10%;
  border: 2px solid gray;
  font-size: 1em;
  font-weight: bolder;
  z-index: 4;
  width: 80px;
  height: 45px;
  color: black;
} */
/* #hard{
  display: inline-block;
  position: relative;
  top: 23%;
  left: 32%;
  background-color: white;
  border-radius: 10%;
  border: 2px solid gray;
  font-size: 1em;
  font-weight: bolder;
  z-index: 4;
  width: 80px;
  height: 45px;
  color: black;
} */

#canvas1{
  user-select: none;
  border: 5px solid black;
  position: absolute;
  top:50%;
  left:50%;
  translate : -50% -50%;
  background-image: url('assets/spaceBG2.jpg');
  /* background-repeat: no-repeat; */
  background-size: cover;
  /* overflow: hidden; */
}
#beetlemorph, #rays, #bossBomb, #smallAsteroid, #asteroid, #player, #player_jets, #rhinomorph, #boss, #explode{
  display: none;
}

@media (min-height: 750px){
  #canvas1{
    height: 90%;

  }
}
@media (max-width: 600px){
  #canvas1{
    width: 80%;
    height: 80%;
  }

  #overlay{
    display: none;
  }
}
#shoot{
  position: absolute;
  background: white;
  border: 2px solid red;
  font-size: 1em;

  color: red;
  font-weight: bolder;
  height: 55px;
  width: 55px;
  border-radius: 50%;
  bottom: 2%;
  left: 10%;
  touch-action: none;
}
#laser{
  position: absolute;
  background: white;
  border: 2px solid gold;
  font-size: 1em;

  color: gold;
  font-weight: bolder;
  height: 30px;
  width: 60px;
  border-radius: 30%;
  bottom: 2.8%;
  left:25%;
  touch-action: none;
}

#mega{
  position: absolute;
  background: black;
  border: 2px solid green;
  font-size: 1em;

  color: white;
  font-weight: bolder;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  bottom: 1.5%;
  left:45%;
  touch-action: none;
}




#left_btn , #right_btn{
  position: absolute;
  background: white;
  border: 2px solid black;

  color: black;
  height: 40px;
  width: 50px;
  font-size: 2em;
  font-weight: bolder;
  touch-action: none;
}

#shield{
  position: absolute;
  background: brown;
  border: 2px solid black;
  border-radius: 10%;
  text-orientation: upright;
  height: 80px;
  width: 35px;
  font-size: 0.7em;
  bottom: 12%;
  left: 0.7%;
  margin: 0;
  padding: 0;
  font-weight: bold;
  touch-action: none;
}

#shield span{
  color: white;
  /* background-color: purple; */
  display: inline-block;
  transform: rotate(-270deg);


}

#left_btn {
  bottom: 2%;
  right: 24%;
  border-radius: 10% 20%;
}
#right_btn{
  bottom: 2%;
  right: 10%;
  border-radius: 20% 10%;
}

@media (min-width: 830px){
  #shoot, #left_btn, #right_btn, #laser, #mega, #shield{
    display: none;
  }

}