*{
  background-image: url(img/testback.png);
  background-size: 100%;
  font-family: 'Montserrat', sans-serif;
}

.game {
    width: 720px;
    height: 240px;
    border: 1px solid black;
    position: relative;
    margin: 3% 28% 0 28% ;
    background-image: url(img/background1.gif);
    background-size: 720px 240px;
}

.game2{ 
  width: 720px;
  height: 240px;
  border: 1px solid black;
  position: relative;
  margin: 15% 28% 0 28%;
  background-image: url(img/background1.gif);
  background-size: 720px 240px;
}


#dino {
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
    position: relative;
    top: 165px;
    /* animation: dino 0.7s infinite; */
    background-image: url("img/download.png");
    
  }

#dino2 {
    width: 75px;
    height: 75px;
    background-size: 75px 75px;
    position: relative;
    top: 165px;
    background-image: url("img/download.png");
    /* animation: dino2 0.7s infinite; */
    
}

.jump {
    animation: jump 1.5s linear;
  }

  @keyframes jump {
    0% {
      background-image: url('img/jump.png');
      top: 165px;
    }
  
    25% {
      background-image: url('img/jump.png');
      top: 117.5px;
    }
  
    50% {
      background-image: url('img/jump.png');
      top: 70px;
    }
  
    75% {
      background-image: url('img/jump.png');
      top: 117.5px;
    }
  
    100% {
      background-image: url('img/jump.png');
      top: 165px;
    }
}
  
.jump2 {
    animation: jump 1.5s linear;
  }

  @keyframes jump2 {
    0% {
      background-image: url('img/jump.png');
      top: 165px;
    }
  
    25% {
      background-image: url('img/jump.png');
      top: 117.5px;
    }
  
    50% {
      background-image: url('img/jump.png');
      top: 70px;
    }
  
    75% {
      background-image: url('img/jump.png');
      top: 117.5px;
    }
  
    100% {
      background-image: url('img/jump.png');
      top: 165px;
    }
  }
#obs {
    width: 100px;
    height: 100px;
    position: absolute;
    margin: 10% 100%;
  
    background-image: url("img/skill1.gif");
    background-size: 100px 100px;
  
    /* animation: block 100s infinite linear; */
}

#obs2 {
    width: 100px;
    height: 100px;
    position: absolute;
    margin: 10% 100%;

    background-image: url("img/skill2.gif");
    background-size: 100px 100px;
  
    /* animation: block 100s infinite linear  ; */
}

.create {
    animation: block 3s linear;
}

.create2 {
    animation: block 2.5s linear;
}

.create4 {
  animation: block2 3s linear;
}

.create5 {  
  animation: block2 2s linear;
}

@keyframes block {
    0% {
      margin: 10% 100%;
    }
  
    100% {  
      margin: 10% -5%;
    }
  }

@keyframes block2 {
    0% {
      margin: 10% 100%;
    }
    100%{
      margin: 10% -5%;
    }
}

#anya {
    width: 100px;
    height: 100px;
    position: absolute;
    margin: 10% 100%;
  
    background-image: url("img/skill1.gif");
    background-size: 100px 100px;
  
    /* animation: block 100s infinite linear; */
}

#anya2 {
  width: 100px;
  height: 100px;
  position: absolute;
  margin: 10% 100%;

  background-image: url("img/skill2.gif");
  background-size: 100px 100px;

  /* animation: block 100s infinite linear; */
}