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

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

.cloud {
position:relative;
}
@keyframes cloudmove {
	0% {left:0px;}
	25% {left: 200px;}
	50% {left:400px;}
	75% {left:500px;}
	100% {left:600px;}
}
.cloud:hover {
	
}
.mario {
	left:30px;
	bottom:70px;
	position:relative;
}
@keyframes mariomove {
	0% {left:0px;}
	25% {left: 200px;}
	50% {left:400px;}
	75% {left:500px;}
	100% {left:600px;}
}
.mario:hover {

}
.luigi {
	left:30px;
	bottom:35px;
	position:relative;
}
@keyframes luigimove {
	0% {left:0px;}
	25% {left: 200px;}
	50% {left:400px;}
	75% {left:500px;}
	100% {left:600px;}
}
.luigi:hover {

}

.sky{
  height: 40%;
  background: skyblue;
  text-align:center;
}

.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%;
}