body {
  background-color: darkgreen;
}
.container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width:auto;
  height:470px;
  background-image: url("../src/ah.png");
  background-repeat: no-repeat;
  border: 4px outset white;
  border-radius: 10px;
}
.phealth {
  width:160px;
  height:21px;
  border: 4px solid black;
  background-color: khaki;
  position: relative;
  font-family: Monospace;
  font-size: 20px;
  color:black;
  border-top-left-radius: 10px;
}
.php {
  height:21px;
  width:160px;
  position: relative;
  background-color: red;
}
.player {
  width:60px;
  height: 80px;
  background-image: url("../src/stand.png");
  position: relative;
  background-repeat: no-repeat;
  margin: 0;
  top:330px;
  /*animation: jump .7s linear infinite both;*/
}
@keyframes jump {
  0% {
    top:330px;
    background-image: url("../src/stand.png");
  }
  25% {
    top:100px;
    background-image: url('../src/stand.png');
  }
  50% {
    top:30px;
    background-image: url("../src/w2.png");
  }
  75% {
    top:100px;
    background-image: url('../src/stand.png');
  }
  100% {
    top:330px;
    background-image: url("../src/shoot.png");
  }
}
@keyframes shoot {
  from {
    left:40px;
  }
  to {
    left:470px;
  }
}
.dia1 {
  background: white;
  font-size: 20px;
  font-family: monospace;
  color:black;
  font-weight: bold;
  position: relative;
  top:-80px;
}
.bullet {
  width:15px;
  height:15px;
  background-color: yellow;
  position: relative;
  margin: 0;
  left:45px;
  top:10px;
  border-radius: 50%;
  /*animation: shoot 1s linear infinite both;*/
  /*visibility: hidden;*/
  display: none;
}
.boss {
  width:150px;
  height: 160px;
  background-image: url("../src/bb.png");
  background-repeat: no-repeat;
  position: relative;
  left:260px;
  top:175px;
}
.bbullet {
  width:30px;
  height:30px;
  background-color: red;
  position: relative;
  border-radius: 50%;
  left:-25px;
  /*left:-210px;*/
  top:25px;
  /*animation: strike 1s linear infinite both;*/
  /*visibility: hidden;*/
}
.dia2 {
  background: dimgray;
  font-size: 20px;
  font-family: monospace;
  color:black;
  font-weight: bold;
  position: relative;
  top:-80px;
}
.health {
  width:60px;
  height: 30px;
  /*background-color: white;*/
  position: relative;
  font-family: monospace;
  top:-60px;
  font-size: 30px;
  font-weight: bold;
  left:30px;
}
@keyframes strike {
  from {
    left:-20px;
  }
  to {
    left:-400px;
  }
}
.np1,.np2 {
  width:70px;
  height: 80px;
  margin: 0;
  margin-left: 20px;
  position: relative;
  top:50px;
  left:2px;
  /*animation: die 2s linear 1 both;*/
}
@keyframes die {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.up, .left, .right {
  width:80px;
  height: 80px;
  margin: 0;
  font-size: 50px;
  font-weight: bold;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 4px solid black;
  border-radius: 50%;
  background-color: whitesmoke;
  position: relative;
}
.up {
  left:70px;
  padding-left: 27px;
}
.right {
  left:140px;
  top:-80px;
}
.shoot {
  width:120px;
  height: 120px;
  background-color: whitesmoke;
  border: 4px solid black;
  border-radius: 50%;
  position: relative;
  font-size: 30px;
  font-weight: bolder;
  box-sizing: border-box;
  margin: 0;
  left:300px;
  top:-210px;
  padding-top: 30px;
  padding-left: 10px;
}
.next {
  margin: 0;
  position: relative;
  top:-80px;
  background: greenyellow;
  color:black;
  font-size: 30px;
  font-weight: bold;
  font-family: serif;
  border: 4px outset lightblue;
  border-radius: 10px;
  left:200px;
  transition: border 1s;
  display: none;
}
.next:hover {
  border: 4px inset hotpink;
}
h3, h2 {
  margin: 0;
  position: relative;
}
h2 {
  color:turquoise;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 15px;
}