$max-width: 800px !default;
$pad-min: 8.5% !default;

header[role=banner] {
  padding: 0.52em 0 0.42em;
  h1 {
    font-size: 3.43em;
    margin: 0;
    a {
      color: white;
      line-height: 0;
      text-decoration: none;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      span {
        width: 0;
        font-size: 0;
        overflow: hidden;
      }
    }
  }
}

article img {
  max-width: 100%;
  height: auto;
}

article img.left {
  float: left;
  margin-right: 1em;
}

article img.right {
  float: right;
  margin-left: 1em;
}

#content, .container, footer {
  padding: 0 $pad-min;
  margin: 0 auto;
  max-width: $max-width;
}

nav[role=navigation] {
  font-size: 1em;
}

@media only screen and (min-width: 450px) {
  body {
    font-size: 110%;
  }
  header[role=banner] h1 img {
    height: 50px;
  }
}

@media only screen and (min-width: 650px) {
  body {
    font-size: 125%;
  }
  header[role=banner] h1 img {
    height: 60px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    font-size: 135%;
  }
  header[role=banner] h1 img {
    height: 80px;
  }
}

@media only screen and (min-width: 892px) {
  body {
    font-size: 145%;
  }
}