.container {

margin: 0 auto;
max-width: 50em;
width: 80%;

}

main, footer, .nav-container {

display: block;
margin: 0 auto;
max-width: 36em;
width: 80%;

}

.nav {

box-shadow: 0 2px 2px -2px $shadow-color;
overflow: auto;

&-container {
  margin: 1rem auto;
  position: relative;
  text-align: center;
}

&-title {
  @include transition(all .2s ease-out);
  color: $default-color;
  display: inline-block;
  margin: 0;
  padding-right: .2rem;

  &:hover,
  &:focus {
    opacity: .6;
  }
}

ul {
  list-style-type: none;
  margin: 1rem 0 0;
  padding: 0;
  text-align: center;
}

li {
  @include transition(all .2s ease-out);
  color: $default-color;
  display: inline-block;
  opacity: .6;
  padding: 0 1rem 0 0;

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

  &:hover,
  &:focus {
    opacity: 1;
  }
}

a {
  color: $default-color;
  font-family: $sans-serif;
}

}

@media (min-width: 37.5em) {

.nav {
  &-container {
    text-align: left;
  }

  ul {
    bottom: 0;
    position: absolute;
    right: 0;
  }
}

}

footer {

font-family: $serif-secondary;
padding: 2rem 0;
text-align: center;

span {
  color: $default-color;
  font-size: .8rem;
}

}

.share-bar {

text-align: center;

}

.share-bar a {

margin: 0 0.15em;
color: $default-color;
font-size: 1.6em;

}

.share-bar a:hover {

color: $accent-color;

}