html, body
  width: 100%
  position: relative
  background: $background
  color: $text-primary
  font-family: $font-family
  font-size: $font-size
  font-smoothing: antialiased
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -webkit-tap-highlight-color: transparent
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased

  a
    color: $green
    text-decoration: none

::selection
  color: $white
  background: $green

.main
  width: 100%
  margin: 0 0 80px 0

  h1, h2, h3, h4, h5, h6
    display: block
    font-family: $font-family-roboto
    margin: 0 20px 0 0

  h1
    font-size: 26px
    color: $heading-primary
    font-weight: $weight-semibold

  h2
    font-size: 22px
    color: $heading-secondary
    font-weight: $weight-medium

  h3
    font-size: 16px
    color: $heading-primary
    font-weight: $weight-medium
    text-transform: uppercase

  h4
    font-size: 14px
    color: $heading-light
    font-weight: $weight-medium
    text-transform: uppercase

  h5
    font-size: 12px
    color: $heading-light
    font-weight: $weight-medium
    text-transform: uppercase

    &:hover
      text-decoration: underline
