body {

// Make sure body takes all the available vertical space
display: flex;
flex-flow: column nowrap;
min-height: 100vh;

}

header {

display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: baseline;

@media screen and (max-width: 767px) {
  flex-flow: column nowrap;
  align-items: flex-start;
  overflow-x: hidden;
}

nav {
  ul {
    list-style-type: none;
    padding: 0;

    // Show the list items horizontally
    // with some spacing inbetween
    list-style: none;
    li {
      display: inline-block;
      margin: 0 0.8rem;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

padding: 1em 1em 2em 1em;

}

main {

display: block;
// Take all the extra vertical space if any.
flex: 1;
// Use as much horizontal space as possible and centered.
width: 100%;
margin: 0 auto;

// Don't let the 100% width overflow on narrower devices.
box-sizing: border-box;
padding: 0 1em;

.post-list {
  list-style-type: none;
  padding: 0;

  li {
    margin-bottom: 2em;
  }
}

}

footer {

padding: 2em 1em 1em 1em;

display: flex;
flex-flow: row wrap;
justify-content: space-between;

ul {
  list-style-type: none;
  padding: 0;
}

}