index.sass

$primary-color: #fff
$accent-color: #0d0d0d
$headline-font: 'Roboto', sans-serif
$para-font: 'Raleway', sans-serif

@mixin centerer
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)

@mixin custom-background
  background-size: cover
  background-attachment: fixed
  background-position: top
  background-repeat: no-repeat

.row-center
  @include centerer

.header
  text-align: center
  font-family: $headline-font
  text-transform: uppercase
  background-color: $accent-color
  color: $primary-color
  height: auto
  text-align: center

  h1
    font-weight: 500
    font-size: 3em
    border-style: solid
    border-width: 0 0 1px 0
    border-color: $primary-color
    display: inline-block
    margin-top: 60px

  h2
    font-weight: 100
    letter-spacing: 4px
    font-size: 2em
    display: block
    padding-bottom: 60px
    margin: 0

#profile-img
  border-style: solid
  border-width: 3px
  border-color: $accent-color
  border-radius: 50%
  height: 100%
  width: 100%
  margin-top: -55px

.hero
  min-height: 650px
  padding-top: 120px
  color: $accent-color
  background-image: url('background.jpeg')
  @include custom-background

  .row
    width: 66%
    margin: 0 auto
    padding-bottom: 64px

  h1
    color: $accent-color
    text-transform: uppercase
    font-family: $headline-font
    font-weight: 100

  p
    display: inline
    float: none
    vertical-align: middle
    font-family: $para-font
    font-weight: 300
    font-size: 1.2em
    color: $accent-color

    a
      color: $accent-color
      border-style: dashed
      border-width: 0 0 1px 0
      border-color: $accent-color
    a:hover
      text-decoration: none
      border-color: $primary-color

.skills
  min-height: 500px
  background-color: $accent-color
  width: 100%
  color: $primary-color
  text-align: center
  position: relative

  h1
    //text-transform: uppercase
    font-family: $headline-font
    letter-spacing: 4px

  p
    font-size: 1.2em
    font-family: $para-font

.contact
  height: 650px
  background-image: url('background-2.jpeg')
  @include custom-background
  position: relative

  .row
    width: 50%

    .col-md-4
      text-align: center
      font-size: 72px
i
  color: $accent-color