wbo1/client-data/index.css

body {
	background-color:#eee;
	width:100%;
	margin:0;
	animation: colorchange 200s infinite;
	animation-delay: 3620s;
}
header {
	position:fixed;
	left:0;
	top:0;
	text-shadow:1px 1px 2px #888;
	width:100%;
}

h1, h2 {
	display:inline-block;
}

h1 {
	animation: colorchange 30s infinite;
	animation-direction:alternate;
	animation-delay:3610s;
}

main {
	margin:200px auto;
	width:50%;
	padding:50px;
	font-size:2em;
	position:relative;
	text-align:justify;
	animation: move 20s infinite;
	animation-delay: 3640s;
	animation-direction:alternate;
	transition:.1s;
}

main:hover {
	transform:scale(1.1);
}

header, main {
	box-shadow: 2px 2px 10px #000;
	background-color:#fff;
}

header:hover h2 {
	animation:colorchange 100s infinite;
}

footer{
  font-size: .9em;
	position: absolute;
	bottom: 0;
	right: 0;
}

@keyframes vibration
{
	0% {transform:scale(0.1);}
	100% {transform:scale(1);}
}

@keyframes colorchange
{
	0% {color:#000;}
	30% {color:#c04;}
	40% {color:#706;}
	50% {color:#007;}
	60% {color:#04b;}
	70% {color:#0a4;}
	80% {color:#1c0;}
	80% {color:#b30;}
	100% {color:#f00;}
}

@keyframes move {
	0% {top:0;left:0;}
	25% {top:0;left:-10;}
	50% {top:-40px;left:-20px;}
	70% {top:0px;left:60px;}
	87% {top:50px;left:0px;}
	90% {top:-60px;left:20px;}
	94% {top:90px;left:-50px;}
	95% {top:0px;left:50px;}
	97% {top:-90px;left:-20px;}
	100% {top:0;left:0;}
}

@media (max-width:600px) {
	main {
		width:90%;
		margin: 100px auto;
		padding: 15px;
	}
	main:hover {
		transform:none;
	}
}