$bootstrap: #6f5499
$bootstrap-invert: #fff

.bootstrap
  .hero
    background-color: $bootstrap
    color: $bootstrap-invert
    .title,
    .subtitle
      color: currentColor
    .subtitle
      color: rgba($bootstrap-invert, 0.5)
    .subtitle a
      border-bottom: 1px solid currentColor
      color: currentColor
      &:hover
        color: $bootstrap-invert

.pros-heading
  padding: 0 2rem
  text-align: center

.pros-icon
  margin-bottom: 3rem
  text-align: center
  svg
    height: 3rem
    width: auto

.pros-list
  margin: 0 auto
  max-width: 540px

.pro
  .icon
    position: relative
    top: -1px
  .title
    margin-bottom: 0.5rem

.pro + .pro
  margin-top: 2rem
  padding-top: 2rem

.pro-content
  p:not(:last-child)
    margin-bottom: 0.5rem

.pro.is-bulma
  .icon
    color: $primary

.pro.is-bootstrap
  .icon
    color: $bootstrap

.separator
  color: $border
  margin: 0 0.25em

.comparison
  margin: 0 auto
  max-width: 42rem
  .table
    color: $red
    thead,
    tfoot
      th
        font-size: 1.5rem
        text-align: center
      svg
        height: 1.5rem
        margin-right: 1rem
        position: relative
        top: 0.25rem
        width: auto
    tbody
      th
        font-size: 1.25rem
        text-align: center
      td
        font-family: $family-monospace
        width: 50%
      a
        color: currentColor
        &:hover
          text-decoration: underline
    .is-empty
      background-color: $background
      color: $text-light
    .is-unique
      background-color: rgba($green, 0.25)
      color: $text-strong
      font-weight: $weight-bold

.comparison-header
  margin-bottom: 3rem