/*                      GAME PAGE                 */
body {
  background-color: lightslategray;
  color: cyan;
}
.container {
  width:auto;
  height: 350px;
  background-image: url("../assets/yh.png");
  background-repeat: no-repeat;
}
.heal {
  width:200px;
  height: 25px;
  border: 4px solid black;
  background-color: lightyellow;
  color: black;
  font-family: monospace;
  font-weight: bold;
  font-size: 25px;
}
.health {
  background-color: rebeccapurple;
  width:200px;
  height: 25px;
  position: relative;
}
.player {
  width:90px;
  height: 180px;
  background-image: url("../assets/dd.png");
  position: relative;
  background-repeat: no-repeat;
  top:80px;
}
.patk {
  height: 40px;
  width:50px;
  background-image: url("../assets/p attack.png");
  position: relative;
  left:70px;
  opacity: 0;
}
.shield {
  width:20px;
  height: 180px;
  border-right: 9px solid orange;
  border-radius: 50%;
  position: relative;
  left:100px;
  top:-20px;
  opacity: 0;
}
.dia1 {
  width:100px;
  height: 80px;
  position: relative;
  background-color: whitesmoke;
  top:-80px;
}
.enemy {
  width:80px;
  height: 120px;
  position: relative;
}
.en {
  display: block;
  position: relative;
  left:370px;
  top:-70px;
}
.ehealth {
  width:60px;
  height: 30px;
  /*background-color: white;*/
  position: relative;
  left:370px;
  top:-270px;
  color:black;
  font-family: monospace;
  font-size: 40px;
  font-weight: bold;
}
.eatk {
  width:40px;
  height: 40px;
  background-image: url("../assets/ea.png");
  position: relative;
  left:340px;
  top:-230px;
  display: none;
}
h2 {
  display: inline;
  margin-left: 70px;
  border:4px solid;
  margin-top: 0;
}
.card1 {
  color:orange;
}
.card3 {
  color:indigo;
}
h3 {
  background: cadetblue;
  font-size: 30px;
  text-align: center;
  color:black;
}
.right, .left, .attack, .block {
  background-color: white;
  font-size: 40px;
  height: 80px;
  width:80px;
  border: 4px solid black;
  border-radius: 50%;
  color:black;
  padding:20px;
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
}
.right {
  left:100px;
  top:-80px;
}
.attack {
  background-color: crimson;
  top:-160px;
  left:300px;
}
.block {
  background-color: cornflowerblue;
  top:-160px;
  left:360px;
}

/*                       WIN/LOSE PAGE            */
.bb {
  background-color: greenyellow;
}
.win {
  font-size: 45px;
  font-weight: bold;
  color: dodgerblue;
  text-align: justify;
  font-family: sans-serif;
}
.aa {
  background-color: crimson;
}
.lose {
  font-size: 45px;
  font-weight: bold;
  text-align: justify;
  font-family: Arial;
}