/** * 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*/
    

    /* add your default css*/
/* color codes:
	green- #263101
	yellow- #C49B3F
	grey- #BFB19F
	brown- #8C4303
	red- #641B04

	fonts:
	font-family: 'Bad Script', cursive;
	font-family: 'Raleway', sans-serif;

	*/


    img {width: 100%}

    body {
    	font-size: 24px;
    	background-image: url("img/background2.jpg");
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-color: #BFB19F;
    	}

    	
    #wrapper {
    	width: auto;
    	max-width: 1000px;
    	margin: 2% auto;
    	border-color: #C49B3F;
    	border-style: double;
    	border-radius: 50px;
    	border-width: 15px;
    	padding: 5%;
    	font-family: 'Raleway', sans-serif;
    	color: #263101;
    	font-weight: bold;
    }
 
 	header {
      margin: 2%;

    }

    header img {
    	border: 5px solid #C49B3F;
    }

    h1 {
      font-family: 'Bad Script', cursive;
      color: #641B04;
      text-align: center;
      font-size: 2.5em;
    }

    h1 p {
    	border: 1px solid black;
    	font-size: .6em;

    }

    h2 {
    	font-size: 1.5em;
    	font-family: 'Bad Script', cursive;
    	 color: #641B04;
    }

    #data {
    	margin-bottom: 2%;
    	font-size: .8em;
    }

    #data li {
		margin: 1%;
    	text-align: center;
    }

    #data li span {
    	font-family: 'Bad Script', cursive;
    	font-size: 1.3em;
    	 color: #641B04;
    }

     #supplies {
    	margin-bottom: 2%;
    	font-size: .8em;
    }

    #supplies li {
    	display: block;
    	margin: 1%;
    	text-align: center;
    }

 	#ingredients {
    	margin-bottom: 2%;
    	font-size: .8em;
    }

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

     #steps {
		margin-bottom: 2%;
    	font-size: .8em;
    }

    #steps li {
    	display: block;
    	margin: 1%;
    	text-align: left;
    	padding-top: 2%;
    }

    #step11 span {
    	font-style: italic;
    	font-weight: normal;
    	font-size: .9em;
    }

    li span{
    	font-weight: bold;
    	 color: #641B04;
    	 font-size: 1.2em;

    }

    footer {
    	font-family: 'Bad Script', cursive;
    	font-size: .7em;
    	font-weight: bold;
    	padding-left: 50px;
    }

    h3 {
    	font-family: 'Bad Script', cursive;
    	font-size: .7em;
    	font-weight: bold;
    	padding-left: 50px;
    }

/*end default css*/

/* tablet styles */

@media only screen and (min-width: 600px) and (max-width: 800px) {

	#data ul {
		margin: 1%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 5px;
	}

	#supplies ul {
		margin: 1%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 5px;
	}

	#ingredients ul {
		margin: 1%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-gap: 5px;
	}

	#steps ul {
			margin: 1%;
			display: grid;
			grid-template-columns: 1fr 1fr; 
			grid-template-areas: 
			"step-one step-two"
			"step-three step-four"
			"step-five step-six"
			"step-seven step-eight"
			"step-nine step-ten"
			"step-eleven step-eleven";
			grid-gap: 5px;
		}

	#step1 {
		grid-area: step-one;
	}

	#step2 {
		grid-area: step-two;
	}

	#step3 {
		grid-area: step-three;
	}

	#step4 {
		grid-area: step-four;
	}

	#step5 {
		grid-area: step-five;
	}

	#step6 {
		grid-area: step-six;
	}

	#step7 {
		grid-area: step-seven;
	}

	#step8 {
		grid-area: step-eight;
	}

	#step9 {
		grid-area: step-nine;
	}

	#step10 {
		grid-area: step-ten;
	}

	#step11 {
		grid-area: step-eleven;
	}
}

/* end tablet styles */

/* start desktop styles */

@media only screen and (min-width: 801px) {

	#data ul {
		margin: 1%;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 5px;
	}

	#supplies ul {
		margin: 1%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 5px;
	}

	#ingredients ul {
		margin: 1%;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		
		grid-gap: 15px;
	}

	#steps ul {
		margin: 1%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 15px;
	}

	#step11 {
		grid-column: 1 / span 2;
	} 

}