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

.grass, .sky, .road{
  position: relative;
}

.sky{
  height: 40%;
  background: skyblue;
}

.grass{
  height: 30%;
  background: seagreen;
}

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

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

.mario{
  position: absolute;
  top: -60px;
  left: 0px;
  /* animation-name: drive;
  animation-duration: 3s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;  see cubic-bezier website*/
  animation: drive 3s both infinite linear, jump 0.3s 1.2s ease;
}

.luigi{
  position: absolute;
  top: 40px;
  left: 0;
  animation-name: drive;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


.cloud{
  position: absolute;
}

.cloud:nth-child(1){
  width: 200px;
  top: 70px;
  opacity: 0.5;
  animation: wind 40s linear infinite reverse;
}

.cloud:nth-child(2){
  width: 300px;
  top: 0;
  animation: wind 50s linear infinite reverse;
}

@keyframes wind{
  from{left: -100px }
  to{left: 100%}
}

@keyframes drive{
  from{transform: translateX(-200px)}
  to{transform: translateX(1600px);}
}

@keyframes jump{
  0%{ top: -60px; }
  50%{ top: -120px; }
  100%{top: -60px;}
}