@charset "UTF-8";
body {
  font-family:sans-serif;
  font-size: 100;
}

/* link styles */
a:link, a:visited { color: #lightblue; }
a:focus, a:hover, a:active { color: #lightblue; }


/* header styles */
header {
  background-color: lightblue;
  background:  url(imgs/lightningtheifbanner.jpg) no-repeat center center;
  background-size: cover; 
  text-align: center;
}
header p {
  font-style:sans-serif;
  font-size: 100;
}

/* nav styles */
nav, footer {
  font-family:sans-serif;
  background-color: lightblue;
}
nav ul li a:link, nav ul li a:visited {
  color: black;
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
  color:blue;
}
nav ul li {
  font-size: 100;
  text-transform: uppercase;
  letter-spacing: .3em;
}

/* main "products" styles */
main {
  font-family:sans-serif;
  line-height: 3em;
}
h3 {
  text-transform: uppercase;
  letter-spacing: .3em;
}
p.more {
  font-family:sans-serif;
  text-transform: uppercase;
  font-size: .6em;
}

footer {
  background-color: lightblue;
  text-align: center;
  font-size: .6em;
}
h2 {
  font-family:sans-serif;
}
/******* MEDIA QUERIES BEGIN*******/
/*** TABLET VIEW***/
@media screen and (min-width:768px) {
    nav ul li{
        background-color:#fff;
        height: auto;
    }
    nav ul {
        flex-wrap: nowrap
    }
    nav ul li a{
        color: #710F11;
        text-decoration: none;
        border: 0;
    }
    nav ul li: hover, nav ul li:active{
        background-color: #fff;
    }
    nav ul li a:hover {
        color: #603813;
    }
    nav ul li a:active {
        color: #956D48;
    }
    #coffee, #pastries {
        display: flex;
        align-content: center;
        text-align: left;
        align-items: center;
    }
    #muffins-img #icecream-img{
        width: 50%;
    }
    .width{
        width: 50%
    }
    #muffins-img{
        order: 2;
    }
    #pastries h1, #muffins p, #salad h1,
    #pastries p {
        padding: 0 5%
        width: 90%
    }
    .margin {
        margin: 0;
    }
    p {
        padding: 0;
        width: 80%;
        margin: 0 auto;
    }
    .display{
        display: block;
    }
    /*** MENU PAGE***/
    .flex{
        display:flex;
        align-items:center;
    }
    .flex img{
        width: 50%;
    }
    #menu{
        margin-top:5%
    }
    .flip{
        order:2;
    }
    .flex h1{
        margin:0
    }
    /*** ABOUT PAGE ***/
    #about{
        width: 90%;
        margin: 0 auto;
    }
    #about .flex h1, #about .flex p{
        text-align: left;
        margin-left: 5%
    }
    #about .flex{
        padding-bottom: 5%;
        border-bottom: 1px #000 solid;
        margin-top: 2%;
    }
    }
}
/*** DESKTOP VIEW***/
@media screen and (min-width: 1024px) {
    form{
        width: 75%;
        margin: 0 auto;
    }
    input.button{
        padding: 2% 0;
        width: 15%
    }
    footer {
        display: flex;
        justify-content: space-around;
        align-content: center;
    }
    footer p{
        width: 100%
    }
    p{
        width: 50%
            margin:0 auto;
    }
    #hero h1{
        font-size: 3rem;
    }
    #hero p{
        font-size: 2rem;
        width: 100%
    }
       /*** MENU PAGE***/
    #menu {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-around
    }
}