body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif;
}
#game {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-image: url('images/background.png');
  background-size: cover;
  background-position: center;
}
#hud {
  position: absolute;
  top: 10px;
  right: 10px;
  color: white;
  font-size: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#shooter {
  position: absolute;
  left: 20px;
  width: 65px;
  height: 65px;
  background-image: url('images/shooter.png');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
}
.bullet {
  position: absolute;
  width: 12px;
  height: 4px;
  background-color: red;
  z-index: 3;
}
.enemy {
  position: absolute;
  width: 50px;
  height: 50px;
  background-image: url('images/enemy.png');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}
#start-screen, #game-over-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
}
#start-screen button, #game-over-screen button {
  font-size: 20px;
  padding: 10px 20px;
  margin-top: 20px;
  cursor: pointer;
}
.hi {
      display: inline-block;
      padding: 10px 20px;
      font-size: 14px;
      border: #efefef 3px solid;
      color: white;
      text-decoration: none;
      border-radius: 10px;
      box-shadow: 0 0 10px #fafafa;
      transition: all 0.3s;
      margin-right: 0px;
    }

    .hi:hover {
      background: linear-gradient(135deg, #ff1a75, #ff4d4d);
      box-shadow: 0 0 15px #ff1a75;
    }

    .hi {
      margin-top: 10px;
      font-size: 18px;
    }