html, body
  background-color $theme-grey

body
  font-family Raleway, sans-serif
  line-height 2
  font-size 14px
  font-weight 400
  color $textColor

h1, h2, h3, h4, h5, h6
  border-color $secondary
  border-width 3px

hr
  border-top-color $borderColor

kbd
  background $deep-grey

blockquote
  color $textColor

.content
  max-width 800px

tr
  line-height 1.5
  &:nth-child(2n)
    background-color $deep-grey

.custom-block
  font-weight 400
  font-size 14px
  border-top-right-radius 10px
  border-bottom-right-radius 10px
  &.tip
    background-color $white
    color $theme-grey
    border-color $success
  &.warning
    background-color $white
    color $theme-grey
    border-color $info
  &.danger
    background-color $white
    color $theme-grey
    border-color $accentColor
  code
    background-color $near-white !important
    color $theme-grey
  a
    color $accentColor !important
    code
      color $accentColor
  .custom-block-title
    color $deep-grey !important

code
  font-weight bolder !important
  padding 0.2em 0.4em
  background-color $deep-grey !important
  color $textColor

a
  color $accentColor
  code
    color $accentColor
    background-color $deep-grey
  .sidebar-link
    color $textColor

.sw-update-popup
  background-color $near-white
  border 0

.navbar
  background-color $deep-grey
  .site-name
    visibility hidden
    color $white
  .links
    background-color $deep-grey !important

.page-edit
  .edit-link
    a
      color $light-grey
      &:hover,
      &:focus
        color $textColor

  .last-updated
    .prefix
      color $light-grey
    .time
      color $light-grey

.page-nav
  .inner
    color $light-grey
    border-top-color $borderColor

.sidebar
  font-size 15px
  background-color $theme-grey
  .sidebar-link
    &.active
      color $accentColor
      font-weight bolder

  .sidebar-heading
    font-size 18px
    color $textColor
    font-weight 500
    &.open,
    &:hover
      color $textColor

.nav-links
  a
    font-size 14px
    color $white
    &:hover,
    &:focus,
    &.router-link-active
      color $textColor

.home
  .hero
    margin 100px 0
    h1
      visibility hidden
    .description
      font-size 28px
      font-weight 300
      color $light-grey
    .action-button
      font-weight 500
      border 0
      color $textColor
  .features,
  .footer
    border-top-color $borderColor
  .feature
    h2
      color $textColor
      font-size 22px
      font-weight 400
    p
      color $textColor
  .footer
    color $white

// for centering images
.centre
  display: block
  margin-top: 20px
  margin-bottom: 10px
  margin-left: auto
  margin-right: auto

// don't specify width & height - otherwise distorts aspect ratio

.left
  display: inline
  margin-top: 20px
  margin-bottom: 10px
  margin-left: 0
  margin-right: auto
  width: 50%

.right
  display: inline
  margin-top: 20px
  margin-bottom: 10px
  margin-left: auto
  margin-right: 0
  width: 50%

.go-to-top
  color: $accentColor !important

.search-box
  input
    color $deep-grey !important
  .suggestions
    color $deep-grey
    background-color $near-white
    border 0
  .suggestion
    a
      color $deep-grey !important
    &.focused
      background-color $near-white
      a
        color $accentColor !important

.algolia-search-wrapper
  .algolia-autocomplete
    .ds-dropdown-menu
      border 0
      background-color $near-white
      &:before
        background-color $white
        border 0

@media (min-width: $MQMobile)
  .dropdown-wrapper
    .nav-dropdown
      background-color $near-white
      border 0

      .dropdown-item
        h4
          border-top-color $borderColor