@charset "utf-8"

div {
	display:block;
}

h1 {
	font-size: 60px;
	color: #FFFFFF;
	text-align: center;
}

p {
	font-size: 20px;
	color: #FFFFFF;
	text-align: center;
}


.container {
	position: relative;
	margin-top: 420px;
	margin-left: 20px;
}

.containerTwo {
	position: relative;
	margin-top: 6px;
	margin-left: 800px;
}

.rotateAnim {
	transform: rotate(30deg);
}		

.animatedDiv {
	width: 400px;
	height: 400px;
	position:absolute;
	border-radius: 300px;
	background-color: #C94D4D;
	animation: ball;
	animation-duration: 8s;
}

	@keyframes ball {
		0%, 100% {background-color: #C94D4D; left: 0px; down: 0px;}
		10% {background-color: #D8832D;}
		20% {background-color: #DAD71F;}
		30% {background-color: #406244;}
		40% {background-color: #242551;}
		50% {left: 400px;}
		60% {background-color: #242551;}
		70% {background-color: #406244;}
		80% {background-color: #DAD71F;}
		90% {background-color: #D8832D;}
	}

.button {
	background-color:#888888;
	width:100px;
	height:20px;
	color:white;
	margin-top: 520px;
	margin-left: 800px;
	text-align:center;
	cursor:pointer;
}	

#tooManyFilters {
	position:absolute;
}

#tooManyFilters.trigger {
	animation: cat;
	animation-duration: 5s;
}

	@keyframes cat {
		0% {filter: hue-rotate(0deg); left:0px;}
		20% {filter: hue-rotate(90deg); left:500px;}
		40% {filter: hue-rotate(180deg);}
		80% {filter: hue-rotate(270deg); left:0px}
	}