body {
	background: #21262c;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	overflow: hidden;
}

.clouds {
	/*display: flex;*/
	width: 100vw;
	justify-content: space-between;
	position: fixed;
	z-index: 2;
}

.clouds img {
	position: absolute;
}

.clouds img:nth-child(1) {
	top: 800%;
	left: -10%;
	width: 500px;
}

.clouds img:nth-child(2) {
	top: 30%;
	left: 60%;
	width: 300px;
}

.clouds img:nth-child(3) {
	top: -50px;
	left: 200px;
	width: 400px;
}

.clouds img:nth-child(4) {
	top: -100px;
	left: 400px;
	width: 700px;
}

.clouds img:nth-child(5) {
	top: -40px;
	left: 1000px;
	width: 600px;
}

.clouds img:nth-child(6) {
	top: 40px;
	left: 300px;
	width: 400px;
}

.bird {
	display: flex;
	align-items: center;
	background-color: #21262c;
	width: 100px;
	height: 100vh;
	position: absolute;
	animation: fly 10s infinite;
}

.bird img {
	animation: up 2s infinite alternate;
}

.bear {
	display: flex;
	align-items: flex-end;
	background-color: #21262c;
	width: 100px;
	height: 100vh;
	position: absolute;
	animation: walk 10s infinite;
}

.all-rain {
	display: flex;

}

.raining {
	/*display: flex;*/
	padding: 10px;
	padding-top: 100px;
	justify-content: space-between;
	z-index: -1;
}


.rain {
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background-color: #F5FFFA;
	animation: rainfall 1s infinite;
}

.rain2 {
	width: 2px;
	height: 5px;
	border-radius: 30%;
	background-color: #F5FFFA;
	animation: rainfall 2s infinite;
}

.rain3 {
	width: 2px;
	height: 7px;
	border-radius: 30%;
	background-color: #F5FFFA;
	animation: rainfall 3s infinite;
}

@keyframes rainfall {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(100vh);
	}
}

@keyframes fly {
	0% {
		transform: translateX(-10vw);
	}

	100% {
		transform: translateX(calc(130vw - 100px));
	}

}

@keyframes up {
	0% {
		transform: translateY(-60%);
	}

	100% {
		transform: translateY(60%);
	}
}

@keyframes walk {
	0% {
		transform: translateX(1010vw);
	}

	100% {
		transform: translateX(-10vw);
	}

}