@import "bootstrap/mixins"
@import "bootstrap/variables"

#home-view
  
  h1, h2
    text-align: center
    
  #trailer-wrapper object
    display: block
    margin: 0 auto

  .game-mode-wrapper
    position: relative
    margin-bottom: 60px
    
    img
      display: block
      margin: 0 auto
      
    h3
      color: $yellow
      position: absolute
      top: 10px
      left: 40px
      font-size: 70px
      margin-top: 0
      text-shadow: 2px 2px 5px black
      
    h4
      color: #e8d9c5
      position: absolute
      top: 75px
      left: 140px
      font-size: 30px
      margin-top: 0
      text-shadow: 2px 2px 5px black
      
    .play-button
      text-align: center
      position: absolute
      right: 40px
      bottom: -30px
      width: 200px
      height: 100px

      div, img
        color: $yellow
        position: absolute
        top: 0
        bottom: 0
        left: 0
        right: 0
        width: 100%
        height: 100%
        font-size: 50px
        font-family: Bangers
        line-height: 100px
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black
        @include transition(color .10s linear)
          
    &:hover div
      color: lighten($yellow, 20%)
    &:hover img
      filter: brightness(1.1)
      -webkit-filter: brightness(1.1)