/***** General Styling *****/

html {
  margin: 0 auto;
  padding: 0;
  height: 100%;
}
body {
  height: 100%;
  /* 11pt ~ 15px ~ 0.9375em */
  /* 10pt ~ 13px ~ 0.8125em */
  font: 300 12pt "Open Sans", sans-serif;
  margin: 1% 5%;
  padding: 0;
  line-height: 1.4;
}
h1, h2, h3 {
  font-family: "Open Sans Condensed";
  font-weight: 300;
  line-height: 1;
  min-height: 1em;
}
h1 {
  font-size: 400%;
  margin: 0.5em 0;
}
h2 {
  font-size: 200%;
  margin: 0.5em 0;
}
h3 {
  font-size: 160%;
  line-height: 1.6;
  min-height: 1.25em;
  margin: 1.25em 0 0.625em;
}
h3:first-child {
  margin: 0.625em 0;
}
b, dt, strong {
  font-weight: 600;
}
ol, ul {
  margin: 0;
}
dl {
  margin: 2em 0;
}
dt {
  margin: 0;
}
dd {
  line-height: 1.2;
  margin: 0.5em 0;
}
li {
  list-style-type: circle;
}


/***** Layout *****/

header, main, article, aside {
  display: block;
  box-sizing: border-box;
}
header, main {
  position: relative;
}
footer {
  padding: 1em 0 3em;
}

article, aside {
  padding: 1em 0;
}
article {
  width: 60%;
  padding-right: 5%;
}
aside {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  padding-left: 5%;
}


header h2 {
  margin: 15% auto;
  text-align: center;
}

/***** Overrides *****/

@media (max-width: 640px) {
  article, aside {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    border-right: none;
  }
  aside {
    position: static;
    margin-top: 2em;
    border-top: 1px solid #ccc;
  }
}