@use "~/../@fortawesome/fontawesome-free/scss/fontawesome" with ( $fa-font-path: "~/../@fortawesome/fontawesome-free/webfonts" )

@forward "~/../@fortawesome/fontawesome-free/scss/fontawesome"

@use "~/../@fortawesome/fontawesome-free/scss/solid"

*
  box-sizing: border-box
  padding: 0
  margin: 0


// NAVIGATION

nav
  padding: 0 15px
  ul
    list-style-type: none
    li
      padding: 10px

header
  width: 100vw

  background-color: green
  color: white
  font-weight: 600
  font-size: 1.2em
  line-height: 1.5em
  a
    color: white
    text-decoration: none
    &:hover
      color: white
      text-decoration: none

  .nav-menu
    display: flex
    flex-wrap: wrap
    justify-content: space-between

    li a
      display: block
      padding: 4px 20px

    li.nav-subitem a
      padding: 15px

    .nav-toggle
      order: 1
      font-size: 20px

    .nav-item
      order: 2
      width: 100%
      text-align: center
      display: none
  .nav-menu--active .nav-item
    display: block

  .nav-submenu
    display: none
  .nav-submenu--active
    display: block

  .nav-submenu--active
    background-color: green

  .nav-subitem a
    padding: 10px 15px