*{box-sizing: border-box}

#mobile{
    display: inline
}
#desktop{
    display: none
}


body
{
    background-color: #D2B48C;
    margin: 0;
}

#wrapper {  
        background-color: #231814 ;
        color:  #221811;
        font-family: "Tahoma", "Arial", "sans-serif";
        padding: 0;}
        

main {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 2em;
    background-color:  #FEF6C2;
}
main ul{
    padding-left:2em;
}

header
{
    background-image: url(cup.jpg);
    background-repeat: no-repeat;
    background-color: #D2B48C;
    color: #231814;
    font-size: 1.0em;
    padding-left: 240px;
    padding-top: 5px;
    padding-bottom: 5px;
}

h1
{
    font-size: 3em;
}

h2
{
    color: #8C3826;
    padding-left: 1em;
    padding-right: 1em;
}

h3
{
    color: #8C3826;
    padding-left: 1em;
    padding-right: 1em;
}

h4{
    background-color: #D2B48C;
    font-size: 1.2em;
    padding-bottom: .25em;
    padding-left: 1em;
    padding-right: 1em;
}

nav
{
    text-align:center;
}
nav a
{text-decoration: none;}
nav a:link{color: #FEF6C2;}
nav a:visited{color: #D2B48C ;}
nav a:hover{color: #CC9933;}
nav ul{
    display: flex;
    padding-left: 0;
    list-style-type: none;
    flex-direction: column;
    margin: 0;
    padding:0;
    font-size: 1.25em;
}
nav li{
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    border-bottom: 1px;
    border-style: solid;
}

p{
    padding-left: 1em;
    padding-right: 1em;
}

div{
    padding-left: 1em;
    padding-right: 1em;
}

ul{padding-left: 3em;
    padding-right: 2em;}

dl{
    padding-left: 1em;
    padding-right: 1em;
}

footer
{
    background-color: #D2B48C;
    font-size: small;
    font-style: italic;
    text-align: center;
    padding: 1em;
    border: solid;
    border-width: 2px;
    border-color: #8C3826;

}

dt
{
    color: #8C3826;
}

.details{
    padding-left: 20%;
    padding-left: 20%;
    overflow: auto;
}

img{
    padding-left: 10px;
    padding-left: 10px;
}

#homehero{
    background-image: url(road.jpg) ;
    background-size: 100% 100%;
    height : 300px;
}

#mughero{
    background-image: url(threemugs.jpg) ;
    background-size: 100% 100%;
    height : 300px;
}

#guitarhero{
    background-image: url(guitar.jpg) ;
    background-size: 100% 100%;
    height : 300px;
}





@media (min-width: 1000px) { 
    header
        {
            text-align: center;
            padding-left: 0;
        }
    
    h1{font-size: 3em;}

    h4{
        margin-left: 10%;
        margin-right: 10%;
    }

    nav ul{
        flex-wrap: nowrap;
        justify-content: space-around;
        flex-direction: row;
    }
    nav li{border-bottom: none;}

    #homehero{
        background-image: url(hero.jpg) ;
        height: 50vh
    }

    #mughero{
        background-image: url(heromugs.jpg) 
    }

    #guitarhero{
        background-image: url(heroguitar.jpg) ;
    }

    #flow{
        flex-direction: row;
    }

    #mobile{
        display: none;
    }
    #desktop{
        display: inline;
    }

    .details{
        flex-direction: row;
    }
}

@media (min-width: 1024px) { 
    header
        {
            grid-area: header;
            background-image: url(coffeelogo.jpg);
        }
    
    nav
        {
            grid-area: nav;
        }
    nav ul{
        flex-direction: column ;
    }
    
    main
        {
            grid-area: main;
        }

    footer
        {
            grid-area: footer;
        }

     #wrapper { display: grid; 
           grid-template: 
                "header header" 
                "nav   main" 
                "footer   footer" 
                / 200px; }
}