* { box-sizing: border-box; }
body { background-color: #330000; 
       font-family: Verdana, Arial, sans-serif;
}

#wrapper { background-color: #F4E8BC;
		   color: #330000;
		   box-shadow: 5px 5px 5px #000000;
}
  header { background-image: url(images/logo.gif);
      padding: .5em 1em .5em 6em;
     background-repeat: no-repeat;
     background-color: #F4E8BC; 
	 
}
h1 {  font-family: Georgia, "Times New Roman", serif;

	 text-shadow: 3px 3px 3px #90745D;
      margin-top: .25em;
	 
}
nav { margin: 0;  border-bottom: 1px solid #F4E8BC;}
nav ul { list-style-type: none; 
       padding-left: 20px;
	   padding-top: 1.75em;
	   margin: 0;
	   display: flex;
	   flex-direction: column;
	   flex-wrap: wrap;
	   
	 }
nav li { margin-top: 0; margin-bottom: 0;
       font-weight: bold;
	   display: inline;
       padding: .25em;
}
nav a { text-decoration: none; }
nav a:link { color: #330000; }
nav a:visited{ color: #805030; }
nav a:hover { color: #3F4632; }


main { background-color: #FFFFCC;
          padding: 1px 20px 20px 20px;   
		  min-height: 300px;
		  display: block;
}
main img { float: right;
         padding: 20px;
}

footer { background-color: #FFFFCC;
       padding: 20px;
       text-align: center;
	   font-size: small;
	   font-style: italic;
}


@media (min-width: 800px) {
   #wrapper { width: 80%;
           margin: auto;
		   display: grid;
		   grid-template-rows: 130px auto;
		   grid-template-columns: 200px auto; 
  }
  header { grid-row: 1 / 2; grid-column: 1 / 3; }
  nav { grid-row: 2 / 4; grid-column: 1 / 2; }
  main { grid-row: 2 / 3; grid-column: 2 / 3; }
  footer { grid-row: 3 / 4; grid-column: 2 / 3; }
  nav  ul { flex-direction: column;  }
  h1 { font-size: 3.5em; padding-left: 120px;}
}