/** * 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;
	background-color: solid white;
	}
	
	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*/



	/* default styles (all device widths, but designed for mobile phone)*/
	
	 html,body {
	 	font-family: Didot, sans-serif;
	 	font-size: 10.5vw;
	 	color: solid black
	 }

	 #wrapper  {
	 	width: 100%;
	 	margin: 2% auto;
	 	border: 5px solid #0B9C8B;
	 	font-size: 15px;
	 	background-size: contain;
	 }

	 img {
	 	width: 100%;
	 }
	
	 header {
	 	border: 10px solid #00cccc;
	 	margin-bottom: 1%;
	 	display: grid;
	 	grid-template-columns: 1fr 1fr;
	 }
	 
	 h1 {
	 	margin-top: 0%;
	 	border: px solid #0B9C8B;
	 	text-align: center;
	 	font-size: 2.5em;
	 
	 	
	 	}

	 
	 header p {
	 	font size: 40px;
	 	width: 85%;
	 	margin: 23% auto;
	 	}

	 .videoFrame{
  		width:100%:
		}

	.videoFrame iframe{
  	 margin: 0 auto;
   	display: block;
   	width: 560px;
		}
	 
	#data {
		border: 5px #008080;
		margin-bottom: 1%;
		font-size: .8em;
		}
	
	#data li  {
		border: 5px solid #0B9C8B;
		font-size:20px;
		display: block;
		margin: 1% 1%;
		text-align: center;
		}	
	
	#ingredients  {
		border: 5px, solid #0B9C8B;
		margin-bottom: 1%;
		text-align: center;
		font-size: 1.5em;
		}

	#glaze  {
		border: 5px solid #0B9C8B;
		margin-bottom: 0%;
		text-align: center;
		font-size: 1.5em;
		}

	#glaze li  {
		border: 5px solid #0B9C8B;
		display: block;
		margin: 1%;
		text-align: center;
		}

	#ingredients li  {
		border: 5px solid #0B9C8B;
		display: block;
		margin: 1%;
		text-align: center;
		}
		
	#steps  {
		border: 5px solid #0B9C8B; 
		margin-bottom: 1%;
		line-height: 1em;
		}
	
	#steps li  {
		border: 5px solid #0B9C8B;
		display: block;
		margin: 1% 1%;
		height: 100px;
		}

		  <div style="text-align:center;">
    	<iframe width="420" height="420" class="video" 
		src="https://https://www.youtube.com/watch?v=mGoHcAluCBk">
		</iframe>
      </div>

	
	footer {
		border: 10px solid #0B9C8B;
		clear: both;
		text-align: center;
		}
		
		
	/* tablet styles */
	@media only screen and (min-width: 600px) and (max-width: 800px) {
	
	#data ul  {
		margin: 1% 1%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 1%;
		}
	
	#steps ul {
		display: grid;
		grid-template-areas: 
		"step-one step-two"
		"step-three step-three";
		grid-gap: 1%;
	}
	
	#step1 {
		grid-area: step-one;
	} 

	#step2 {
		grid-area: step-two;
		}
		
	#step3 {
		grid-area: step-three;
		}
		
	
	}
	
	
	/* desktop styles */
	@media only screen and (min-width: 801px) {
	
	#wrapper  {
	 	width: 100%;
	 	max-width: 900px;
	 	margin: 5% auto;
	 }	
	
	#data ul  {
		margin: 1% 1%;
		display: grid;
		grid-template-columns: repeat(4,1fr); /* 1fr 1fr 1fr 1fr; */
		grid-gap: 1%;
		}
	
	#steps ul  {
		margin: 5% 1%;
		display: grid;
		grid-template-columns: repeat(3,1fr); /*1fr 1fr 1fr;*/
		grid-gap: 1%;
		}
		
	
	}