header, nav, footer, article, section {display:block;}

body {
	margin: 0;
	padding: 0;
}

html {
	width:100%;
	height:100%;
	background-color: hsl(60,90%,40%);
	font-family: 'Armata', sans-serif;
	
	-webkit-animation-name: farben;
	-webkit-animation-duration: 60s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;	
}

header {
	position: fixed;
	background: black;
	color: white;
	width: 100%;
	height: 50px;	
	margin: 0;
	padding-left: 2%;
	top: 0%;
	left: 0%;
	box-shadow: hsla(0,0%,0%,0.5) 0px 15px 20px;
}
header>h1 {
	margin-top: 4px;
}

footer {
	position: fixed;
	background: black;
	right: 2%;
	bottom: 4%;
	width: 100px;
	height: 100px;
	border-radius: 50px;
	text-align: center;
	
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}
footer>p {
	margin-top: 40px;
}
a {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
}

footer:hover {
	background: hsla(0,0%,0%,0.9);
	box-shadow: hsla(0,0%,0%,0.8) 0px 0px 100px;
}

a:link {
	color: hsla(0,0%,100%,0.9);
	text-decoration: none;
}
a:visited {
	color: hsla{0,0%,90%,0.9};
}
a:focus {
	color: hsla(0,0%,100%,1.0);
	text-shadow: hsla(0,0%,100%,1.0) 0px 0px 70px;
}
a:hover {
	color: hsla(0,0%,100%,1.0); 
	text-shadow: hsla(0,0%,100%,1.0) -150px -100px 4px,
				hsla(0,0%,100%,1.0) 0px 0px 100px;
}
a:active {
	color: hsla(0,0%,100%,1.0);
}

@-webkit-keyframes farben {
	0% {background-color: hsl(0,90%,0%);}
	20% {background-color: hsl(300,80%,50%);}
	40% {background-color: hsl(120,70%,50%);}
	60% {background-color: hsl(60,90%,40%);}
	80% {background-color: hsl(240,50%,50%);}
	100% {background-color: hsl(0,0%,0%);}
}