// colors

$dark: #131313
$gray: #747474
$light: #d4d4d4

$gradient-width: -5px

// fonts

@font-face
  font-family: 'Poppins'
  src: url('fonts/Poppins/Poppins-Regular.ttf')

@font-face
  font-family: 'Open Sans'
  src: url('fonts/Open_Sans/OpenSans-Regular.ttf')

@font-face
  font-family: 'Astro'
  src: url('fonts/Astro/astro.ttf')

@font-face
  font-family: 'Garamond'
  src: url('fonts/Garamond/EBGaramond-Regular.ttf')

$hero-stack: 'Astro', sans-serif
$title-stack: 'Poppins', sans-serif
$subtitle-stack: 'Open Sans', sans-serif
$body-stack: 'Poppins', sans-serif
$serif-title-stack: 'Garamond', serif
$serif-stack: serif

// mobile
$mobile-width: 768px

@mixin mobile
  @media (max-width: #{$mobile-width})
    @content

@mixin desktop
  @media (min-width: #{$mobile-width})
    @content

*
  margin: 0px
  padding: 0px
  box-sizing: border-box
  background-color: $dark

body
  overflow-x: hidden

.nav
  position: fixed
  width: 100vw
  top: 0
  z-index: 999


  nav
    display: flex
    justify-content: space-around
    align-items: center
    min-height: 8vh
    background-color: $dark
    font-family: $title-stack

    .logo
      color: $light
      text-transform: uppercase
      letter-spacing: 3px
      font-size: 1.75em

      span
        padding-left: 20px

    ul
      display: flex
      justify-content: space-around
      width: 30%

      li
        list-style: none
      
      span
        display: none

      a
        font-family: $subtitle-stack
        color: $light
        text-decoration: none
        font-weight: bold
        font-size: 1.1em

        &:hover
          color: white

    .nav-active
      transform: translateX(0%) !important

    .burger
      display: none

      div
        width: 25px
        height: 3px
        background-color: $light
        margin: 5px

        transition: all 0.3s ease

    @include mobile
      justify-content: space-between
      padding: 20px

      .logo
        img
          width: 28px
          height: 28px
        
        span
          display: none
      

      ul
        z-index: 1
        transform: translateX(100%)
        position: absolute
        right: 0%
        top: 8vh
        height: 30vh
        width: 100% !important
        display: flex
        flex-direction: column
        align-items: center
        background-color: $dark
        transition: transform 0.5s ease-in
        border-bottom: 3px solid $light

        span
          display: block
          color: $light
          font-weight: bold
          text-transform: uppercase
          letter-spacing: 3px
          font-size: 1.75em

        li a
          color: $light !important
          font-size: 1.2em
          font-weight: normal

      .burger
        display: block !important

        &.toggle
          .line1
            transform: rotate(-45deg) translate(-5px, 6px)
          
          .line2
            opacity: 0
          
          .line3
            transform: rotate(45deg) translate(-5px, -6px)

.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
  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
      margin-top: 30px
      border-radius: 20px
      font-family: $hero-stack

      a
        color: $light
        text-decoration: none

  div canvas
    margin: -5% 0

.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: #ffd1dc
      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

.timeline
  display: flex
  flex-direction: column
  height: auto
  color: $light
  align-items: center
  justify-content: center
  margin-bottom: 5%

  .header
    margin-bottom: 2%
    font-family: $title-stack
    font-size: 4em


  #timeline
    max-width: 800px
    margin: 0 auto
    margin-bottom: 2%
    position: relative

    ul
      list-style: none

      li
        border: 8px solid $gray
        padding: 20px
        color: white
        border-radius: 10px
        margin-bottom: 20px

        &:last-child
          margin-bottom: 0
      
        .content

          h1
            font-family: $subtitle-stack
            font-weight: bold
            font-size: 25px
            line-height: 30px
            margin-bottom: 10px
          
          p
            font-family: $body-stack
            font-weight: normal
            font-size: 16px
            line-height: 30px

          .date
            font-family: monospace
            font-weight: normal
            font-size: 12px
            margin-bottom: 10px
            letter-spacing: 2px

    @include desktop
      &:before 
        content: ""
        position: absolute
        top: 0
        left: 50%
        transform: translateX(-50%)
        width: 2px
        height: 100%
        background-color: $light

      .date
        position: absolute
        top: -30px
      
      ul li
        width: 50%
        position: relative
        margin-bottom: 50px

        &:nth-child(odd)
          float: left
          clear: right
          transform: translateX(-30px)
          border-radius: 20px 0px 20px 20px

          &::before
            transform: translate(50%, -50%)
            right: -38px

        &:nth-child(even)
          float: right
          clear: left
          transform: translateX(30px)
          border-radius: 0px 20px 20px 20px
        
          &::before
            transform: translate(-50%, -50%)
            left: -38px

        &::before
          content: ""
          position: absolute
          height: 20px
          width: 20px
          border-radius: 50%
          background-color: $gray
          top: 0

.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