/*
	Style-Sheet for Keila's Birthday!!!
*/

/*
	Custom Fonts
*/

@font-face{
	font-family: "Orange Juice";
	src: url("../fonts/orange-juice.ttf") format('truetype');
}

@font-face{
	font-family: "Honey";
	src: url("../fonts/HoneyRoom.ttf") format('truetype');
}

/*
	General Styling
*/

html{
	background: url(../img/bg.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body{
	margin: 0px;
}

h1,h2,h3,h4,h5,h6{
	font-family: "Orange Juice", monospace;
	font-size: 225%; 
}

h1{
	font-size: 250%;
}

p{
	font-family: "Honey", serif;
}

header{
	text-align: center;
	height: 100%;
	min-height: 480px;
	border: 0px;
	margin: 0px;
}

header h1{
	border: 0px;
	margin: 0px;
}

article{
	margin: 0px;
	border: 0px;
	background-color: rgba(255, 225, 225, .85);
}

article section{
	padding: 1em;
	border: 0px;
	margin: auto;
	width: 80%;
}

/*
	Need to make this mobile friendly!!!
*/
#special{
	width: 50%;
	margin: auto;
	text-align: center;
}

#yum{
	height: 100%;
	max-height: 450px;
	width: 100%;
	max-width: 300px;
}

#cake{
	width: 30%;
	margin: auto;
}

#howl{
	height: 100%;
	max-height: 315px;
	width: 100%;
	max-width: 500px;
}

#castle{
	width: 50%;
	margin: auto;
}

audio{
	width: 125px;
}

article section h2{
	text-align: center;
	margin: 0px;
}

footer{
	text-align: center;
	background-color: white;
	margin: 0px;
}

footer p{
	margin: 0px;
	padding: 1em;
}

/*
	Fix to cake scaleing
*/

@media only screen and (max-width: 510px){
	#cake{
		width: 80%;
	}
	#castle{
		width: 80%;
	}
}

@media only screen and (min-width: 511px) and (max-width: 650px){
	#cake{
		width: 60%;
	}
}

@media only screen and (min-width: 651px) and (max-width: 800px){
	#cake{
		width: 40%;
	}
}