body {
  font-family: Helvetica Neue, sans-serif;
  margin: 0;
  padding: 0;
}

#nav {
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10%;
  background: #E4F1FE;
  margin: 0;
  padding: 0;
}

#nav .item {
  position: relative;
  text-align: center;
  width: 15%;
  height: 50%;
  margin: 0;
  margin-left: 2%;

  padding: 0.25%;
  padding-left: 20px;
  background: #313130;
  color: #E4F1FE;
}

#nav .item a {
  text-decoration: none;
  color: #E4F1FE;
}

/* the first span is full sized to make sure the whole parent div is a clickable link */
#nav .item a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  /* fixes overlap error in IE7/8 */
  background-image: url('../img/empty.gif');
}

/* this nested span is necessary to center the text vertically */
#nav .item a span span {
  position: absolute;
  height: 75%;
  top: 25%;
}