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

body {
	background-color: #000;
	overflow: hidden;
}

#sky {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to bottom,
								#6D82A6 0%,
								#D2DCDC 70%,
								#F0F0D8 80%,
								#F1D382 95%,
								#E1A13F 100%);
}

.arco_layer {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	/* Centres the layer div's position coordinates */
	margin-left: 25%;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.arco {
	position: absolute;
	top: 0;
	height: 110%;
	width: 50%;

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

#arco_layer_0 {
	z-index: 20;
	opacity: 1;
}

#arco_0_0 {
	margin-left: -30%;
	background-image: url("arco_0_0.png");
}

#arco_0_1 {
	margin-left: 22%;
	background-image: url("arco_0_1.png");
}

#arco_layer_1 {
	z-index: 15;
	opacity: 1;
}

#arco_1_0 {
	margin-left: -44%;
	background-image: url("arco_1_0.png");
}

#arco_1_1 {
	margin-left: -11%;
	background-image: url("arco_1_1.png");
}

#arco_1_2 {
	margin-left: 31%;
	background-image: url("arco_1_2.png");
}

#arco_layer_2 {
	z-index: 10;
	opacity: 1;
}

#arco_2_0 {
	margin-left: -48%;
	background-image: url("arco_2_0.png");
}

#arco_2_1 {
	margin-left: -18%;
	background-image: url("arco_2_1.png");
}

#arco_2_2 {
	margin-left: -4%;
	background-image: url("arco_2_2.png");
}

#arco_2_3 {
	margin-left: 8%;
	background-image: url("arco_2_3.png");
}

#arco_2_4 {
	margin-left: 47%;
	background-image: url("arco_2_4.png");
}

.cars {
	position: absolute;
	height: 8vh;
	width: 220vw;

	margin-left: -110vw;

	background-size: 110vw auto;
	background-repeat: repeat-x;

	mix-blend-mode: screen;
}

@keyframes cars {
	from {transform: translateX(0);}
	to   {transform: translateX(110vw);}
}

#cars_0 {
	margin-top: 70vh;
	z-index: 25;
	background-image: url("cars_0.png");

	animation: cars 15s linear 0s infinite;
}

#cars_1 {
	margin-top: 65vh;
	z-index: 12;
	background-image: url("cars_1.png");

	animation: cars 25s linear 0s infinite;
}

#cars_2 {
	margin-top: 29vh;
	z-index: 5;
	background-image: url("cars_2.png");

	animation: cars 40s linear 0s infinite reverse;
}

#cars_2 {
	margin-top: 27vh;
	z-index: 5;
	background-image: url("cars_2.png");

	animation: cars 40s linear 0s infinite reverse;
}

@keyframes plane {
	0% 		  {transform: translate(0, 0) rotate(7deg);}
	60%, 100% {transform: translate(-700vw, -80vh) rotate(7deg);}
}

#plane {
	position: absolute;
	height: 2vh;
	width: 2vw;
	top: 50vh;
	left: 150vw;

	z-index: 1;
	background-image: url("aeroplane.png");
	background-size: contain;
	background-repeat: no-repeat;
	mix-blend-mode: multiply;

	animation: plane 70s linear 0s infinite;
}

@keyframes credit {
	from {transform: rotateX(0)
					 rotateY(15deg)
					 rotateZ(-3deg);
		  opacity: 0;}
	to   {transform: rotateX(0)
					 rotateY(10deg)
					 rotateZ(-1deg);
		  opacity: .8;}
}

#credit {
	position: absolute;
	bottom: 3em;
	left: 3em;
	width: 25vw;

	padding: .5em 1em;

	z-index: 99;
	background-color: rgba(0, 0, 0, .6);

	font-size: 2em;
	font-family: Roboto, sans-serif;
	color: #fff;

	animation: credit 1.5s ease-out 12s;
	animation-fill-mode: both;
}