@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
body{
  image-rendering:pixelated;
  background-color:black;
  font-family: 'Silkscreen', cursive;
  color:white;
  text-align:center;
}
h1{
  font-size:100px;
}
#player{
  position:absolute;
  top:300px;
  width:50px;
}
.e{
  animation-name:waddle;
  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 rotat {
  0%   {width:100px;}
  10%  {width:101px;}
  20%  {width:102px;}
  30%  {width:103px;}
  40% {width:104px;}
  50%   {width:105px;}
  60%  {width:104px;}
  70%  {width:103px;}
  80%  {width:102px;}
  90% {width:101px;}
  100% {width:100px;}
}
#globe{
  animation-name:rotat;
  animation-duration:2s;
  animation-iteration-count: infinite;

}
#start{
  font-size:30px;
  font-family: 'Silkscreen', cursive;
  background-color:darkslateblue;
  color:white;
  border:white 4px solid;
}
#start:hover{
  background-color:slateblue;
}