body {
    background-color: #0a0a23;
  }
  
  #text {
    background-color: #0a0a23;
    color: #ffffff;
    padding: 10px;
  }
  
  #game {
    max-width: 500px;
    max-height: 400px;
    background-color: #ffffff;
    color: #ffffff;
    margin: 30px auto 0px;
    padding: 10px;
  }
  
  #controls,
  #stats {
    border: 1px solid #0a0a23;
    padding: 5px;
    color: #0a0a23;
  }
  
  #monsterStats {
    display: none;
    border: 1px solid #0a0a23;
    padding: 5px;
    color: #ffffff;
    background-color: #c70d0d;
  }
  
  .stat {
    padding-right: 10px;
  }
  
  button {
    cursor: pointer;
    color: #0a0a23;
    background-color: #feac32;
    background-image: linear-gradient(#fecc4c, #ffac33);
    border: 3px solid #feac32;
  }

  .image{
    width: 90%;
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
  }
  .i1{
    padding-top: 250px;
    padding-left: 100px;
    animation-name: player;
    animation-duration: 10s;
    animation-iteration-count: infinite;
  }
  .i2{
    animation-name: dragon;
    animation-duration: 10s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
  }
  @keyframes player{
    0% {padding-left: 100px;}
    25% {padding-left: 200px;}
    50% {padding-left: 100px;}
    75% {padding-left: 0;}
    100% {padding-left: 100px;}
  }
  @keyframes dragon{
    0% {rotate: 0;}
    25% {rotate: 10deg;}
    50% {padding-top: 100px;}
    75% {rotate: -10deg;}
    100% {padding-top: 0;}
  }