* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	background: #000;
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
}

h1 {
	
	color: white;
	font-size: 40px;
}


h2 {
	font-size: 20px;
	color: white;
}

p {	
    color: white;
	margin: 0 20px;
}


a {
	color: white;
	text-decoration: none;
	font-size: 15px;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
}

a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #ebebe0;
}

a.button {
	background: #2e2e1f;
	border-radius: 10px;
	display: block;
	font-size: 20px;
	width: 200px;
	margin: 0 0 0 170px;
	
}

a.button:hover P {
	background: #5b5b3e;
}

#game {
	height: 800px;
	width: 600px;
	left: 57%;
	top: 40%;
	position: relative;
	margin: -300px 0 0 -400px;
}

#gameUI {
	height: 800px;
	width: 600px;
	position: absolute;
}

#gameIntro, #gameComplete {
	margin-top: 100px;
	padding: 40px 0;
	text-align: center;
}

#gameStats {
	font-size: 14px;
	margin: 20px 0;
}

#gameStats .gameReset {
	margin: 10px 20px 0 0;
	position: absolute;
	right: 0;
	top: 0;
}

canvas {
	border-radius: 20px;
	display: block;
	background: url(background.png);
	background-size: 800px 600px;
}

.buttonanimation {
	
 width: 100px;
 height: 100px;
 -webkit-animation-name: button, infinite;
 -webkit-animation-duration: infinite; 
 animation-name: button;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}

@keyframes button {
    0%   {color: white; left:0px; top:0px;}
    50%  {color: yellow; left:200px; top:0px;}
    100%  {color: white; left:200px; top:200px;}
}

.titleanimation {
	
 width: 100px;
 height: 100px;
 -webkit-animation-name: example, infinite;
 -webkit-animation-duration: infinite; 
 animation-name: example;
 animation-duration: 2s;
 animation-iteration-count: infinite;
}

@keyframes example {
    0%   {color: white; left:0px; top:0px;}
    10%  {color: red; left:25px; top:0px;}
    20%  {color: yellow; left:50px; top:0px;}
	30% {color: lime; left:75px; top:0px;}
	40% {color: blue; left:100px; top:0px;}
	50% {color: white; left: 125px; top: 0px;}
	60% {color: blue; left:150px; top:0px;}
	70% {color: lime; left:175px; top:0px;}
	80% {color: yellow; left:200px; top:0px;}
	90% {color: red; left:225px; top:0px;}
	100% {color: white; left:250px; top:0px;}
}