/* null margins and padding to give good cross-browser baseline */
html, body, header, main, section, 
h1, h2, p, img {
 margin:0;
 padding:0;
}

img,  fieldset {
 border:none;
}

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

hr {
 display:none;
 /*
  HR in my code are for semantic breaks in topic/section,  NOT
  style/presenation,  so hide them from screen.css users
 */
}

html, body {
 height:100%;
}

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

body > header,
body > footer {
 flex:0 0 auto;
 padding:1em;
}

body > header,
body > footer {
 text-align:center;
}

main {
 flex:1 0 auto;
 padding:0 1em;
}

main > * {
 max-width:48em;
 margin:0 auto;
}

h1 {
 text-shadow:2px 1px 0 #000;
}

h2 {
 padding-bottom:0.5em;
}

p {
 padding-bottom:1em;
} 

a {
 color:#FFFFFF;
}

.url {
 margin-top:-1em;
 padding-bottom:1em;
}

img { 
 padding-bottom:0.5em;
}