#top-bar
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 90px
  z-index: 2

  padding: 0 50px
  margin: 0
  list-style: none

  display: flex
  align-items: center

  background-color: transparent
  transition: color .5s, background-color .5s

  color: $light-text-primary
  font-family: 'Montserrat', sans-serif
  font-weight: 700
  letter-spacing: .05em


  li
    display: inline-block
    margin: 0 10px

    &.right
      margin-left: auto

    svg
      height: 40px
      width: auto
      transition: transform .25s

      &:hover
        transform: scale(1.2)

      margin-right: 20px

  a
    text-decoration: none

    &.inverted
      color: $blue
      background-color: $white
      transition: background-color .25s
      padding: .5em 1em
      border-radius: 5px

      transition: color .5s, background-color .5s

      &:hover
        background-color: darken($white, 10)

  &.opaque
    background-color: $white
    color: $blue

    a
      &.inverted
        color: $light-text-primary
        background-color: $red

#top-bar
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 90px
  z-index: 2

  padding: 0 50px
  margin: 0
  list-style: none

  display: flex
  align-items: center

  background-color: transparent
  transition: color .5s, background-color .5s

  color: $light-text-primary
  font-family: 'Montserrat', sans-serif
  font-weight: 700
  letter-spacing: .05em

  @media screen and (max-width: 420px)
    padding: 0 10px
    height: 70px


  li
    display: inline-block
    margin: 0 10px

    &.right
      margin-left: auto

    svg
      height: 40px
      width: auto
      transition: transform .25s

      &:hover
        transform: scale(1.2)

      margin-right: 20px

    @media screen and (max-width: 420px)
      display: none

      &:first-child
        display: block

  a
    text-decoration: none

    &.inverted
      color: $blue
      background-color: $white
      transition: background-color .25s
      padding: .5em 1em
      border-radius: 5px

      transition: color .5s, background-color .5s

      &:hover
        background-color: darken($white, 10)

  &.opaque
    background-color: $white
    color: $blue

    a
      &.inverted
        color: $light-text-primary
        background-color: $red

Tweak top bar on mobile
Tweak top bar on mobile
