body {
  margin:0;
  padding:0;
  font-family:'Aldrich';
  background:#fbfbfb;
}

header {
  background:#4d7080;
  width:100%;
  padding:40px 0;
  color:#fff;
  text-align:center;
}

a {
  text-decoration:none;
  color:inherit;
}

nav ul {
  background:#4a6774;
  overflow:hidden;
  color:white;
  padding:0;
  text-align:center;
  margin:0;
  -webkit-transition:max-height 0.9s;
  -ms-transition:max-height 0.9s;
  -moz-transition:max-height 0.9s;
  -o-transition:max-height 0.9s;
  transition:max-height 0.9s;
}

nav ul li {
  display:inline-block;
  padding:20px;
}

nav ul li:hover {
  background:#405d6a;
}

section {
  line-height:1.5em;
  font-size:0.9em;
  padding:40px;
  width:75%;
  margin:auto;
}

.handle {
  width:100%;
  background:#2f4752;
  text-align:left;
  box-sizing:border-box;
  padding:15px 10px;
  cursor:pointer;
  color:white;
  display:none;
}

i {
  display:none;
}

@media screen and (max-width:580px) {
  nav ul {
    max-height:0;
  }
}

@media screen and (max-width:580px) {
  .showing {
    max-height:20em;
  }
}

@media screen and (max-width:580px) {
  nav ul li {
    box-sizing:border-box;
    width:100%;
    padding:15px;
    text-align:left;
  }
}

@media screen and (max-width:580px) {
  .handle {
    display:block;
  }
}

@media screen and (max-width:580px) {
  i {
    display:block;
  }
}