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: block
    margin: 1em auto 0

.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
      pointer-events: none

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

    .shepherd-target.shepherd-enabled
      opacity: 1
      pointer-events: auto

    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)
