// colors

$dark: #131313
$gray: #747474
$light: #d4d4d4
$accent: #7DF9FF

$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

      h4
        display: flex

      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)

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