body
{
	background:#ff9b00;
	padding: 0;
	margin: 0;
}
.container
{
	width: 300px:
	height: 300px;
	margin: 90px auto;
	background: #000000;
	position: relative;
}
.container h1
{
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 2em;
	text-align: center;
	color: #137448
}

*


{
	padding: 0;
	margin: 0;
}
.hero{
	height: 80vh;
	width: 100%;
	background-image: url(sky.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
	overflow-x: hidden;
}
.highway{
	height: 200px;
	width: 600%;
	background-image: url(road.jpg);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	background-repeat: repeat-x;
	animation: highway 5s reverse infinite;
}
@keyframes highway{
	100%{
		transform: translateX(-3400px);
	}
}
.city
{
	height: 280px;
	width: 500%;
	background-image: url(city.png);
	position: absolute;
	bottom: 200px;
	left: 0;
	right: 0;
	display: block;
	z-index: 1;
	background-repeat: repeat-x;
	animation: city 20s linear infinite;
}
@keyframes city
{
	100%{
		transform: translateX(-1400px)
	}
}
.car{
    position: absolute;
	right: 49.5%;
	bottom: 178px;
	width: 370px;
	height: 170px;
	z-index: 2;
	transform: translateX(50%);

}
.car img{
	width: 100%;
	animation: car 1s linear infinite;
}
@keyframes car
{
	100%{
		transform: translateY(-1px);
	}
	50%{
		transform: translateY(1px);
	}
	0%{
		transform: translateY(-1px);
	}
}
.wheel
{
	left: 50%;
	bottom: 320px;
	transform: translateX(-50%);
	position: absolute;
	z-index: 2;
}
.wheel img
{
	width: 300px;
	height: 90px;
}
.back-wheel
{
	left: -165px;
	position: absolute;
}
.front-wheel
{
	left: 60px;
	position: absolute;
}
@keyframes wheel
{
	100%{
		transform: rotate(360deg);
	}
}