/*// BASE STYLES //*/

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: dimgrey;
  box-sizing: border-box;
  border-top: 10px solid grey;
  border-bottom: 10px solid grey;
  width: 100%;
}

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

/*// ELEMENTS TO ANIMATE //*/

.mario{
  position: absolute;
  top: -40px;
  left: 0;
  animation: drive 3s both infinite linear,
             jump 0.3s 1.2s ease;
}
.luigi{
  position: absolute;
  top: 100px;
  left: 0;
  animation-name: drive;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-direction: reverse;
}

.cloud{
  position: absolute;
}

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

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

/*// KEYFRAMES //*/

@keyframes drive{
  from{ transform: translate(-200px)}
  to{ transform: translatex(1000px)}
}

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

@keyframes jump{
  0%{ top: -40px }
  50%{ top: -100px }
  100%{ top: -40px }
}