@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"

#home-view
  
  h1
    text-align: center
    margin-top: 0
    
  .game-mode-wrapper
    position: relative
    margin-bottom: 60px
    
    img
      display: block
      margin: 0 auto
      @include transition(box-shadow .50s ease-in-out)
      border-radius: 11px

    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 .25s ease-in-out)
          
    &:hover div, &.hovered div
      color: lighten($yellow, 20%)
    &:hover img, &.hovered img
      filter: brightness(1.2)
      -webkit-filter: brightness(1.2)
      box-shadow: 0 0 15px black

    .code-language-logo
      background-color: transparent
      background-repeat: no-repeat
      position: absolute
      right: 35px
      top: 15px
      width: 50px
      height: 50px

      &.inverted
        filter: invert(100%)
        -webkit-filter: invert(100%)
  
@media only screen and (max-width: 768px)
  #home-view
    #site-slogan
      font-size: 30px
      margin-bottom: 30px
    .game-mode-wrapper
      width: 100%
      img
        width: 100%
      .play-text
        position: absolute
        right: 15px
        bottom: -15px
        color: $yellow
        font-size: 50px
        font-family: Bangers
        @include transition(color .10s linear)
     
  h1
    text-align: center
    margin-top: 0