body { background-color:#C0DEED;}

h1 {
	text-align: center;
	color: white;
	background-color: unset;
}

.button {
position:fixed;
top:0px;left:0px;
text-align:center;
margin:20px;
padding:3px;
color: white;
background-color: #FFFFFF1A;
border: 1px solid;
}

.top {transform: translateY(-300px);}
.bottom {transform: translateY(300px) translateX(0);}
.banner{animation: 5s ease-in-out 1 forwards slideInFromLeft}

@keyframes slideInFromLeft {
	0% {
    	transform: translateX(calc(-100% + 65%)) translateY(300px) perspective(200px) rotateX(0deg);
	}
	66%{
		transform: translateX(calc(100% - 65%))	translateY(300px) perspective(200px) rotateX(270deg);
	}
	100% {
    	transform: translateX(0) translateY(300px) perspective(200px) rotateX(360deg);
	}
}

#sky {
position:fixed;
top:0px;left:0px;
width:100%;
height:100%;
text-align:center;
margin:0px;
padding:0px;
background-color:#C0DEED;
background: url(images/clouds.png) center top repeat-x;
padding-top:300px;
padding-bottom:10px;
}

.sky2 {
position:fixed;
top:0px;left:0px;
width:100%;
height:100%;
text-align:center;
margin:0px;
padding:0px;
padding-top:0px;
padding-bottom:10px;
}

.sky3 {
position:fixed;
top:0px;left:0px;
width:100%;
height:100%;
text-align:center;
margin:0px;
padding:0px;
padding-top:0px;
padding-bottom:10px;
}



.loop {animation: 10s infinite linear backgroundLoop; background: url(images/clouds.png) center top repeat-x;}

@keyframes backgroundLoop {
	0% {
    	transform: translateX(100%);
	}
	100% {
    	transform: translateX(0%);
	}
}

.loop3 {animation: 10s infinite linear backgroundLoop3; background: url(images/clouds.png) center top repeat-x;}

@keyframes backgroundLoop3 {
	0% {
    	transform: translateX(0%);
	}
	100% {
    	transform: translateX(-100%);
	}
}

.float {animation: 3s infinite ease floatLoop; animation-direction: alternate}

@keyframes floatLoop {
	0% {
    	transform: translateY(-5%);
	}
	100% {
    	transform: translateY(+5%);
	}
}

.paused { animation-play-state: paused; }