body{
	background-color: black;
	color:black;
}




.sun{
		background-color:#ffe732 ;
		width:300px;
		height:80%;
		animation: sun 4.5s infinite;
		min-height:300px;
		margin-bottom: 25px;

	}

@keyframes sun{
		0%{background-color: #ffe732}
		10%{background-color: #ffa631}
		20%{background-color: #ff8d30}
		30%{background-color:#ff5530}
		40%{background-color: #f92c00}
		50%{background-color: #f90000}
		60%{background-color: #f95700}
		70%{background-color: #f97800}
		80%{background-color: #f9a100}
		90%{background-color: #f9ba00}
		100%{background-color: #ffe859}

	}

/*.colds{
		background-color:blue ;
		width:300px;
		height:80%;
		animation: colds 4.5s infinite;
		min-height:300px;
		margin-bottom: 25px;
}


@keyframes colds{
		0%{background-color: blue, transform:translate(-2,-2);}
		49%{background-color: blue, transform:translate(4,6);}
		50%{background-color: aqua, transform:translate(0,-2);}
		51%{background-color: blue, transform:translate(-3,3);}
		100%{background-color: blue, transform:translate(3,-4);}

	}*/

.clouds{
	background-color: #8c8c8c;
		width:300px;
		height:100%;
		animation: cloudy 4s infinite;
		min-height:300px;
		margin-bottom: 25px;

}



@keyframes cloudy{
		0%{background-color: #8c8c8c}
		
		50%{background-color: #adadad}
	
		100%{background-color: #706f6f}

	}

.lr{
	background-color: #8c8c8c;
		width:300px;
		height:100%;
		animation: lr 4s infinite;
		min-height:300px;
		margin-bottom: 25px;
}

@keyframes lr{
		0%{background-color: blue}
		34%{background-color: blue}
		35%{background-color: white}
		36%{background-color: blue}
		49%{background-color:white}
		50%{background-color:white}
		52%{background-color: blue}
		100%{background-color: blue}





.hr{
	background-color: #8c8c8c;
		width:300px;
		height:100%;
		animation: hr 2s infinite;
		min-height:300px;
		margin-bottom: 25px;
}

@keyframes hr{
		0%{background-color: blue}
		10%{background-color: white}
		12%{background-color: blue}
		25%{background-color: white}
		27%{background-color: blue}
		35%{background-color: white}
		37%{background-color: blue}
		50%{background-color:white}
		52%{background-color: blue}
		60%{background-color:white}
		62%{background-color: blue}
		82%{background-color:white}
		84%{background-color: blue}
		100%{background-color: blue}






	.storms{
		background-color: black;
		width:300px;
		height:100%;
		animation: flash 4s infinite;
		min-height:300px;
		margin-bottom: 25px;

	}

	@keyframes flash{
		0%{background-color: black;}
		12%{background-color: black;}
		15%{background-color: white;}
		16%{background-color: black;}
		52%{background-color: black;}
		55%{background-color: white;}
		56%{background-color: black;}
		57%{background-color: black;}
		59%{background-color: white;}
		60%{background-color: black;}
		100%{background-color: black;}

	}