@import "variables"

#mobile-navbar
  display: none
  overflow: hidden
  color: white !important
  font-weight: bold

#mobile-subnav
  background-color: #0a1922

#mobile-subnav
  display: none

#menu
  padding: 5px 0
  color: white
  padding-right: 5px
  padding-left: 5px
  font-size: 1.1rem !important

#navbar
  display: block

.nav
  background-color: #0a1922
  padding: 5px 0
  border-top: 4px solid $teal

.nav-spacer
  margin-bottom: $small-spacer

.df-community-link:before
  content: ""
  background-image: url(/heart.svg) !important
  background-size: 12px 16px
  width: 12px
  height: 16px
  margin-left: 5px
  margin-right: 5px
  vertical-align: middle
  display: inline-block

#menu .navbar-item, .nav .navbar-item, .nav .navbar-item:visited
  color: white
  padding-right: 5px
  padding-left: 5px

@media only screen and (max-width:340px)
  #mobile-navbar
    font-size: 1.1rem !important
  #hamburger
    padding-left: 0.5rem !important

@media only screen and (max-width: 1000px)
  #menu .navbar-item
    display: block

  #mobile-subnav
    display: block

  #mobile-toggle + #menu
    display: none

  #mobile-toggle:checked + #menu
    display: block

  #mobile-navbar, #menu
    display: block
    font-size: 1.2rem
    line-height: 2.2rem

  #mobile-navbar
    margin-top: 0.4rem

  #navbar
    display: none

  #mobile-toggle
    display: none
  #hamburger
    float: right;
    padding:
      left: 1.5rem;
      right: 0.5rem;

    line-height: 0;