body {
font-family: Helvetica; 
background-color: #EAEAEA; color: #666666;
}

header {
background-position: right; 
background-repeat: no-repeat;
text-align: center;
}

h1 {
font-family: courier;
background-color:#00ffff; color: #000000; margin-bottom: 0;
margin-top: 0;
padding-top: 0.5em;
padding-bottom: 0.5em;
letter-spacing: 0.25em;
text-align: center;
}

h2 {
font-family: courier;
text-align: center;
background-color: #00ffff; color: #000000;
font-weight: bold;
text-shadow: 1px 1px #CCCCCC;
}


nav {
font-weight: bold;
padding: 0;
font-size: 120%;
text-align: center;
font-family: courier;
}





nav a {
text-decoration: none;
text-align: center;
}


footer {
font-size: 75%;
font-style: italic;
text-align: center;
font-family: Georgia;
padding: 2em;
background-color: #053EA8;
}

#contact {
font-size: 90%;
}



main {
padding: 1px 20px 20px 30px;
display: block;
background-color: #053EA8;
overflow: auto;
text-align: center;
color: #FFFFFF;
}

.dredd {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
	height: 400px;
}

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

table {border: 3px solid #000000; border-collapse: collapse;}
td, th {padding: 0.5em; border: 3px solid #000000;}
td {text-align: center;}
.text {text-align: left;}





* { box-sizing: border-box; }



a:link { color: #5C7FA3;
text-decoration: none;}

a:visited { color: #344873; }

a:hover { color: #A52A2A; }

header:link { color: #FFFFFF; }

header:visited { color: #FFFFFF; }

header:hover { color: #90C7E3; }

nav li {
border-bottom: 1px solid dark blue;
}

@media (min-width: 600px) {
	
form {width: 60%; display: grid; grid-template-columns: 6em 1fr;
grid-gap: 1em;  grid-template-rows: auto;}

input[type="submit"] { grid-column: 2 / 3; width: 9em;}

nav ul {display: flex;
justify-content: space-around;}

nav li {border-bottom: none;}

section {padding-left: 2em;
padding-right: 2em;}

.content main {display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;}

h2 {grid-row: 1/2; grid-column: 1/5;}

section {grid-row: 2/3; grid-column: auto;}

#special {grid-row: auto; grid-column: 1/5;}

footer {grid-row: auto; grid-column: 1/5;}
}



@media (min-width: 1024px) {
nav ul {flex-direction: column;
padding-top: 1em;}

nav {text-align: left;
padding-left: 1em;}


header {grid-row: 1/2; grid-column: 1/3;}
nav {grid-row: 2/5; grid-column: 1/2;}
div {grid-row: 2/3; grid-column: 2/3;}
main {grid-row: 3/4; grid-column: 2/3;}
footer {grid-row: 4/5; grid-column: 2/3;}
}