html, body
  padding: 0
  margin: 0

  //Use this to smooth some font styles
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  text-rendering: optimizeLegibility

/*
  * Set up the base font size for using rem
  */
html
  font-size: $baseFontSize

  +respond-to-width(1080)
    font-size: 17px

body
  font-family: 'Lato', sans-serif
  font-weight: regular()
  line-height: 1.6
  letter-spacing: 0.4px
  position: relative
  min-height: 100vh
  max-width: 2200px
  margin: auto
  padding: 80px 0 !important
  transition: background-color 0.5s

  &.inProjects
    //background-color: $fontBlack

  +respond-to-width(1370)
    padding: 60px 0 !important

  +respond-to-width-or-height(500, 600)
    padding: 0 !important

*
  box-sizing: border-box
  ::selection
    background: $blue
    color: white

img
  border: none
  display: block

h1, h2, h3, h4, h5, figure
  margin: 0
  font-family: din()
  font-weight: 100

img
  border: none

input, textarea
  font-family: 'Cabin', sans-serif
  +placeholder
    opacity: 1
    +translate3d(0, 0, 0)
    transition: all 0.3s




/* Default content styling
   ===============================*/
.content
  color: $darkGray
  font-size: 0.9rem


  h1, h2
    font-size: 2rem
    line-height: 1.2
    max-width: 580px
    color: $darkBlue
    margin: 0 0 40px

  p
    margin: 1rem 0

  ul, ol
    padding-left: 20px
    list-style: none

    li
      position: relative
      padding-left: 20px
      //font-size: 0.8rem
      &:before
        content: '•'
        position: absolute
        color: $darkBlue
        font-size: 1.2rem
        line-height: 1
        left: -20px

  ol
    // Custom List styling for '1.'
    counter-reset: ol-counter
    li
      &:before
        counter-increment: ol-counter
        content: counter(ol-counter)'.'
        font-size: 1rem
        top: 2px

  p
    strong
      font-weight: 900

  a
    color: $blue
    text-decoration: none
    transition: color 0.3s
    &:hover
      color: darken($blue, 15%)