body {
  padding: 0 5%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 100%;
  background-color: #284450;
  color: #222;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: Gill Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  color: #284450;
}

h1 {
  font-weight: 200;
  text-transform: uppercase;
  font-size: 3em;
  line-height: 1em;
  margin-bottom: 0;
}

a:link,
a:visited {
  color: #284450;
}

a:hover,
a:active {
  color: #515a9a;
}

ul {
  padding-left: 1.5em;
}

li {
  margin: 0.75em 0;
  color: #284450;
}

h1, .by, .available, .foreword {
  text-align: center;
}

.by {
  font-family: Georgia, serif;
  font-style: italic;
  color: #6d5172;
}

footer p, .foreword {
  font-size: .625em;
  text-transform: uppercase;
  letter-spacing: 3px;
}

h2 {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#page {
  max-width: 50em;
  margin: 0 auto;
  background: white;
  padding: 0 1em;
}

.available {
  background-color: #ffe49f;
  margin: 2em -1em;
  padding: 1px 1em 1em;
}

.announce {
  background-color: #6d5172;
  color: #ffe49f;
  text-align: center;
  padding: 1em;
}
.announce a {
  color: white;
  text-decoration: none;
  border-bottom: 1px solid white;
}
.announce a:hover {
  background-color: #f55832;
}

.announce,
footer {
  margin: 0 -1em;
}

figure {
  text-align: center;
}

figcaption {
  display: none;
}

footer {
  margin-top: 4em;
  padding: 1px 5%;
  background-color: #515a9a;
  color: white;
}

@media screen and (min-width: 40em) {
  #page {
    padding: 0 5em;
  }

  .announce, .available, footer {
    margin-left: -5em;
    margin-right: -5em;
  }
}
@media screen and (min-width: 60em) {
  #page {
    padding: 0 10em;
  }

  .announce, .available, footer {
    margin-left: -10em;
    margin-right: -10em;
  }
}