header
{
font-family:'Baumans', cursive;
color:#191970;
background:#B38B6D;
}

body
{
font-family:'Open Sans', sans-serif;
background:#D2B48C;
color:#191970;
max-width:100em;
min-width:20em;
}
footer
{
clear:both;
}
figure
{
float:left;
margin-right:1em;
display:inline-block;
vertical-align:top;
}
figcaption
{
line-height:2em;
}
h1, h2
{
  padding: 1rem;
  background: #B38B6D;
  font-family: 'Baumans', cursive;
}
p
{
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  text-align: justify;
}

a:link {
  color:#191970;
}
a:visited {
  color:#122C34;
}
a:focus {
  color:#191970;
  background:#B38B6D;
}
a:hover {
  color:#191970;
  background:#B38B6D;
}
a:active {
  color:#6D213C;
  background:#B38B6D;
} 
article
{
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  align-items: stretch;
  border: 2px solid #122C34;
  padding: 0.2rem;
}
article h2 {
  flex: 1 1 90%;
}
article p, article a {
  border: 2px solid #6D213C;
  padding: 0.2rem;
  margin: 0rem;
}
article img {
  height: auto;
  background: #122C34; 
  padding: 0.2rem;
}
ul {
  border: 2px solid #6D213C;
  padding: 0.2rem;
} 
li {
  border: 2px solid #6D213C;
  padding: 0.2rem;
  margin-left: 1rem;
  margin-right: 1rem;
} 

@media (min-width: 140em)
{
  article
  {
    flex-flow: column wrap;
  }
  article > p {
    flex: 4 1 0%;
  }
  article > a {
    flex: 1 1 0%;
  }
  article > img {
    flex: 2 1 0%;
  }
}
@media (min-width: 40em) {
  ul {
    display: flex;
    flex-flow: row wrap;
  }
  li {
    flex: 1 1 0%;
    min-width: 16em;
  }
}
@media (min-width: 160em)
{
  article
  {
    flex-flow: row wrap;
  }
  article > p, article > a {
    width: 33%;
  }
  article > img {
    max-width: 33%;
  }
  ul {
    display: flex;
    flex-flow: row wrap;
  }
  li {
    flex: 1 1 0%;
  }
}