%form.login-form
  %input.login-input{placeholder: "E-mail"}
  %input.login-input{placeholder: "Password"}
  %input.login-submit{type: "submit", value: "Login" }

.cloud.cloud--1
  %span.blobb

.cloud.cloud--2
  %span.blobb

.cloud.cloud--3
  %span.blobb

.cloud.cloud--4
  %span.blobb

.cloud.cloud--5
  %span.blobb

@import compass

*
  margin: 0
  padding: 0
  @include box-sizing(border-box)

html
  height: 100%

body
  padding: 40px
  font-size: 100%
  background: #86b2e0
  background: linear-gradient(#6897c9, #8db7e0)
  overflow-x: hidden

@keyframes hover
  0% 
    margin-top: 0px
  50%
    margin-top: -5px
  100%
    margin-top: 0px

.login-form
  margin: 0 auto
  padding: 15px
  max-width: 400px
  background: #fff
  border-radius: 5px
  box-shadow: 0 2px 5px rgba(0,0,0,0.3)
  animation-name: hover
  animation-iteration-count: infinite
  animation-duration: 3s
  
  
.login-input
  display: block
  margin: 0 0 15px
  width: 100%
  padding: 10px 12px
  color: #3c3c3c
  font-size: 1em
  border: 1px solid #ccc
  border-radius: 5px
  box-shadow: inset 0 2px 4px -1px rgba(black, .2)
  &::-webkit-input-placeholder
    color: #bbb
  &:-moz-placeholder
    color: #bbb
  &:-ms-input-placeholder
    color: #bbb
  &:focus
    outline: 0
    border: 1px solid darken(#ccc, 20%)
    box-shadow: inset 0 2px 4px -1px rgba(black, .3)

.login-submit
  padding: 8px 12px
  color: #fff
  font-size: 1em
  background: #60a163
  @include background(linear-gradient(#7ccb80, #60a163))
  box-shadow: inset 0 1px 0 rgba(white,.6)
  border-radius: 5px
  border: 1px solid #427c44
  &:hover, &:focus
    cursor: pointer
    background: #549056
    @include background(linear-gradient(#7ccb80, #549056))
    

/* Clouds */

@keyframes fly
  0% 
    left: -200px
  100%
    left: 120%

.cloud
  position: absolute
  width: 120px
  height: 60px
  left: -200px
  color: #000
  background: #fff
  box-shadow: 0 0 7px rgba(0,0,0,0.4)
  animation-name: fly
  animation-iteration-count: infinite
  animation-timing-function: linear
  animation-duration: 60s
  opacity: 0.9
  &:before, &:after
    content: ''
    position: absolute
    top: 0
    background: #fff
    border-radius: 50%
  &:before    
    left: -30px
    width: 60px
    height: 60px
  &:after
    right: -30px
    width: 60px
    height: 60px

.blobb
  position: absolute
  top: -50px
  right: -5px
  background: #fff
  width: 100px
  height: 100px
  border-radius: 50%
  &:before
    content: ''
    position: absolute
    left: -30px
    top: 30px
    width: 40px
    height: 40px
    background: #fff
    border-radius: 50%

.cloud--1
  top: 270px
  animation-duration: 50s
  
.cloud--2
  top: 320px
  animation-delay: 4s
  animation-timing-function: ease-in-out

.cloud--3
  top: 350px
  animation-delay: 20s
  
.cloud--4
  top: 300px
  animation-delay: 40s
  animation-timing-function: ease-in-out
    
.cloud--5
  top: 250px
  animation-delay: 55s
  animation-duration: 50s

/* END Clouds */