@include border-box-sizing;

body {
  font-family: 'Fira Sans', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 18px;
  line-height: 1.5;
  background: #253d4c;
}

h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  color: $darkGreen;
}

h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 0;
  padding: 1em 0 0 0;
}

h3,
h4 {
  font-size: 16px;
}

nav {
  font-size: 14px;
}

a {
  color: $blue;

  &:hover,
  &:active,
  &:focus {
    color: darken($blue, 20);
  }
}

.container {
  @include container($total-columns);
  @include show-grid(background);
  padding: 0 $grid-padding;
  position: relative;
}

.content {
  padding: $gutter-width 0 0 0;
}

main {
  background: white;
  color: $charcoal;
  position: relative;
}

.main {
  position: relative;
  z-index: 1; // move to the top of the stacking order
}