* {box-sizing: border-box;}

body {
  background: #D2B48C;
    background-size: cover;
    color: #221811;
    font-family: Tahoma, Arial, sans-serif;
    margin:0px;
  }
  header {
    background: #d2b48c url("cup.jpg") no-repeat;
    color: #231814;
    padding-left: 105px;
    height: 128px;
    padding-top: 12px;
    padding-bottom: 12px;
  
  }

  header a {text-decoration: none;}
  
  header a:link, header a:visited  {color: #231418;}
  
  header a:hover  { color: #fef6c2;}

nav {
  text-align:center;
 
}

nav ul { 
  display: flex;
  list-style-type: none;
  flex-direction: column;
  padding:0px;
  margin: 0px;
  font-size: 1.25em;

}
nav li {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
  padding-right: 1.em;
  padding-left: 1.em;
  width: 100%;
  border-bottom: #fef6c2 1px solid;
}



nav a { text-decoration: none;}
nav a:link {color:#FEF6C2;}
nav a:visited {color:#D2B48C;}
nav a:hover {color:#CC9933;}
nav ul { padding-left:0;}

  h1 {
    line-height: 200%;
    font-size: 2em;
  }
  h2 {
    color: #8C3826;
  }

  h3 {color:#8c3826;}

  h4 {
    text-transform: uppercase;
    background-color: #D2B48C;
    font-size: 1.2em;
    padding-bottom: 0.25em;
    clear: left;
    border-bottom:#000000 1px solid;
  }

  main h2, main h3, main h4, main p, main div, main ul, main dl {
    padding-left: 1em;
    padding-right: 1em;
  }
  

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


  #mobile { 
    display:inline;}

  #desktop {
  display:none;}
  
  #homehero {
    height: 300px;
    background: #000000 url("road.jpg") no-repeat;
    background-size: 100%   100%;
  }
   #heromugs  {
    height: 300px;
    background: #000000 url("threemugs.jpg") no-repeat;
    background-size: 100%   100%;
  }

  #heroguitar {
    height: 300px;
    background: #000000 url("guitar.jpg") no-repeat;
    background-size: 100%   100%;
  } 

 #herojobs{
  height:300PX;
  background: #000000 url("herojobs.jpg") no-repeat;
  background-size: 100%   100%;
}

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

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


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

  }
  
   #wrapper {
  
    background-color: #231814;
    padding:0px;
  }

  form {
    display: flex;
    flex-direction: column;
    padding-left: 1em;
    width: 80%;
}

input, textarea {
  margin-bottom: 0.5em;
}

audio {
  display:block;
  margin-top:1em;
}
  @media  (min-width:600px) {
    form {
      display: grid;
      width: 40%;
      grid-gap: 1em;
      grid-template-columns: 6em 1fr;
    }
    
    input[type="submit"] {
      grid-column: 2 / 3;
      width: 9em;
    }

    header { text-align: center;
        padding:0px; }

    h1     { font-size: 3em;
    margin:aut; }

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

    nav li { border-bottom: none; }

    

    #homehero {
      height: 50vh;
      background: #000000 url("hero.jpg") no-repeat;
      background-size: 100%   100%;
 
  }
      
     #heromugs  {
      background: #000000 url("heromugs.jpg") no-repeat;
      background-size: 100%   100%;
    }

     #heroguitar {
      background: #000000 url("heroguitar.jpg") no-repeat;
      background-size: 100%   100%;
    }

    #herojobs{
    
      background: #000000 url("herojobs.jpg") no-repeat;
      background-size: 100%   100%;
    }

    #flow {
      display:flex;
      flex-direction: row;
    }
    #mobile {
      display:none;
    }
      #desktop {
        display: inline;
      }

    .details {
      display: flex;
      flex-direction:row;
    }

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

}

table {width:90%;
       border-spacing:0px;
       margin-left:auto;
       margin-right:auto;}

th,td { padding:8px;}

tr:nth-of-type(odd) {background-color: #D2B48E;}



@media (min-width:1024px) {

  header {
    background: #d2b48c url("coffeelogo.jpg") no-repeat;
  }

  @supports (display: grid) {
  
    header {grid-area: header;}
    nav    {grid-area: nav;}
    main   {grid-area: main;}
    footer {grid-area: footer;}

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

    nav ul {
      flex-direction: column;
    }
         
    }

  }