@import "base"


.contact-wrapper
  height: 100vh
  display: flex
  align-items: center


.contact
  position: relative
  display: flex
  justify-content: center
  width: 100vw
  color: $light
  background-color: transparent
  z-index: 0
  margin-bottom: 50px

  #contact
    position: relative
    padding: 40px 0
    background: $dark
  
    width: 100%
    max-width: 500px
    padding: 25px

    &:before
      content: ''
      position: absolute
      top: $gradient-width
      left: $gradient-width
      right: $gradient-width
      bottom: $gradient-width
      background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2)
      z-index: -1

    &:after 
      content: ''
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2)
      z-index: -2
      filter: blur(40px)
    
    h1
      margin: 0 0 15px
      font-family: $title-stack
      font-size: 3em

    fieldset
      border: none !important
      margin: 0 0 10px
      min-width: 100%
      padding: 0
      width: 100%

    input, textarea
      font-family: $subtitle-stack
      color: $light
      border-color: $light
      width: 100%
      margin: 0 0 5px
      padding: 10px

      &:last-child
        margin: 0
    
      &::placeholder
        color: $light
    
    textarea
      height: 100px
      max-width: 100%
      resize: none
    
    button
      color: $dark
      background: $light
      width: 100%
      padding: 10px 20px
      text-transform: lowercase
      font-family: $title-stack
      font-weight: bold
      border: none
    
    .alternative
      font-family: $subtitle-stack
      color: $gray

      a
        color: $gray