/*stars and clouds*/
.stars{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-image: radial-gradient(
		circle at 50% 110%,
		#385c78,
		#011735 79%,
		#010e1f
	);		
}



.cloudBackground{
	background: #f2f6f7;
	padding-bottom: 1em;
}
.cloudsWrapper:before,
.cloudsWrapper:after {
	position: absolute;
	content: "";
	display: block;
	height: 100%;
	min-width: 2560px;
	/*width: 100%;*/

	background-size: auto 100%;
	-webkit-animation: clouds linear infinite alternate;
	animation: clouds linear infinite alternate;
}

.clouds {
	position: relative;
	width: 100%;
	bottom: 0px;
	z-index: 0;
}
/*#about{
	position: absolute;
}*/

.clouds2{
	position: relative;
	width: 100%;
	bottom: 0;
	transform: rotate(180deg);
	z-index: 0;
}


.cloudsWrapper {
	position: relative;
	overflow: hidden;
	bottom: 0;
	height: 150px;
	width: 100%;
	bottom: -1px;
}
.cloudsWrapper:after {
	/*background: url("https://imgur.com/GaR2ZvO.png") bottom repeat-x;*/
	background: url("../img/clouds1.png") bottom repeat-x;
	-webkit-animation-duration: 210s;
	animation-duration: 210s;
}
.cloudsWrapper:before {
	/*background: url("https://imgur.com/zYklUEb.png") bottom repeat-x;*/
	background: url("../img/clouds2.png") bottom repeat-x;
	-webkit-animation-duration: 120s;
	animation-duration: 120s;
}


.stars:after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../img/stars1.png");
	background-repeat: repeat-x;
	background-size: cover;
	animation: stars 40s linear infinite alternate;
	z-index: 0;
}
.stars:before {
	/*z-index: 3;*/
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../img/stars2.png");
	background-repeat: repeat-x;
	background-size: cover;
	animation: stars 70s linear infinite alternate;
	z-index: 0;
}

@keyframes stars {
	0% {
		-webkit-transform: rotate(-14deg);
		transform: rotate(-14deg);
	}
	100% {
		-webkit-transform: rotate(14deg);
		transform: rotate(14deg);
	}
}

@keyframes clouds {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	100% {
		-webkit-transform: translateX(-500px);
		transform: translateX(-500px);
	}
}



@media (max-aspect-ratio: 1/1){
	.cloud:after,
	.cloud:before{
		width:50%;
		height: 50%;
	}
}