@import url('https://fonts.googleapis.com/css?family=Freckle+Face');

body {
	background-color: #422515;
	margin: 0;
	padding: 0;
	position: relative;
}

audio {
	display: none;
}
.bordertop {
	width: 2280px;
	height: 100px;
	background-color: #422515;
 
	margin: 0px auto;
	top: -100px;
	position: absolute;	
	z-index: 5;
}

.borderbottom {
	width: 100%;
	height: 180px;
	background-color: #422515;
 
	margin: 0px auto;
	top: 720px;
	position: absolute;	
	z-index: 5;
}
.container {
	width: 1280px;
	height: 720px;
	background-color: #422515;
	background-image: url("img/wood.jpg");
  background-position:  0 -310px;
	margin: 50px auto;
	border-radius: 10px;
	border: 2px #330000 solid;
	box-shadow: 4px 4px 15px #662222;
	position: relative;
}

.scoreText {
	position: absolute;
	top: 10px;
	right: 40px;
	color: #fff; 
	font-size: 2em;
	font-family: 'Freckle Face', cursive;
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; 
}
.title {
	position: absolute;
	top: 160px;
	left: 300px;
	color: #fff; 
	font-size: 6em;
	font-family: 'Freckle Face', cursive;
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; 
}

.title img {
	position: absolute;
	margin-top: 30px;
	top: 200px;
	left: 300px;
	color: #fff; 
	font-size: 6em;
	font-family: 'Freckle Face', cursive;
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; 
}

.timeText {
	position: absolute;
	top: 10px;
	left: 40px;	
	font-size: 2em;
	font-family: 'Freckle Face', cursive;
	color: #ede6a1; 
	text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red; 
}

#play{
    position: absolute; 
    bottom:20px;
    right:40px;
}

#playAgain{
    position: absolute; 
    bottom:20px;
    right:400px;
}
.playButton {
	font-size: 2em;
	font-family: 'Freckle Face', cursive;
	color: #590909;
	border-radius: 20px;
	background-color: rgba(222,77,77,0.7);
	border: 3px #890c0c solid; 
	padding-left: 20px;
	padding-right: 20px;
	text-shadow: 0px -1px 4px #d67575, 0px -2px 10px orange; 
	box-shadow: 4px 4px 15px black;
 }

 .foodContainer {
 	position: absolute;
 	top:-200px;
 }


.gameover {
	display: none;
	width: 100%;
	height: 100%;
	background-color: #422515;
	margin: 0;
	padding: 0;
	position: absolute; 
	z-index: 10;
}

.gameover h1 {
	text-align: center;
	margin-top: 300px;
	color: #AAA; 
	font-size: 4em;
	font-family: 'Freckle Face', cursive;
	text-shadow: 3px 3px 11px black; 
}

.gameover p {
	text-align: center;
	color: #fff600; 
	font-size: 2em;
	font-family: 'Freckle Face', cursive;
	text-shadow: 3px 3px 11px black; 
}