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

body {
    font-size: 20px;
    background-color: #217C89;
}

#wrapper {
    width: auto;
    max-width: 1000px;
    margin: 2% auto;
    background-color: #FFB03B;
}

header {
    margin: 2%;
    text-align: center;
}

header p {
    padding-bottom: 1.5em;
    padding-right: 3%;
    padding-left: 3%;
    font-family: 'Roboto', sans-serif;
    line-height: 1.5em;
    font-style: italic;
    text-align: left;
}

h1 {
    font-family: 'Podkova', serif;
    font-weight: bold;
    font-size: 3.0em;
    padding-bottom: 0.5em;
    color: #8E2800;
}

h1 p {
    border: 1px solid pink;
}

h2 {
    font-family: 'Podkova', serif;
    font-size: 2.0em;
    font-weight: bold;
    text-align: center;
    color: #8E2800;
}

figure {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1em;
}

figure img {
    width: 100%;
    border: 2px dashed #FFF573;
}

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

#data li {
    border: 2px dashed #8E2800;
    display: block;
    margin: 1%;
    text-align: center;
    background-color: #FFF573;
    border-radius: 10px;
}

#ingredients {
    margin-bottom: 2%;
    width: 325px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1.5em;
}

#ingredients li {
    display: block;
    padding-left: 20px;
    margin: 1%;
    text-align: left;
    background-color: #FFF573;
    border-radius: 10px;
}

#steps {
    margin-bottom: 2%;
    padding-bottom: 1.5em;
}

#steps li {
    display: block;
    margin: 1%;
    text-align: left;
    padding: 5%;
    min-height: 150px;
    background-color: #FFF573;
    border-radius: 10px;
}

li {
    font-family: 'Roboto', sans-serif;
    line-height: 1.5em;
    font-size: 1.0em;
}

li span {
    font-weight: bold;
    font-family: 'Podkova', serif;
    font-size: 1.15em;
    color: #B64926;
}

footer {
    text-align: center;
    font-family: 'Podkova', serif;
    font-size: 0.75em;
    letter-spacing: 0.2em;
    font-weight: bold;
    background-color: #FFF573;
}

footer p {
    font-family: 'Podkova', serif;
    font-weight: normal;
    font-size: 0.8em;
}

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

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




/* mobile styles */
@media only screen and (max-width: 599px) {

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

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

}

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

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

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

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

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

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

    #step7 {
       grid-column: 2 / 3;          
    }

}