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

#home-view

  #hour-of-code
    top: 632px
    height: 190px
    width: 400px
    padding: 15px
    border: 0
    background: transparent url(/images/pages/play/level-info-background.png) no-repeat center center
    background-size: 100% 100%

    @media screen and ( max-height: 800px )
      top: 382px
    h1
      color: rgb(255,253,149)
      text-shadow: 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black
    .btn-class-code
      float: left
      margin-left: 10px
      margin-top: 10px
    .btn-enter
      float: right
      margin-right: 10px
      margin-top: 10px

  #kids-coding-container
    $coding-image-size: 272px
    position: relative
    width: 960px + $coding-image-size
    margin: 0px auto

    @media screen and ( max-width: 1279px )
      display: none

    .kid-coding
      position: absolute
      z-index: 1
      top: -57px
      @media screen and ( max-height: 800px )
        top: 50px

      &#boy-coding
        left: -$coding-image-size / 2

      &#girl-coding
        right: -$coding-image-size / 2

  #spacer
    height: 626px
    @media screen and ( max-height: 800px )
      height: 510px

  #play-button, #or-ipad, #apple-store-button, #slogan, .alert, #news, #hour-of-code, #alternate-play-button
    text-align: center
    text-transform: uppercase
    font-weight: bold
    position: absolute
    margin-right: auto
    margin-left: auto
    left: 0
    right: 0
    font-weight: bold

  #play-button
    text-align: center
    padding-top: 170px
    font-size: 50px
    color: rgb(255,253,149)
    text-shadow: 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black, 0 0 6px black,0 0 6px black,0 0 6px black,0 0 6px black
    top: 308px
    width: 218px
    height: 219px
    @media screen and ( max-height: 800px )
      top: 78px

    background-image: url(/images/pages/home/play_button.png)
    background-position: 0 219px

    &:hover
      background-position: 0 0
      color: rgb(230,180,75)
      text-decoration: none

  #or-ipad
    top: 540px
    color: rgb(119,101,84)
    font-size: 17px
    max-width: 211px

    @media screen and ( max-height: 800px )
      top: 310px

  #alternate-play-button
    top: 570px

    @media screen and ( max-height: 800px )
      top: 330px

  #apple-store-button
    top: 593px
    height: 63px

    @media screen and ( max-height: 800px )
      top: 363px

  #news
    background: rgba(0, 0, 0, 0.75)
    border-radius: 20px
    box-shadow: 0 0 30px rgb(149,255,253)
    top: 531px
    height: 132px
    width: 350px
    padding: 15px
    font-size: 28px
    line-height: 32px
    @include rotate(-10deg)

    a
      color: rgb(149,255,253)

      &:hover
        color: rgb(75,230,180)

    @media screen and ( max-height: 800px )
      top: 301px

  #slogan
    top: 681px
    height: 132px
    width: 276px
    padding: 15px
    font-size: 28px
    line-height: 32px
    color: rgb(50,40,31)

    @media screen and ( max-height: 800px )
      top: 451px

  .alert
    top: 213px
    border: 5px solid darkred

body[lang='ru'], body[lang^='de'], body[lang^='pt-BR'], body[lang='pl'], body[lang='tr'], body[lang^='nl'], body[lang^='cs'], body[lang^='sv'], body[lang^='el'], body[lang^='hu'], body[lang^='bg']
  #home-view #slogan
    font-size: 22px
    line-height: 23px