/* colors: most of the colors are black and white.
There are a few colors from http://www.colourlovers.com/palette/4355345/Burrito_Bowl
*/

/* background images: you can modify the jpeg files for background images in the header,
nav, and footer sections
*/

body {
    background-color: #ffffff;
    color: #000000;
    
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1.5em;
}

header {
    background-image: url(../images/mexican-taco.jpg);
    background-size: cover;
    }

header h1 {
    font-size: 2em; 
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    padding: 2em;
    text-transform: uppercase;
}

nav {
    background-image: url(../images/mango-catfish-taco.jpg);
    background-size: cover;
    }

nav ul {
    padding: 2em;
    }

nav ul li {
    text-align: center;
    padding: 1em;
    list-style-type: none;
}

nav ul li a {
    font-size: 1em;
    text-transform: uppercase;
    padding: 0.8em;
    line-height: 1.5em;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #F0B414;
}

iframe {
    margin: 0 auto;
    display: block;
}

main {
    background-color: #FFFFFF;
    color: #000000;
    padding: 1em;
}

main h2 {
    color: #964420;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0.5em;
    text-transform: uppercase;
    }

main h3 {
    color: #B73E26;
    font-size: 1.25em;
    font-weight: bold;
    padding: 0.5em; 
    text-transform: uppercase;
    }

main ul {
    padding-left: 1em;
}

main p {
    font-family: Arial;
    list-style-type: circle;
    }

footer {
       background-image: url(../images/soft-taco-with-red%20sauce.jpg);
    background-size: cover;
    }

footer img {
    display: block;
    max-width: 25%;
    height: auto;
    margin-left: auto;
    margin-right: auto;    
    padding: 1em;
}

/* Tablet CSS code and up */
@media only screen and (min-width: 481px) {

    
nav ul {
    padding: 2em;
    text-align: center;
    }

nav ul li {
    text-align: center;
    padding: 0.5em;
    list-style-type: none;
    display: inline;
    
}

nav ul li a 
{
    font-size: 0.9em;
 }

main h2 {
     font-size: 2em;
    }

main h3 {
    font-size: 1.75em;
    }

main p {
    font-size: 1.5em;
    line-height: 1.5em;
    }
    
main ul {
   font-size: 1.5em;
    line-height: 1.5em;
}
    
footer ul li {
        display: inline;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
}

/* Desktop CSS code and up */
@media only screen and (min-width: 1025px) {
 

nav ul {
    padding: 3em;
    text-align: center;
    }

nav ul li {
    text-align: center;
    padding: 0.5em;
    
}

nav ul li a 
{
    font-size: 1em;
 }

    
footer ul {
    display: inline;
    margin-left: auto;
    margin-right: auto;
    width: 100%
    }
    

}