html, body, div, span, h1, h2, h3, p, a {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
* {box-sizing: border-box;}

body {font-family: verdana; font-size: 100%; color: #000; background: #fff;}
#main {margin: 0 auto; padding: 0px; width: 100%; border-top: 20px solid #369;}
.flexy {display: flex; flex-wrap: wrap;}
.flexy > div {margin: 0px auto; width: 50%;}

h1 {padding: 16px 0px; font: normal 1.5em verdana; text-align: left; color: #369;}
h2 {padding: 8px 0px; font: normal 1.3em verdana; text-align: left; color: #369;}
h3 {padding: 8px 0px; font: italic 1em verdana; text-align: left; color: #369;}
h4 {padding: 0px; font: normal 1em verdana; text-align: center; color: #369;}

p {margin: 0; padding: 4px 0; text-align: left; font: normal 1em;}
p.poem {margin: 0; padding: 4px 0; text-align: left; font: normal 1em; line-height: 1.5em;}

a:link, a:visited, a:hover, a:active {padding: 0px; text-decoration: none; color: #000;}
a:hover {color: #f00;}

img {max-width: 100%;}
hr {color: #369; background: #369; width: 100%; height: 1px; border: 0px;}

/* response -> when screen < 700px wide, the two columns stack on top of each other 
@media screen and (max-width: 700px) {.flexy, .uno {flex-direction: column; .nav a: border: none;}} */

@media screen and (max-width: 700px) {.flexy > div {margin: 0px auto; width: 90%;}