.cloud {
	position: absolute;
	background: white;
	border-radius: 50%;
	z-index: -1;
}
.cloud:before,
.cloud:after {
	content: '';
	position: absolute;
	background: white;
	border-radius: 50%;
}

.cloud:nth-child(1) {
	width: 120px;
	height: 40px;
	top: 15%;
	left: -150px;
	animation: cloud-float 35s linear infinite;
}
.cloud:nth-child(1):before {
	width: 50px;
	height: 50px;
	top: -20px;
	left: 15px;
}
.cloud:nth-child(1):after {
	width: 70px;
	height: 70px;
	top: -30px;
	left: 40px;
}
.cloud:nth-child(2) {
	width: 180px;
	height: 60px;
	top: 25%;
	left: -200px;
	animation: cloud-float 45s linear infinite 5s;
}
.cloud:nth-child(2):before {
	width: 70px;
	height: 70px;
	top: -30px;
	left: 20px;
}
.cloud:nth-child(2):after {
	width: 90px;
	height: 90px;
	top: -40px;
	left: 60px;
}
.cloud:nth-child(3) {
	width: 150px;
	height: 50px;
	top: 40%;
	left: -180px;
	animation: cloud-float 40s linear infinite 10s;
}
.cloud:nth-child(3):before {
	width: 60px;
	height: 60px;
	top: -25px;
	left: 15px;
}
.cloud:nth-child(3):after {
	width: 80px;
	height: 80px;
	top: -35px;
	left: 50px;
}
.cloud:nth-child(4) {
	width: 100px;
	height: 35px;
	top: 60%;
	left: -130px;
	animation: cloud-float 30s linear infinite 15s;
}
.cloud:nth-child(4):before {
	width: 40px;
	height: 40px;
	top: -15px;
	left: 10px;
}
.cloud:nth-child(4):after {
	width: 60px;
	height: 60px;
	top: -25px;
	left: 35px;
}
.cloud:nth-child(5) {
	width: 200px;
	height: 70px;
	top: 75%;
	left: -220px;
	animation: cloud-float 50s linear infinite 20s;
}
.cloud:nth-child(5):before {
	width: 80px;
	height: 80px;
	top: -35px;
	left: 25px;
}
.cloud:nth-child(5):after {
	width: 100px;
	height: 100px;
	top: -45px;
	left: 70px;
}

@keyframes cloud-float {
	0% { transform: translateX(-200px); }
	100% { transform: translateX(calc(400px + 100vw)); }
}