html,body{
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.grass,.sky,.road{
  position:relative;
  display: flex;
  flex-direction: column;
}

.sky{
  height: 40%;
  background-color: lightblue;
}

.grass{
  height: 30%;
  background-color: seagreen;
    box-sizing: border-box;
  border-top: 7px solid rgb(42, 179, 102);
}

.road{
  height: 30%;
  background-color: dimgray;
  box-sizing: border-box;
  border-top: 18px solid gray;
  border-bottom: 18px solid gray;
  width: 100%;
}

.lines{
  box-sizing: border-box;
  border: 5px dashed #fff;
  height: 0px;
  width: 100%;
  position: absolute;
  top: 45%;
}

/* ELEMENTS TO ANIMATE */

.mario{
  width: 100px;
  position: absolute;
  top: -40px;
  left: 0px;
  animation-name: drive;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.cloud0,.cloud1, .cloud2, .cloud3, .cloud4, .cloud5, .cloud6{
    width: 170px;
    position: absolute;
    animation-name: flow;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.cloud1{
    left: -60px;
    top: -450px;
}

.cloud0{
  top: -550px;
  left: 630px;
}
.cloud2{
  left: 160px;
  top: -550px;
}

.cloud3{
  left: 380px;
  top: -450px;
}

.cloud5{
  top: -450px;
  left: 900px;
}

.cloud4{
  right: -50px;
  top: -550px;
}

.cloud6{
  top: -630px;
  left: 1100px;
}
/* KEYFRAMES */
 @keyframes drive {
  from{transform: translateX(0);}
  to{transform: translateX(550px);}
} 

@keyframes flow {
  from{transform: translateX(0);}
  to{transform: translateX(100px);}
}