@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
body {
  image-rendering:smooth;
  background-color:black;
  color:white;
  scroll-behavior: smooth;
  overflow:hidden;
  font-family: 'Silkscreen', cursive;
}
#time{
  position:fixed;
  font-size:40px;
  top:50px;
  left:100px;
}

#p1{
  width:300px;
  position:absolute;
  top:200px;
  left:1200px;
}
#player{
  height:50px;
  width:50px;
  position:absolute;
  top:100px;
  left:100px;
}
#hearts{
  width:50px;
  position:absolute;
  top:80px;
  left:100px;
}
#eneHearts{
  width:50px;
  position:absolute;
  top:180px;
  left:200px;
}
#t1{
  width:100px;
  height:107px;
  position:absolute;
  top:780px;
  left:800px;
}
#r1{
  width:70px;
  height:47px;
  position:absolute;
  top:500px;
  left:1000px;
}
#t2{
  width:100px;
  height:107px;
  position:absolute;
  top:500px;
  left:200px;
}
#t3{
  width:100px;
  height:107px;
  position:absolute;
  top:100px;
  left:400px;
}

#heal{
  width:20px;
  animation-name:waddle;
  animation-duration:2s;
  animation-iteration-count: infinite;
  height:16px;
  position:absolute;
  top:100px;
  left:400px;
}

#ene2Hearts{
  width:50px;
  position:absolute;
  top:380px;
  left:300px;
}
#enemy{
  height:28px;
  width:50px;
  position:absolute;
  top:200px;
  left:200px;
}

#enemy2{
  height:57px;
  width:50px;
  position:absolute;
  top:400px;
  left:300px;
}
#enemy4{
  height:217px;
  width:200px;
  position:absolute;
  top:400px;
  left:300px;
}
#ene4Hearts{
  width:100px;
  position:absolute;
  top:380px;
  left:300px;
}
#enemy3{
  height:60px;
  width:50px;
  position:absolute;
  top:400px;
  left:300px;
}
#ene3Hearts{
  width:50px;
  position:absolute;
  top:380px;
  left:300px;
}
#house{
  width:360px;
  height:288px;
  position:absolute;
  top:1600px;
  left:700px;
}
#dietext{
  position:absolute;
  top:50px;
  left:520px;
  animation-name:waddle;
  animation-duration:2s;
  animation-iteration-count: infinite;
  color:red;
}
#grave{
  position:absolute;
  top:150px;
  left:600px;
  width:60px;
}
.e{
  animation-name:waddle;
  animation-duration:2s;
  animation-iteration-count: infinite;
}
.d{
  animation-name:waddle;
  animation-duration:1s;
  animation-iteration-count: infinite;
}
.t{
  animation-name:tinywaddle;
  animation-duration:2s;
  animation-iteration-count: infinite;
}
@keyframes waddle{
  0%   {transform: rotate(0deg);}
  10%  {transform: rotate(-5deg);}
  20%  {transform: rotate(-10deg);}
  30%  {transform: rotate(-10deg);}
  40%  {transform: rotate(-5deg);}
  50%  {transform: rotate(0deg);}
  60%  {transform: rotate(5deg);}
  70%  {transform: rotate(10deg);}
  80%  {transform: rotate(10deg);}
  90%  {transform: rotate(5deg);}
  100% {transform: rotate(0deg);}
}
@keyframes tinywaddle{
  0%   {transform: rotate(0deg);}
  10%  {transform: rotate(-1deg);}
  20%  {transform: rotate(-2deg);}
  30%  {transform: rotate(-2deg);}
  40%  {transform: rotate(-1deg);}
  50%  {transform: rotate(0deg);}
  60%  {transform: rotate(1deg);}
  70%  {transform: rotate(2deg);}
  80%  {transform: rotate(2deg);}
  90%  {transform: rotate(1deg);}
  100% {transform: rotate(0deg);}
}