html,body{
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.okvir{
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 95vh;
}

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

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

	.cloud {
		position: absolute;
	}

	.cloud:nth-child(1) {
		width: 10vw;
		height: auto;
		top: 8vh;
		animation: wind 60s linear infinite reverse;
		-webkit-animation: wind 60s linear infinite reverse;
	}

	.cloud:nth-child(2) {
		width: 7vw;
		height: auto;
		top: 6vh;
		animation: wind 30s linear infinite reverse;
		-webkit-animation: wind 30s linear infinite reverse;
		opacity: 0.9;
	}

	.cloud:nth-child(3) {
		width: 13vw;
		height: auto;
		top: 7vh;
		animation: wind 40s linear infinite reverse;
		-webkit-animation: wind 40s linear infinite reverse;
		opacity: 0.7;
	}

	.cloud:nth-child(4) {
		width: 5vw;
		height: auto;
		top: 6vh;
		animation: wind 50s linear infinite reverse;
		-webkit-animation: wind 50s linear infinite reverse;
		opacity: 0.3;
	}

	.cloud:nth-child(5) {
		width: 15vw;
		height: auto;
		top: 7vh;
		animation: wind 65s linear infinite reverse;
		-webkit-animation: wind 65s linear infinite reverse;
		opacity: 0.5;
	}

	.cloud:nth-child(6) {
		width: 5vw;
		height: auto;
		top: 7vh;
		animation: wind 25s linear infinite reverse;
		-webkit-animation: wind 25s linear infinite reverse;
		opacity: 0.5;
	}

	.cloud:nth-child(7) {
		width: 10vw;
		height: auto;
		top: 7vh;
		animation: wind 45s linear infinite reverse;
		-webkit-animation: wind 40s linear infinite reverse;
		opacity: 0.5;
	}

	.cloud:nth-child(8) {
		width: 7vw;
		height: auto;
		top: 7vh;
		animation: wind 55s linear infinite reverse;
		-webkit-animation: wind 50s linear infinite reverse;
		opacity: 0.5;
	}

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

.road{
	height: 54%;
	background: dimgrey;
	box-sizing: border-box;
	border-top: 5vh solid grey;
	border-bottom: 5vh solid grey;
	width: 100%;
}

	.lines{
	box-sizing: border-box;
	border: 0.5vh dashed #ffff;
	height: 0;
	width: 100%;
	position: absolute;
	top: 45%;
	}

	/*
	Element za animacijo
	*/
	.mario{
		position: absolute;
		height: 12vh;
		width: 10vw;
		top: -5vh;
		left: -30vw;
		animation-name: drive; /*Naloži @keyframes*/
		animation-duration: 5s;
		animation-iteration-count: infinite;
		animation: drive 5s both infinite linear, /*Čas trajanja*/
		jump 0.3s 1.2s ease infinite; /*Kliče jump da Mario skočisamo enkrat na začetku*/
		/*animation-iteration-count: infinite; Kolikokrat naj se ponovi ali neskončno*/
		animation-timing-function: cubic-bezier(.77,1.31,.71,.6); /*Prilagodljiva hitrost pospeševanja-ustavljanja*/
	}

	.luigi{
		position: absolute;
		height: 12vh;
		width: 10vw;
		top: 5vh;
		left: -30vw;
		animation-name: drive;/*Naloži @keyframes*/
		animation-duration: 5s;/*Čas trajanja*/
		animation-iteration-count: infinite; /*Kolikokrat naj se ponovi ali neskončno*/
		animation-timing-function: cubic-bezier(.42,0,.58,1); /*Prilagodljiva hitrost pospeševanja-ustavljanja*/
		/*animation-direction: reverse;*/
	}

	.wonder{
		position: absolute;
		height: 12vh;
		width: 10vw;
		top: 15vh;
		left: -30vw;
		animation-name: drive;/*Naloži @keyframes*/
		animation-duration: 5s;/*Čas trajanja*/
		animation-iteration-count: infinite; /*Kolikokrat naj se ponovi ali neskončno*/
		animation-timing-function: cubic-bezier(.25,.1,.25,1); /*Prilagodljiva hitrost pospeševanja-ustavljanja*/
		/*animation-direction: reverse;*/
	}

	.princesa{
		position: absolute;
		height: 12vh;
		width: 10vw;
		top: 25vh;
		left: -30vw;
		animation-name: drive;/*Naloži @keyframes*/
		animation-duration: 5s;/*Čas trajanja*/
		animation-iteration-count: infinite; /*Kolikokrat naj se ponovi ali neskončno*/
		animation-timing-function: cubic-bezier(0,.96,.48,.34); /*Prilagodljiva hitrost pospeševanja-ustavljanja*/
		/*animation-direction: reverse;*/
	}

	.zmaj{
		position: absolute;
		height: 12vh;
		width: 10vw;
		top: 10vh;
		left: -30vw;
		animation-name: drive;/*Naloži @keyframes*/
		animation-duration: 5s;/*Čas trajanja*/
		animation-iteration-count: infinite; /*Kolikokrat naj se ponovi ali neskončno*/
		animation-timing-function: cubic-bezier(.27,1.18,.32,1.23); /*Prilagodljiva hitrost pospeševanja-ustavljanja*/
		/*animation-direction: reverse;*/
	}


/*
Keyframes
*/

@keyframes drive{
	from{ transform: translateX(-30vw); -webkit-transform: translateX(-30vw); -moz-transform: translateX(-30vw); -ms-transform: translateX(-30vw); -o-transform: translateX(-30vw);
}
	to{ transform: translateX(150vw); -webkit-transform: translateX(150vw); -moz-transform: translateX(150vw); -ms-transform: translateX(150vw); -o-transform: translateX(150vw); }
}

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

@keyframes jump{
0%{top: -4vh}
50% {top: -10vh}
100% {top: -4vh}
}