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










     /*COLORS 
               #65A603  ---- RGB 101, 166, 3 ------- lime green
                #736B02   ----- RGB 115, 107, 2    ------ forest green
                #F27405  ------ RGB 242, 116, 5 ------- orange 
                 #BF4904   ---- RGB 191, 73, 4      ---- dark orange 
                 #732002  ----- RGB 115, 32, 2  ---- red
               */

    /* add your css*/

    body {
    	font-size: 20px;
     background-color: rgb(242, 203, 155);
    }

    #wrapper { 
    	width: auto;
    	max-width: 1000px;
    	margin: auto;
    
     }

     header {
     	margin: 2%;
          padding: 2%;
          background-image: url("meatball.jpg");
          min-height: 500px;
     }


     h1 {
          font-size: 40px;
          background-color: rgba(242, 116, 5, 0.7);
          text-align: center;
          border-radius: 100px;
          border-bottom: 1px white;
     }

	p {
     	background-color: rgba(191, 73, 4, 0.8);
          text-align: center;
           border-radius: 100px;
     }


     h2 {
          font-size: 1.5em;
          border-bottom: 3px solid white;
          text-align: center;
     }

     h3 {
          text-align: center;
          font-weight: bold;
          margin-top: 3%;
     }

     span {
          font-weight: bold;
          font-size: 1em;
     }


     #data {
     	font-size: 1em;
     }

     #data li {
     	display: block;
     	margin: 1%;
     	text-align: center;
          background-color: rgba(242, 116, 5, 0.7);
          border-radius: 100px;
          justify-self: center;      
     }

     #ingredients{
     	background-color: rgba(115, 107, 2, 0.5);
     	margin-bottom: 2%;
          border-radius: 25px;
          padding-bottom: 3%;
      
     }

     #ingredients li {
     	background-color: rgba(115, 107, 2, 0.5);
     	display: block;
     	margin: 2%;
          border-radius: 100px;
          padding-left: 10px;
     	
     }

     #steps {
     	margin-bottom: 2%;
          background-color: rgba(115, 107, 2, 0.5);
          display: grid;
          border-radius: 25px;
     }

     #steps li {
     	display: block;
     	margin: 1%;
     	padding: 4%;
     	min-height: 20px;
          grid-gap: 1%;
          background-color: rgba(115, 107, 2, 0.5);
          border-radius: 25px;
          display: grid;
     }

     #steps span {
          display: block;
          background-color: rgba(115, 107, 2, 0.5);
          text-align: center;
          border-radius: 100px;
          max-width: 25px;
          max-height: 25px;
     }

     li span {
     	font-weight: bold;
          

     }

    a {
          text-decoration: none;
    }

    a:link {
          color: rgb(101, 166, 3);
    }

    a:visited {
          color: rgb(115, 107, 2);
    }

    a:hover {
          color: orange;
    }

     /* tablet styles */

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

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

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

     /* desktop styles */

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

    
          /*#data {
               display: grid;
               grid-template-columns: 1fr 1fr;
          }

          li .time {
               grid-column: 1;
          }

          li .servings {
               grid-column: 2;
          }

          #ingredients {
               display: grid;
               grid-column: 1 / span 2;
          }
*/
          #meatballsauce {
               display: grid;
               grid-template-columns: 1fr 1fr;
          }

          #meatballchecklist {
               grid-column: 1;
          }

          #saucechecklist {
               grid-column: 2;
          }
     }