@import compass/css3

html, body
    height: 100%
    overflow: hidden

body
    margin: 0
    background-color: rgb(98, 196, 98)
    +background-image(linear-gradient(-45deg, rgb(98, 196, 98), rgb(117, 190, 170)))
    font-family: "proxima-nova", "Helvetica Neue", sans-serif

.button
    display: inline-block
    border: 2px solid #fff
    color: #fff
    padding: 1em 1.25em
    font-weight: 500
    text-transform: uppercase
    letter-spacing: 3px
    text-decoration: none
    cursor: pointer
    width: 140px
    font-size: .8em
    line-height: 1.3em

    &.dark
        background: #fff
        color: rgb(117, 190, 170)

        @media (max-width: 568px)
            display: none

.hero-scroll
    height: 100%
    width: 100%
    -webkit-overflow-scrolling: touch
    overflow: auto

.hero-outer
    +box-sizing(border-box)
    padding: 20px 0
    height: 100%
    width: 100%
    display: table

    .hero-inner
        display: table-cell
        text-align: center
        vertical-align: middle

        h1, h2, h3, p
            margin: 0 0 20px
            line-height: 1
            color: #fff
            font-weight: normal

        h3
            font-size: 1.3em
            padding-top: 13px

        h1
            padding-top: 10px

        > *
            +transition(opacity .4s)
            opacity: 0.3

            body:not(.shepherd-active) &
                opacity: 1

        .shepherd-target.shepherd-enabled
            opacity: 1

        pre
            width: 540px
            margin: 0 auto 1em

            @media (max-width: 600px)
                width: 340px

            @media (max-width: 360px)
                width: 200px

        .hero-followup
            padding-top: 20px

.shepherd-element.shepherd-theme-arrows

    &.shepherd-transparent-text .shepherd-text
        color: #3b744f

    .shepherd-content
        width: 400px
        max-width: 100%

        a
            color: inherit

        footer .shepherd-buttons li .shepherd-button
            background: #55a892

pre
    line-height: 1.4em
    border: 1px solid rgba(0, 0, 0, 0.15)