@import "../../../utils/colorPalette"
@import "../../../utils/animationTimer"

.noMargin
  margin: 0

.titleFont
  font-family: "Montserrat", sans-serif
  font-weight: 500
  transition: text-shadow $colorTransitionDuration, color $colorTransitionDuration

.defaultCursor
  cursor: default

.pointerCursor
  cursor: pointer

.title
  text-shadow: -2px 2px 0px $smoke-grey

.titleDark
  text-shadow: -2px 2px 0px $dark-grey
  color: $white

.navbarFlex
  display: flex
  justify-content: space-between
  min-width: 230px

.darkModeToggle
  display: flex
  align-items: center
  justify-content: center

.brandingContainer
  display: flex

.branding
  height: 42px
  border-right: 2px solid $black
  transition: border-right $colorTransitionDuration
  padding-top: 2px
  margin-top: 4px
  margin-right: 16px
  padding-right: 16px

.brandingDark
  border-right: 2px solid $white

.blogLinkBranding
  color: $dark-blue
  text-shadow: -2px 2px 0px $light-blue
  &:hover
    color: $dark-blue

.blogLinkBrandingDark
  color: $light-blue
  text-shadow: -2px 2px 0px $dark-blue
  &:hover
    color: $light-blue
