body { background-color: #BCA89F;
	background-image: url("checker.jpg");
	background-size: auto;
	background-position: center;
	background-repeat: repeat;
	font-family: Arial, Helvetica, sans-serif; 
	padding: 40px; 
}
}
main { padding-left: 40px;
	   padding-right: 40px;
	   padding-bottom:40px;
	   display: block;
	   margin-left: 100px;
	   padding-top: 40px; ;
}
h1 { background-color: #FFFFFF;
	color: #b84c65;
	text-align: center;
	line-height: 200%; 
	padding: 40px; 
	margin: 40px; }
h3 { color: #b84c65;
	line-height: 200%; 
	margin: 40px; }
p { margin: 40px; }
footer { background-color: #F7CDD0;
	font-size: small;
	font-style: italic;
	text-align: center; }

footer:nav { color: #ffffff; }

footer:hover { color: #b84c65; }

footer:visited { color: #BCA89F; }
	
nav {
width: 100%;
height: 80px;
background-color:#BCA89F;
}
nav ul {
float:center;
}
nav ul li {
float:center;
list-style:none;
position:relative;
}
nav ul li a {
display:block;
font-family:arial;
color:#ffffff;
font-size:24px;
padding: 24px 14px;
text-decoration:none;
}
nav ul li:hover ul {
display:block;
}
nav ul li {
width:180px;
border-radius:4px;
}
nav ul li a {
padding: 10px 14px;
}
nav ul li a:hover {
background-color:#abdbff;
}
dl {margin: 20px; }

table { width: 90%; margin: auto;
        border-spacing: 0;
        background-color:#F7CDD0;
        margin: 40px; }
.center { margin-top: 20px; }
	
#wrapper { width: 80%;
           min-width: 700px;
           max-width: 1024px;
           margin-right: auto;
           margin-left: auto;
           background-color: #FFFFFF;
           box-shadow: 3px 3px 3px #666666; }
           
.mobile { display: inline; }
.desktop {display: none }
 
@media only screen and (min-width: 600px) {
  h {
    text-align: center;
    padding-left: 0;
  }
 h1 { font-size: 3em; }
 nav ul {justify-content:space-around; 
	display: flex;
	flex-wrap: wrap; 
	flex-direction: row; }
nav li { border-bottom: none }
.banner { }
#mobile {display: none; }
#desktop {display: inline; }
h4 { margin-left: 10%;
	margin-right: 10%; }

}

@media only screen and (min-width: 1024px) {
h { grid-area: header;
nav { grid-area: nav;
main { grid-area: main;
footer{ grid-area: footer;
.banner { }
#wrapper {display: grid;
	grid-template: 
	"header  header"
	"nav     main"
	"footer  footer"
	/ 200px;  }
nav ul { flex-direction: column; }
h { background-image: url(coffeelogo.jpg); }

}