body{
	width:100%;
	height:100%;
	padding:0;
	margin:0 auto;
    overflow: hidden;

}
.wrapper{
	margin:0 auto;
	width:500px;
}
header{
	text-align: center;
	font-size: 2em;
	background-color: red;
	height:50px;
	-webkit-animation-name: background;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: reverse;
}
.crazy{
	-webkit-animation-name: colors;
	font-family:'Comic Sans MS';
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
}
.nowyouseemenowyoudont{
	width: 200px;
	height: 200px;
	background-color: green;
	transition: background-color 0.5s;
	margin: 100px auto;
}
.nowyouseemenowyoudont:hover{
	background-color: transparent;
}
.illahannadurlinkur{
	font-size: 3em;
	text-decoration: none;
	color:blue;
	transition:color 0.5s;
}
.illahannadurlinkur:hover{
	color:orange;
}
.midja{
	margin:0 auto;
	text-align: center;
}
.infinite{
	width: 200px;
	height: 200px;
	margin:0 auto;
	margin: 100px auto 0;
	background-color:orange;
	-webkit-animation-name: size;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
}
.vinstri{
	width:60px;
	height:60px;
	background-color:blue;
	position:relative;
	top:130px;
	left:230px;
	-webkit-animation-name: boredom;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	/*Þetta er ekki kúl*/
	/*-webkit-animation-timing-function: linear;*/
}
.right{
	width:60px;
	height:60px;
	background-color:blue;
	position:absolute;
	top:130px;
	right:230px;
	-webkit-animation-name: boredomright;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction:reverse;
}
.round{
	position:absolute;
	top:0px;
	left:0px;
	width:50px;
	height:50px;
	background-color:lawngreen;
	-webkit-animation-name: around;
	-webkit-animation-duration: 4s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}
.obnoxious{
	position:absolute;
	top:35%;
	left:10%;
	font-family:'Comic Sans MS';
	font-size:7em;
    white-space: nowrap;
    -webkit-animation-name: obnoxious;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes size{
	0% {-webkit-transform: scale(1,1);}
	50% {-webkit-transform: scale(1.5,1.5);}
	100% {-webkit-transform: scale(1,1);}
}
@-webkit-keyframes boredom{
	0% {top:130px;left:230px;background-color:blue;}
	20% {background-color:red;}
	40% {background-color:yellow;}
	50% {top:800px;left:230px;}
	60% {background-color:green;}
	80% {background-color:purple;}
	100% {top:130px;left:230px;background-color:blue;}
}

@-webkit-keyframes boredomright{
	0% {top:130px;right:230px;background-color:blue;}
	20% {background-color:red;}
	40% {background-color:yellow;}
	50% {top:800px;right:230px;}
	60% {background-color:green;}
	80% {background-color:purple;}
	100% {top:130px;right:230px;background-color:blue;}
}
@-webkit-keyframes around{
	0% {top:0;left:0;}
	25% {top:95%;left:0;}
	50% {top:95%;left: 97.3%;}
	75% {top:0;left:97.3%;}
	100% {top:0;left:0;}
}
@-webkit-keyframes obnoxious{
	0% {-webkit-transform: rotate(0deg);color:red;}
	25% {-webkit-transform: rotate(40deg) scale(1.5, 1.5);color:yellow;}
	50% {-webkit-transform: rotate(0deg);color:orange;}
	75% {-webkit-transform: rotate(-40deg) scale(1.5, 1.5);color:green;}
	100% {-webkit-transform: rotate(0deg);color:red;}
}
@-webkit-keyframes colors{
	10% {color:blue;}
	20% {color:red;}
	30% {color:green;}
	40% {color:orange;}
	50% {color:yellow;}
	60% {color:purple;}
	70% {color:black;}
	80% {color:darkgoldenrod;}
	90% {color:pink;}
	100% {color:blue;}
}
@-webkit-keyframes background{
	10% {background-color:blue;}
	20% {background-color:red;}
	30% {background-color:green;}
	40% {background-color:orange;}
	50% {background-color:yellow;}
	60% {background-color:purple;}
	70% {background-color:black;}
	80% {background-color:darkgoldenrod;}
	90% {background-color:pink;}
	100% {background-color:blue;}
}