.scroll-ground, .scroll-ollie, .scroll-mountains, .scroll-plants, .scroll-clouds {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.scroll-ground {
  z-index: 50;
  background-image: url('../../assets/img/ground.png');
  background-repeat: repeat-x;
  background-position: left 0px bottom 0px;
  animation: animate-ground 15s infinite linear;
}

.scroll-ollie {
  z-index: 15;
  background-image: url('../../assets/img/ollie.gif');
  background-repeat: no-repeat;
  background-position: left 8% bottom 30px;
  animation: animate-ollie 15s infinite linear;
}

.scroll-plants {
  z-index: 10;
  background-image: url('../../assets/img/plants.png');
  background-repeat: repeat-x;
  background-position: left 0px bottom 0px;
  animation: animate-ground 25s infinite linear;
}

.scroll-mountains {
  z-index: 5;
  background-image: url('../../assets/img/mountains.png');
  background-repeat: repeat-x;
  background-position: left 0px bottom 0px;
  animation: animate-ground 35s infinite linear;
}

.scroll-clouds {
  z-index: 1;
  background-image: url('../../assets/img/clouds.png');
  background-repeat: repeat-x;
  background-position: left 0px bottom 400px;
  background-size: 1600px;
  animation: animate-ground 60s infinite linear;
}

@keyframes animate-ground {
  0% {
    background-position: left 0px bottom 0px;
  }
  50% {
    background-position: left -2000px bottom 0px;
  }
  100% {
    background-position: left -4000px bottom 0px;
  }
}

@keyframes animate-ollie {
  0% {
    background-position: left 8% bottom 30px;
  }
  50% {
    background-position: left 40% bottom 30px;
  }
  100% {
    background-position: left 8% bottom 30px;
  }
}