/*// 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: 0px;
	/*animation-name: drive;
	animation-duration: 3s, 0.3s;
	animation-fill-mode: both;
	animation-delay: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;*/
	animation: drive 3s both infinite linear, jump 1.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;*/
	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 drive {
	from { transform: translateX(-200px)}
	to{ transform: translateX(1000px)}
}

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

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