/*CSS DOCUMENT*/
html, body, div, 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;} /*My edited version of the Eric Meyer’s reset tool. You may want to include this in all of your future CSS files. */
img {
width: 100%; /*Please leave this line.*/
display: block;
}


body{
background-color: rgb(250,250,250); /* Not totally white. */
color: rgb(51,51,51);  /* Not totally black. */
line-height: 1.5; 	/* A little extra leading. */
font-family: Sutro, serif;
}

div.container{
    background-color: rgb(250, 250, 250);
    max-width: 60em;
    margin: auto; 
    grid-template-columns: 1fr 1fr;
        grid-template-rows: 4;
    
    }


main{
padding:2re;
    display:grid;
    max-width: 100%;
    grid-template-columns: 50% auto;
    
}

section.ingredients{
    max-width: 90%;
border-top: 0.2rem solid  rgb(255, 145, 0);
    grid-column:1/2;
}

section.directions{
    max-width: 90%;
border-top: 0.2rem solid rgb(255, 145, 0);
    grid-column:2/3;
}

h1 {
background-color: rgb(255,136,0);
color: rgb(250,250,250); /* Same as body background. */
font-size: 2rem;
font-family: Sutro, serif;
padding: 0.8em 0.5em 0em; 
font-weight: bold;
}


h2 {
background-color: rgb(255,136,0);
color: rgb(255,219,183); 
font-size: 1.8rem;
padding: 0.6em;
font-family: Sutro, serif;, regular;
font-weight: medium;
}


figcaption {
font-family: sans-serif;
font-style: italic ;
padding: 0.8em 1em 0em 1.5em;
}

figure {
display: grid;
    max-width: 100%;
    grid-template-columns: 80% auto;
    margin-bottom: 2em;
padding: 0em 2em 0em 0.5em;
}

h3 {
font-family: Sutro, serif;, medium;
margin: 0.5em 0.5em 1em 0.5em; 
font-size: 1.5em;
color: rgb(255,136,0);
}
ul {
margin: 1em 1em 2em 1em;
} 


ol {
margin: 1em 1em 2em 1em;
list-style-type: numbers;
}


li { 
margin: 1em 1em 1em 0.5em;
}


footer {
margin: 0em 0em 0em 0em;
padding: 0.5em;
background-color: rgb(255,136,0);
color: rgb(255,219,183);
text-align: left;
    
}
/*By the way, when we use the slash-asterisk combo, it’s a comment on the CSS and it’s meant for human beings. The machine knows it is not supposed to process anything until it finds a asterisk-slash combo that ends the comment on the CSS. */