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

#home-view
  
  h1
    text-align: center
    margin-top: 0
    
  #front-screenshot
    margin: 15px 0 40px 150px

  #trailer-wrapper
    position: relative
    margin: 0 auto 40px
    width: 950px
    iframe
      display: block
      margin: 0 auto
      position: relative
      top: 8px
    img
      position: absolute
      left: 0
      top: 0
      pointer-events: none

  .game-mode-wrapper
    position: relative
    margin-bottom: 60px
    
    img
      display: block
      margin: 0 auto

    text-shadow: 2px 2px 5px black
    
    h3
      color: $yellow
      position: absolute
      top: 10px
      left: 40px
      font-size: 70px
      margin-top: 0
      
    h4
      color: #e8d9c5
      position: absolute
      top: 75px
      left: 140px
      font-size: 30px
      margin-top: 0
      
    .play-text
      position: absolute
      right: 45px
      bottom: -25px
      color: $yellow
      font-size: 90px
      font-family: Bangers
      @include transition(color .10s linear)
          
    &:hover div
      color: lighten($yellow, 20%)
    &:hover img
      filter: brightness(1.2)
      -webkit-filter: brightness(1.2)
      box-shadow: 0 0 5px black
  
#multiplayer-launch-modal
  .modal-dialog
    width: 700px

  .modal-header
    text-align: center

  .modal-body
    padding-bottom: 0px
 
  .modal-footer
    padding-top: 0px

  .multiplayer-launch-wrapper
    position: relative
    margin: 0 auto 30px
    iframe
      display: block
      margin: 0 auto
      position: relative
      top: 8px
    img
      position: absolute
      left: -7px
      top: -3px
      width: 660px
      height: 382px
      pointer-events: none
#mobile-trailer-wrapper
  display: none
  
@media only screen and (max-width: 800px)
  #home-view
    #site-slogan
      font-size: 30px
    #trailer-wrapper 
      display: none
    #front-screenshot
      display: none
    #mobile-trailer-wrapper
      display: inline-block
      
      width: 100%
      iframe
        display: block
        margin: 0 auto
    .game-mode-wrapper
      width: 100%
      img
        width: 100%
      .play-text
        position: absolute
        right: 45px
        bottom: 0px
        color: $yellow
        font-size: 50px
        font-family: Bangers
        @include transition(color .10s linear)
        

    
     
  h1
    text-align: center
    margin-top: 0