@import "_variables"

body
  height: auto
  font-family: "Gill Sans", sans-serif
  font-size: 2rem
  margin: 0
  padding-bottom: $footer-height

a
  color: $color-primary
  font-weight: 500
  text-decoration: none
  transition: color 300ms ease-in-out
  &:hover
    color: $color-primary-hover

hr
  margin-top: 35px
  margin-bottom: 35px

.u-text-center
  text-align: center

// this wrapper is only used to hide the footer
#wrapper
  position: relative
  z-index: 10
  width: 100%
  margin: 0
  padding: 0
  background: white

// header

#header-box
  position: relative
  z-index: 2
  height: 500px
  background:
    image: url(/assets/images/bg-banner.jpg)
    size: auto 600px
    position: top center
    attachment: fixed
  overflow: hidden

#header-logo
  height: 350px
  width: 350px
  background:
    image: url(/assets/images/bg-icon.png)
    position: center
    repeat: no-repeat
    size: contain
  position: absolute
  top: 40px
  left: 50%
  transform: translateX(-50%)

  h1
    margin-top: calc(100% + 25px)
    color: white
    font:
      weight: bold
    text-align: center

#navigation
  width: 100%
  margin-top: 40px
  margin-bottom: 40px
  text-align: center

  ul
    list-style: none

    li
      display: inline-block
      margin: 0
      padding: 0
      border-radius: 10px
      font-size: 3rem
      transition: all 300ms ease-in-out
      &:hover
        background: rgba(#000000, 0.1)
        margin-left: 25px
        margin-right: 25px
        transform: scale(1.1)
      a
        padding: 20px 30px
        text-decoration: underline

#main-content
  padding-bottom: 40px

// home page styles

.youtube-section
  @media only screen and (min-device-width: 960px)
    .row
      position: relative
      .video-card:nth-child(1)
        transform: translate(100px, 20px)
      .video-card:nth-child(2)
        position: relative
        z-index: 20
      .video-card:nth-child(3)
        transform: translate(-100px, 20px)

  .video-card a
    display: block
    margin-bottom: 25px
    padding: 15px 20px 0
    background: white
    border: 2px solid #bbb

    img, p
      transition: all 300ms ease-in-out

    &:hover
      img
        transform: scale(1.1)

      p
        transform: translate(20px, 10px) scale(1.1)

// Blog posts page

#post-list
  list-style: none

  li
    padding: 15px 20px 0
    border: 2px solid #bbb

  .post-title
    margin-bottom: 3px

  .post-info
    color: #999

  .post-body
    margin-bottom: 0

// footer section

#footer
  box-sizing: border-box
  position: fixed
  z-index: -1
  bottom: 0
  width: 100%
  height: $footer-height
  padding-top: 35px
  background: #212121
  color: white