$primary-color: yellow
$primary-color-highlight: darken($primary-color, 10%)

$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)

$nav-height: 60px

body
  padding-top: $nav-height
  background: lightgrey

.container
  max-width: 1100px
  padding: 20px 30px

#main-nav
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: $nav-height
  background: #212121
  color: #eee
  font-size: 2.75rem
  box-shadow: $box-shadow-1

  .nav-left
    float: left

  .nav-menu
    list-style: none
    padding-left: 15px

    li
      display: inline-block
      margin-top: 6px
      margin-left: 15px

  .nav-link a
    color: $primary-color
    transition: all 230ms ease-in-out

    &:hover
      color: $primary-color-highlight

#main-wrapper
  margin-top: 25px
  background: white