// colors
$mainColor= #6F43E7
$offColor = #49AAA1

$sidebarColor=#FAFAFC
$accentColor = #6F43E7
$textColor =rgb(51, 51, 51)
$headerColor=rgb(17, 17, 17)
$borderColor = #e8e8fb
$codeBgColor = #282c34
$arrowBgColor = #ccc
$section-color=#f7f7f7;
$fontSize = 16px

// navbar
// $navbarHeight = 5.2rem
$navbar-vertical-padding = 1.4rem;
$navbar-horizontal-padding = 1.4rem;
$navbar-background = #6F43E7;
$navbar-text-color = #ffffff;

$sidebarWidth = 16rem
$contentWidth = 960px

// // responsive breakpoints
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

.icon.outbound
  display none !important

.navbar
  background-color: $navbar-background !important
  border-bottom 1px solid $navbar-background !important
  .logo
    height $navbarHeight - 3.2rem
    min-width $navbarHeight - 3.2rem
    margin-right 0.8rem
    vertical-align top
  .links
    background-color: $navbar-background !important
    color: $navbar-text-color !important
    padding-left 0rem
  .site-name
    display: none !important

.nav-links
  a
    &:hover, &.router-link-active
      color lighten($textColor, 8%) !important


.dropdown-wrapper
  .dropdown-title
    color $textColor !important
  .nav-dropdown
    .dropdown-item
      color $textColor !important


.newsletter
  background-color $section-color
  border-top 1px solid darken($section-color, 10%)
  border-bottom 1px solid darken($section-color, 10%)

  &__wrap
    margin 1.5rem auto
    padding 1.8rem 2.3rem
    border-radius 3px
    box-sizing border-box
    max-width $contentWidth !important
    background #f8f8f8
  &__title
    font-size 1.2rem

  &__content
    margin-top 1.5rem
    margin-bottom 1.5rem
    line-height 1.7rem

@media (min-width: $MQMobile)
  .nav-links a
    &:hover, &.router-link-active
      color lighten($navbar-text-color, 8%) !important
  .nav-item > a:not(.external)
    &:hover, &.router-link-active
      margin-bottom -2px
      border-bottom 2px solid lighten($navbar-text-color, 8%) !important
  .dropdown-wrapper
    .dropdown-title
      color $navbar-text-color !important
    .nav-dropdown
      .dropdown-item
          color $textColor !important
  .newsletter
    &__input
      width 30% !important
    &__button
      width 15% !important
@media (max-width: $MQMobile)
  .navbar
    .site-name
      display: none !important
  .features
    padding: 36pt 0
    .feature
      .media
        max-width: 80%
      .content
        max-width: 80%

  .triples
    .feature
      padding: 36pt 0
  .home
    .hero
      padding-bottom 0pt
      .section
        .content
          padding: 0 50px;