html,body,div,p,
h1,h2,h3,h4,h5,h6,
ul,ol,li,
dl,dt,dd,
form,fieldset,caption,
table,tr,td,th,
address,blockquote,img {
    margin: 0;
    padding: 0;
 }

img, fieldset {
    border: none;
 }

*, *:after, *:before {
    box-sizing: border-box;
 }

hr {
    display: none;
 }

html, body {
    height: 100%;
 }

body, button, input, table, textarea, select {
    font: normal 1em/1.5 arial,helvetica,sans-serif;
 }

pre, code, tt {
    font:normal 1.1em/1.5em consolas,monospace;
    word-break: break-word;
 }

legend {
    float: left;
    width: 100%;
 }

body {
    display: flex;
    flex-direction: column;
    font: normal 1em / 1.5em  arial, helvetica, sans-serif;
    background-color: #374756;
 }

body > header,
body > footer {
    flex: 0 0 auto;
    width: 100%;
    max-width: 77.5em;
    margin: auto;
    padding: 1em;
 }

header {
    background-color: #00005e;	
 }

h1 {
    line-height: 1.9em;
    font-size: 2.5em;
    font-weight: normal;
    color: #fff;
    text-align: center;
 }

header div {
    padding: 0 0 0.5em 1.25em;
    font-family: verdana;
    font-size: 1em;	
    color: #fc0;
 }

main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 77.5em;
    margin: auto;
    padding: 1em;
    background: #fff;
 }

main > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    list-style: none;
}

main > ul li {
    width: 24%;
    margin-bottom: 0.5em;
    border: 1px solid #999;
 }

main > ul span {
    display: block;
    background-color: #ff0;
    text-align: center;
 }

main > ul img {
    display: block;
    width: 100%;
    height: auto;
 }

main > form {
    max-width: 20em;
    padding-top: 4em;
    margin: auto;
 }

main > form label,
main > form input {
    display: block;
    margin: 0.5em 0;
 }

footer {
    background-color: #4f4f4f;
    font-family: verdana, sans-serif;
    color: #fff;
    text-align: center;
 }

@media ( max-width: 45em ) {
  main > ul li {
    width: 48%; 
  } 
 }

 @media ( max-width: 25em ) {
  main > ul li {
    width: 98%; 
  } 
 }