	body { 
		background-color: black;
	}
	/*background*/
	.background { 
		display: inline-block;
		position: fixed;
		margin-top: -5%;
		margin-left: -5%;
		width: 110%;
		height: 110%;
		z-index: 0;
		background-color: hsla(186, 95%, 96%, 1);
	}
	/*temp*/
	.temp {
		display: inline-block;
		position: fixed;
		height: 1000px;
		width: 110%;
		margin-top: -5%;
		margin-left: -5%;
		opacity: 1;
		animation-name: shift;
		animation-direction: ;
		animation-duration: 40s;
		animation-iteration-count: infinite;
	}
	@keyframes shift {
	    0% {margin-top: 0%;}
	    100% {margin-top: -148%;}
	}

	/*foreground*/
	.foreground {
		display: inline-block;
		position: fixed;
		margin-top: -9%;
		margin-left: -10%;
	}

	@keyframes an1{
		0% {transform: skew(-5deg);}
		100% {transform: skew(5deg);}
	} 

	@keyframes an2{
		0%{transform: translate(-20px, 0px);}
		100%{transform: translate(20px, 0px);}
	}

	@keyframes an3{
		0%{transform: skewX(-5deg);}
		100%{transform: skewX(5deg);}
	}

	/*flower*/
	.flower {
		display: inline-block;
		position: fixed;
		height: 100%;
		width: 15%;
		margin-top: 0%;
		margin-left: 26%;
	}
	#mildhum{
		margin-top: 10%;
		animation-name: an1;
		animation-duration: 5s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}

	#dry{
		animation-name: an2;
		animation-duration: 5s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}

	#wet{
		animation-name: an3;
		animation-duration: 5s;
		animation-direction: alternate;
		animation-iteration-count: infinite;
	}