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

$nav-bar-height: 60px;

body{
  padding: $nav-bar-height 0 0;
  background: lightgrey;
}

.container.fluid{
  max-width: 100%;
}

#nav-bar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $nav-bar-height;
  background: #212121;
  box-shadow: 0 2px 1px rgba(0, 0, 0, .25);
  color: white;

  .nav-bar-left{
    float: left;
  }

  ul{
    list-style: none;

    li{
      display: inline-block;
    }
  }

  .site-logo,
  .nav-link a{
    padding: 9px 12px;
    font-size: 2.5rem;
  }

  .site-logo{
    font-weight: bold;
  }

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

    &:hover{
      color: $primary-color-highlight;
    }
  }
}

#main-content{
  margin-top: 25px;
  padding: 15px 25px;
  background: white;
}