form
  .inline-block
    margin-right: 6px
    padding: 8px 0

legend
  font-size: 3em
  margin-bottom: 1em

fieldset
  border: none
  margin-top: 18px

label
  display: block
  margin-bottom: 3px
  &:first-letter
    text-transform: uppercase
  &.required:after
    content: ' *'
    display: inline

input[type=text]
  background: rgba(black, 0.5)
  border: none
  border-radius: 4px
  box-shadow: inset 0 1px 3px rgba(black, 0.5), 0 1px 0 rgba(white, 0.2)
  color: white
  font-size: 16px
  min-width: 240px
  outline: none
  padding: 0.5em
  transition: box-shadow .2s ease-in-out
  &:focus
    box-shadow: inset 0 1px 3px rgba(black, 0.5), 0 1px 0 rgba(white, 0.2), 0 0 6px rgba(white, 0.8)
    &:required:invalid
      background: lightCoral

input[type=email], input[type=tlf], input[type=url]
  @extends input[type=text]

textarea
  @extends input[type=text]
  min-width: 340px
  max-width: 420px

button
  background: #ccc linear-gradient(top, #eee, #ccc)
  border: none
  border-radius: 4px
  box-shadow: 0 1px 3px rgba(black, 0.4)
  font-size: 16px
  padding: 0.5em
  text-transform: capitalize
  &:active
    background: #ccc linear-gradient(top, #666, #eee)
    box-shadow: inset 0 1px 3px rgba(black, 0.4)

input[type=button], input[type=reset], input[type=submit]
  @extends button