@require '_input'
@require '_button'
linkColor = #3090de
textColor = #444

body, html
  margin 0
  font 16px 'proxima-nova', 'Helvetica Neue', helvetica, arial, sans-serif
  height 100%
  width 100%
  font-weight 400
  color textColor
  font-smoothing antialiased

h1, h2, h3
  margin 0
  margin-bottom 0.5em
  text-shadow 1px 1px 0 rgba(255, 255, 255, 0.2)

a
  color linkColor
  text-decoration none
  &:hover
    text-decoration underline

section
  max-width 800px
  margin auto
  padding 2em 0

.jumbo
  width 100%
  height 90%
  background url('../images/jumbo.jpg')
  background-size cover
  display table

  div
    display table-cell
    vertical-align middle
    text-align center
    padding 0 1em
    h1
      max-width 800px
      margin auto

.invite-form
  position relative
  .btn
    width 40px
    height 32px
    background linkColor
    padding 0
    position absolute
    right 8px
    top 7px

    border-bottom 2px solid #117280
    color rgba(255, 255, 255, 0.5)
    &:active
      border-bottom 0

@keyframes drop
  0%
    transform rotateX(90deg)
  30%
    transform rotateX(45deg)
  45%
    transform rotateX(0deg)
  60%
    transform rotateX(45deg)
  100%
    transform rotateX(0deg)

.invite-form--message
  background linkColor
  color #fff
  height 40px
  line-height 40px
  padding 0 0.5em
  margin-top 4px
  transform rotateX(0deg)
  transform-origin 100% 0
  animation drop 0.6s linear

.invite-form.has-error
  .invite-form--message
    background rgb(226, 33, 112)

.form-container
  margin auto
  padding 0 2em
  box-sizing border-box
  p
    text-align center
    line-height 1.7em

footer
  font-size 1.5em
  padding 0.5em
  i
    margin 0 0.30em
    font-size 1.5em
    color textColor