* { box-sizing: border-box;}
body { background-color: #5280C5;
      color: #003366;
	  font-family: Verdana, Arial, sans-serif;
	  margin: 0;
}
#wrapper { background-color: #F0F0F0;
}
header { background-color: #000066;
         background-image: url(lilfish.gif);
		 background-position: center;
		 background-repeat: no-repeat;
		 color: #F0F0F0;
		 font-family: Georgia, "Times New Roman", serif;
		 padding: 1em;
		 text-align: center;
}
header a { text-decoration: none; }
header a:link       { color: #F0F0F0; }
header a:visited { color: #F0F0F0; }
header a:hover     { color: #AEC3E3; }
h1 { font-size: 2em;
     padding: 0.2em;
	 text-shadow: 3px 3px 3px #CCC; }
h2 { font-size: 1.2em;
     text-shadow: 1px 1px 1px #777;
	 animation: fadein;
	 animation-duration: 5s;
	 animation-timing-function: ease-out; 	 
	}
	 
nav { text-align: center;  
}
nav ul { display: flex;
      flex-direction: column;
	  font-size: 1.5em; 
	  list-style-type: none; 
	  margin: 0;
	  padding: 0;
}
nav li { border-bottom: 1px solid #AEC3E3;
      padding-bottom: .5em;
	  padding-top: .5em;
	  width: 100%;
}
nav a { text-decoration: none; }
nav a:link       { color: #000066; }
nav a:visited { color: #5280C5; }
nav a:hover     { color: #3262A3; }
main { background-color: #FFF;
      border: 1px solid #AEC3E3;
	  display: block;
	  overflow: auto;
      padding-left: 2em;
      padding-right: 2em;
}
dt { color: #5280C5;
     font-size: 1.1em;
	 font-family: Georgia, "Times New Roman", serif; 
	 font-weight: bold; 
}
section { background-color: #EAEAEA;
		margin-bottom: 1em;
		margin-right: 1em;
		padding: 0;
 }
 section h3 { background-color: #AEC3E3;
           font-size: 110%;
           margin-bottom: 0;
           margin-top: 0;
		   padding: .25em;
}
section p { padding: 0 .25em .25em .25em; }
.category { color: #5380C5;
            font-family: Georgia, "Times New Roman", serif; 
            font-weight: bold;
}
.address { clear: left; }
#mobile   { display: inline; }
#desktop { display: none; }
footer { background-color: #AEC3E3;
         font-size: .70em;
         font-style: italic;
		 padding: 1em;
		 text-align: center;
}

table {
	margin: 1em;
	border: 2px rgb(0, 0, 119) solid;
	border-collapse: collapse;
}
td, th {
	padding: 0.5em;
	border: 1px rgb(0, 0, 119) solid;
}

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

input, textarea {margin-bottom: .5em;}
label {
	text-align: right;
}


.shop {
	border: 1px solid #AEC3E3;
	background: white;
}

.shop img {
	float: right;
}

.shop form {
	clear: right;
}


@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
  }


@media (min-width: 600px) { 
		header { background-image: url(bigfish.gif); }
		h1        { font-size: 3em; }
		nav ul   { flex-direction: row;
		        flex-wrap: nowrap;
				justify-content: space-around; }
		nav li    { border-bottom: none; }
		#flow { display: flex;
			    flex-flow: row wrap; }
		section { flex: 1; 
			    min-width: 30%; }
		dl   { flex: 2; }
		img { flex: 1; }
		#mobile  { display: none; }
		#desktop { display: inline; }
		form {
			width: 40%;
			display: grid;
			grid-gap: 1em; gap: 1em;
			grid-template-columns: 6em 1fr;
		}
		input[type="submit"] {
			grid-column: 2;
			width: 9em;
			}
		article {
			flex: 2;
		}
}
@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" 
					/ 180px ; }
		nav ul { flex-direction: column;
		         font-weight: bold;
				 font-size: 1.25em; }
		}
}