* { box-sizing: border-box; }
body { background-color: #D2B48C;
       color: #221811;
	   font-family: Tahoma, Arial, sans-serif; 
	   margin: 0;  
}
#wrapper { background-color: #231814;
		   padding: 0;
}   
header { background-color: #D2B48C; 
        background-image: url(cup.jpg);
		background-repeat: no-repeat;
        color: #231814;
		height: 128px;
        padding-left: 105px;		 
		padding-top: 5px;
		padding-bottom: 5px;
}
header a { text-decoration: none; }
header a:link       { color: #231814; }
header a:visited { color: #231814; }
header a:hover     { color: #FEF6C2; }
h1 { font-size: 2em; }
h2 { color: #8C3826; }
h3, dt { color: #8C3826; }
h4 { background-color: #D2B48C;
     font-size: 1.2em;
	 padding-left: .5em;
	 padding-bottom: 0; 
	 text-transform: uppercase; 
	 border-bottom: 1px solid  #221811;
	 clear: left;  
} 
nav {  text-align: center;
	  font-size: 1.5em;
}
nav a { text-decoration: none; }
nav a:link       { color: #FEF6C2; }
nav a:visited { color: #D2B48C; }
nav a:hover     { color: #CC9933; }
nav ul { display: flex;
       flex-direction: column;
	   font-size: 1.25em;
	   list-style-type: none;
	   margin: 0;
       padding: 0; }
nav li { border-bottom: 1px solid #FEF6C2;
       padding: .5em 1em;
      width: 100%; }
main { background-color: #FEF6C2;
       display: block;
       padding: 0 0 2em 0; 
}

h2, h3, h4, p, div, ul, dl { padding-left: 1em; padding-right: 1em;}
main ul { padding-left: 2em; }
.details { padding-left: 20%;
           padding-right: 20%;
           overflow: auto;
}

img { padding-left: 10px;
      padding-right: 10px; }
#homehero { height: 300px;
            background-image: url(road.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%; 
}
#heromugs { height: 300px;
            background-image: url(threemugs.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%; 
}
#heroguitar { height: 300px;
            background-image: url(guitar.jpg);
			background-repeat: no-repeat;
			background-size: 100% 100%; 
}
#mobile { display: inline; }
#desktop { display: none; }
footer { background-color: #D2B48C;
         font-size: .60em;
		 font-style: italic;
		 text-align: center;
		 padding-bottom: 1em;
		 border-top: 2px solid #8C3826;
}
table {
    width: 90%;
    margin: 0 auto; 
    border-collapse: collapse; 
}

td, th {
    padding: 10px; 
    border: 0px solid #ddd; 
}

tr:nth-child(odd) {
    background-color: #D2B48E;
}
#herojobs {
	height: 300px;
	background-image: url("coffeecup.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
form { display: flex;
	    flex-direction: column;
padding-left: 1em; width: 80%; }
input, textarea { margin-bottom: .5em; }
 @media (min-width: 600px) { 
		header { 	padding-left: 0; 
				text-align: center; }
		h1        { font-size: 3em; }	
		nav ul   { 	flex-flow: row nowrap;
				justify-content: space-around; }
		nav li    { 	border-bottom: none; }
		#homehero     { background-image: url(hero.jpg);
					  height: 50vh; }
		#heromugs     { background-image: url(heromugs.jpg); }
		#heroguitar { background-image: url(heroguitar.jpg); }
		#herojobs   { background-image: url(herojobs.jpg); }
		#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%; }
		form { width: 40%;
		display: grid;
		gap: 1em;
		grid-template-columns: 6em 1fr; }
		input[type="submit"] {
			grid-column: 2;
		width: 9em; }
}
@media (min-width: 1024px) { 
		@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; }	
        header {  background-image: url(coffeelogo.jpg); }		
   }				
}