.logo
    Google
.search
    %input{:type => "text", :placeholder => "Search"}
    .button
        %button Search
        %button Im Lucky

@import compass

@import url(https://fonts.googleapis.com/css?family=Squada+One)
@import compass
$bg: #7cedc5  
$to: 30

$jum: ()
@for $i from 1 through $to
  $jum: append($jum, #{$i}px #{$i}px 0px $bg - 80, comma)

body
  background: $bg
    
.logo
  text:
    shadow: $jum
    align: center
  margin-top: 0.5em
  font:
    size: 8em
    family: 'Squada One', cursive
  color: #ffffff

.search
  position: relative
  z-index: 10
  text-align: center
  input[type="text"]
    width: 400px
    padding: 5px
    font-size: 1.3em
    margin: 1em auto 0px
    display: block
    box-shadow: $jum
    border: 3px solid $bg - 50
    outline: 0
    &:focus
      border: 3px solid $bg - 25
  button
    background: $bg - 25
    border: 3px solid $bg - 50
    font:
      size: 1.5em
      family: 'Squada One', cursive
    color: #ffffff
    box-shadow: $jum
    cursor: pointer
    display: inline-block
    margin: 3px 5px
    &:active
      margin: 8px 5px
  .button
    +pie-clearfix
    button
      float: left
    margin: 0.5em auto
    width: 16%