/*// 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 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: -40px;
    animation-name: mario;
    animation-duration: 6s;
    /* Will stays at last */
    animation-fill-mode: both;
    animation-delay: 0.2s;
    animation-iteration-count: 3;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.luigi {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 70px;
    left: 0;
    animation-name: luigi;
    animation-duration: 7s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.cloud {
    position: absolute;
}

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

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

/*// KEYFRAMES //*/

@keyframes mario {
    from {transform: translateX(-200px);}
    to {transform: translateX(2000px)}
}

@keyframes luigi {
    from { transform: translateX(-200px);}
    to {transform: translateX(2000px);}
}

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