/* === Breakpoints === */
body {
  margin: 0; }

article {
  margin: 0 auto;
  max-width: 65em; }

.main {
  background-color: #FFFFFF; }
  .main div {
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 3em; }
  .main div.title aside {
    background-color: #594446;
    margin-bottom: -3em;
    margin-left: -5%;
    margin-right: -5%;
    margin-top: 3em;
    padding: 2em 5%;
    text-align: center; }
  aside .main div.title {
    background-position: top; }

article p {
  font-size: 1.3em; }

article code {
  border-radius: 0.315em;
  border: 1px solid #ccc;
  padding: 0 0.3em 0.040em;
  font-size: 0.9em; }

article ul {
  font-size: 1.1em;
  line-height: 1.5;
  list-style-type: square;
  padding-left: 1em; }

@media (min-width: 1200px) {
  body {
    margin: 8px; }
  .main {
    margin-bottom: 2em; }
    .main div:not(.header) {
      padding-left: 20%;
      padding-right: 20%; }
      .main div:not(.header) aside {
        margin-left: -35%;
        margin-right: -35%;
        padding: 2em 20%; } }