@charset "UTF-8";
/* CSS Document */

body,html { 
	margin: 0px; 
	overflow: hidden; 
	width: 100%; 
	height: 100%; 
}

#gameBox{
	height: 100%;
	width: 100%;
}

#home{
	width: 100%;
	background-image: url(../images/background.png);
	position: relative;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#tutorial{
	width: 100%;
	background-image: url(../images/howtoplay.png);
	position: relative;
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.arrow { 
	position: absolute; 
	background: none; 
	width: 3em; 
	height: 3em;
}

#uArrow { 
	top:0px; 
	width: 100%;
}

#dArrow { 
	bottom:0px; 
	width: 100%;
}

#lArrow { 
	left:0px; 
	height: 100%; 
}

#rArrow { 
	right:0px; 
	height: 100%; 
}

audio {
	display: none
}

img {
	width: 100%;
}

.button {
	width: 180px;
	color: white;
	background-color: #ed4a7f;
	padding: 20px;
	border-radius: 10px;
	font-family: 'Press Start 2P', cursive;
	text-decoration: none;
	position: absolute;
	top: 55%;
	left: 41.5%;
	text-align: center;
}

.button:hover {
	background-color: #b0345c;
}

.button2 {
	width: 180px;
	color: white;
	background-color: #ed4a7f;
	padding: 20px;
	border-radius: 10px;
	font-family: 'Press Start 2P', cursive;
	text-decoration: none;
	position: absolute;
	top: 63%;
	left: 41.5%;
	text-align: center;
}

.button2:hover {
	background-color: #b0345c;
}

.button3 {
	width: 180px;
	color: white;
	background-color: #ed4a7f;
	padding: 20px;
	border-radius: 10px;
	font-family: 'Press Start 2P', cursive;
	text-decoration: none;
	position: absolute;
	top: 71%;
	left: 41.5%;
	text-align: center;
}

.button3:hover {
	background-color: #b0345c;
}

.link {
	text-decoration: none;
}

footer {
	position: absolute;
	top: 95%;
	left: 33%;
	color: #FFFFFF;
	text-align: center;
	font-family: Arial, "sans-serif";
}