@import "_variables"

body
  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

.post-info
  color: #999
  font-style: italic

// this wrapper is only used to hide the footer
#wrapper
  position: relative
  z-index: 10
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  background: white
  box-shadow: 0px 80px 50px -30px rgba(0, 0, 0, 0.15)

// header

#header-box
  position: relative
  z-index: 2
  height: 500px
  background:
    image: url(<%= asset_data_uri 'bg-banner.jpg' %>)
    size: auto 600px
    position: top center
    attachment: fixed
  overflow: hidden

#header-logo
  height: 350px
  width: 350px
  background:
    image: url(<%= asset_data_uri '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
    text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.45)

#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
    border-radius: 8px
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2)

  .post-title
    margin-bottom: 3px
    text-decoration: underline

  .post-body
    margin-bottom: 0

#post-header
  #post-author
    color: #999
    font-style: italic

// 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
