/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
	html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	
	margin: 0;	
	padding: 0;	
	border: 0;	
	font-size: 100%;	
	font: inherit;	
	vertical-align: baseline;}
	
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	
	display: block;}
	
	body {	
	line-height: 1.5;
	}
	
	ol, ul {	
	list-style: none;
	}
	
	blockquote, q {	
	quotes: none;
	}
	
	blockquote:before, blockquote:after,q:before, q:after {	
	content: '';	
	content: none;
	}
	
	table {	
	border-collapse: collapse;	border-spacing: 0;
	}	 
	
	/* end reset*/


	body {
		font-size: 20px;
		font-family: times new roman, serif;
	}

	#wrapper {
		width: auto;
		max-width: 950px;
		margin: 2% auto; 
	}

	h1 {
		text-align: center;
		font-weight: bold;
		text-decoration: underline;
		font-family: croissant One, serif;
	}

	header h1 {
		font-size: 50px;
		text-shadow: 1.5px 0 #c07f49;
		line-height: 110%;
		margin: auto;
		text-decoration: none;
	}

	header {
		margin: 5% auto;
		padding: 1%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas: 
			"title pic"
			"intro intro";
		grid-gap: 5px;
	}

		#title {
			grid-area: title;
		}

		#title-pic {
			grid-area: pic;
		}

		#intro {
			grid-area: intro;
		}

	header #title-pic {
		width:95%;
		border-radius: 25px;
	}

	header p {
		background-color: #f5deca;
		border-radius: 35px;
		padding: 2% 3% 2% 3%;
		margin: 10px;
		text-indent: 50px;
	}

	#ratings {
		text-align: left;
		padding: 3%;
	}

	#ratings-pic {
		width: 80%;
		margin: auto;
		padding-top: 5%;
		padding-left: 9%;
	}

	#bookkeeping {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"ratings ingredients"
			"data ingredients";
		
		font-size: 0.8em;
		margin: 2%;
	}

		#ratings {
			grid-area: ratings;
		}

		#ingredients {
			grid-area: ingredients;
		}

		#data {
			grid-area: data;
		}

	#bookkeeping span {
		font-family: croissant One, serif;
		margin: 3%;
	}

	#data li {
		background-color: #f5deca;
		border-radius: 15px;
		padding: 3%;
		margin: 3%;
	}

	#ingredients li {
		background-color: #f5deca;
		border-radius: 10px;
		margin: 3%;
		padding: 1% 3% 1% 3%;
		text-align: center;
	}

	#directions {
		background-color: #f5deca;
		border-radius: 15px;
		padding: 2% 2% 2% 3%;
		margin: 3%;
		text-align: center;
	}

	#directions span {
		font-family: croissant One, serif;
		margin: 1%;
		font-size: 0.85em;
	}

	#directions li {
		display: block;
		margin: 1% auto;
		text-align: left;
	}

	#closing {
		background-color: #f5deca;
		border-radius: 15px;
		margin: 3px auto;
		margin-top: 15%;
		padding: 3%;
		max-width: 80%;
		font-size: 0.85em;
		text-align: center;
	}

	a:link, a:visited {
	color: #b87333;
	text-decoration: none;
	}

	a:hover, a:focus {
		color: #cea47d;
	}

	footer {
		text-align: center;
		font-size: 0.7em;
		margin: 1% auto;
		padding-top: 8%;
	}


	/* tablet styles */
	@media only screen and (min-width: 600px) and (max-width: 800px) {
	
	header h1 {
	font-size: 55px;
	text-shadow: 2px 0 #c07f49;
	}

	header p {
		border-radius: 15px;
		margin-bottom: 1%;
	}

	header {
		height: 340px;
	}

	#directions {
		width: 70%;
		margin: auto;
	}

	#closing {
		margin-top: 8%;
		width: 60%;
	}
}

	/* desktop styles */
@media only screen and (min-width: 801px) {

	header h1 {
	font-size: 60px;
	text-shadow: 2.5px 0 #c07f49;
	line-height: 110%;
	}

	header p {
		border-radius: 15px;
		margin-bottom: 1%;
	}

	header {
		height: 390px;
	}

	#ingredients li {
		font-size: 1.05em;
		padding: 2%;
	}

	#closing {
		margin-top: 8%;
		width: 60%;
	}

	/* This is a section for reviews but for the life of me I couldn't get it to format in a gird. The idea is that it is a single row with three columns, with firs two being reviews and the third being a fake more button. 
	

	#reviews {
		border: 1px solid green;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr;
		grid-gap: 5px;
		padding: 10px;
	}
	*/

}