@import "base"

.hero
  color: $light
  position: relative
  width: 100vw
  height: 100%

  #hero
    position: absolute
    left: 10%
    top: 20%
    background-color: transparent
    z-index: 1

    h1
      font-family: $hero-stack
      text-align: left
      font-size: 8em
      padding: 0.5em 0.5em 0
      background: -webkit-linear-gradient(#eee 70%, #333 100%)
      -webkit-background-clip: text
      -webkit-text-fill-color: transparent
    
    h3
      font-family: "Open Sans", serif
      text-align: left
      font-size: 2em
      background-color: transparent
    

.about-section
  position: relative
  color: $light
  overflow: hidden
  background-color: transparent
  text-align: center

  .about
    position: absolute

    h1
      font-size: 4em
      font-family: $subtitle-stack
    
    h4
      font-size: 1em
      font-family: $subtitle-stack
      margin-left: 20%
      width: 60%

    button
      padding: 10px 20px
      border: 3px solid $light
      text-transform: uppercase
      font-size: 1.5em
      margin-top: 30px
      border-radius: 20px
      font-family: $hero-stack

      a
        color: $light
        text-decoration: none

  div canvas
    margin: -5% 0

  .about-1
    margin-top: 8vh
  
  .about-2
    position: relative
    height: 100vh
    display: flex
    align-items: center

    .about
      display: flex
      flex-direction: row
      align-items: center
      justify-content: center
      
      *
        flex: 1 1 0

      img
        width: 50%
        height: 50%

  .about-3
    position: relative
    height: 100vh
    display: flex
    align-items: center

    .about
      display: flex
      flex-direction: row
      align-items: center
      justify-content: center
      
      *
        flex: 1 1 0

      img
        width: 50%
        height: 50%

  .about-4
    position: relative
    height: 100vh
    display: flex
    align-items: center

    .about
      display: flex
      flex-direction: row
      align-items: center
      justify-content: center
      
      *
        flex: 1 1 0

      img
        width: 50%
        height: 50%


.founders
  position: relative
  display: flex
  height: auto
  color: $light
  align-items: center
  justify-content: center

  .profile
    flex: 1 1 0
    margin: 0 auto
    text-align: center

    img
      width: 200px
      height: 200px
      background-color: $accent
      border-radius: 50%
    
    h1
      font-family: $title-stack
      font-size: 1.6em
      margin-top: 0.3em
    
    h2
      font-family: $title-stack
      font-weight: normal
      font-size: 1em
    
    p
      font-family: sans-serif
      width: 60%
      margin: 0 auto
      margin-top: 0.5em

      a
        text-decoration: none
        color: #11c1e0
    
  .caption
    flex: 1.5 1 0
    text-align: center

    h1
      font-family: $title-stack
      font-size: 5em
      white-space: nowrap
    
    p
      font-family: $subtitle-stack

.contact
  position: relative
  display: flex
  justify-content: center
  width: 100vw
  height: auto
  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

footer
  position: relative
  margin-top: 10%
  height: 10vh
  width: 100%
  
  .footer
    width: 50%
    margin: 0 auto
    display: flex
    flex-direction: column
    color: $light
    font-family: $subtitle-stack

    .columns
      display: flex
      flex: 1
      flex-direction: row
      justify-content: space-around

      .logo 
        margin: auto 0

        h4
          display: flex
          flex-direction: row
          align-items: center
          margin: auto 0
          color: $light
          text-transform: uppercase
          letter-spacing: 3px
          font-size: 1.2em

        span
          padding-left: 10px

      ul
        list-style: none
        
        li
          color: lighten($dark, 45%)

          &:first-child
            font-size: 1.2em
            padding: 5px 0
            color: lighten($dark, 50%)
        
          a
            padding: 4px 0
            color: inherit
            text-decoration: none

            &:hover
              color: lighten($dark, 60%)
          
    .copyright
      color: lighten($dark, 40%)
      text-align: center
      font-size: 0.9em
      margin: 50px 0

      a
        color: inherit