@import 'nib'

.markdown
  font-family "Source Sans Pro"
  font-size 20px
  font-weight 300
  margin 0 auto 40px
  max-width 100%
  padding 0 40px 0 40px
  text-align justify
  width 700px

  .bold
    font-weight 600
    .underline
      border-bottom 3px solid #333

  .italic
    font-style italic

  .underline
    border-bottom 1px solid #333

  .inline-code, pre
    background #eee
    font-family Courier New
    font-size 14px
    line-height 25px
    text-align left
    vertical-align top
    white-space pre-wrap
    word-break break-all
  .inline-code
    padding 5px 10px
  pre
    padding 10px 20px

  h1, h2, h3
    font-family Exo
    font-weight 600
    letter-spacing 0.9px
    text-align left

  h1
    font-size 40px
    line-height 48px
    margin 80px 0 20px 0
    .underline
      padding-bottom 4px

  h2
    font-size 32px
    line-height 38px
    margin 60px 0 20px 0

  h3
    font-size 20px
    line-height 26px

  .embed
    margin-bottom 40px
    margin-top 40px
    min-height 100px
    > iframe
      min-height 400px
    > img, iframe
      width 100%
    &.full-width
      left 50%
      max-width none
      position relative
      transform translateX(-50vw)
      width 100vw
      > iframe
        min-height 600px

  .caption
    color #647084
    font-size 16px
    font-style italic
    line-height 20px
    margin-bottom 40px
    margin-top -30px
    text-align center

  iframe
    display block
    margin 0 auto

  .hr
    background #ccc
    height 1px
    margin-bottom 40px
    margin-top 40px

  img
    display block
    max-width 100%

  blockquote
    border-bottom 1px solid #ddd
    border-top 1px solid #ddd
    color #647084
    font-size 24px
    font-style italic
    letter-spacing .5px
    line-height 29px
    margin 0 auto 20px
    margin-bottom 40px
    max-width 100%
    padding 40px
    text-align center
    width 600px

  .paragraph
    font-size 20px
    font-weight 300
    word-spacing 1px
    letter-spacing 0.3px
    line-height 32px
    margin-bottom 30px
    > ul, > ol
      margin-left 20px
      margin-top 10px
    .caption
      margin-top 5px
    .underline
      padding-bottom 3px

  ol, ul
    line-height initial
    list-style-position inside
    margin-bottom 40px
    li
      margin-bottom 8px
    li.checkbox
      &::before
        border 1px solid #ddd
        border-radius 2px
        content ' '
        display block
        float left
        height 16px
        margin-right 8px
        position relative
        top 3px
        width 16px
    li.dash
      margin-left 25px
      position relative
      &::before
        content '—'
        font-size 16px
        left -25px
        position absolute
        top 0
    li.lower-alpha
      list-style-type lower-alpha
    li.lower-roman
      list-style-type lower-roman
    li.upper-alpha
      list-style-type upper-alpha
    li.upper-roman
      list-style-type upper-roman
    li.decimal
      list-style-type decimal
    li.circle
      list-style-type circle

  table
    border 1px solid #c1c7cd
    letter-spacing .6px
    line-height 32px
    width 100%
    tbody
      width 100%
    td
      border-bottom 1px solid #c1c7cd
      border-right 1px solid #c1c7cd
      padding 12px 20px
      vertical-align top
      &:first-child
        white-space nowrap
      &:last-child
        border-right 0
      a
        border-bottom-width 1px
        padding-bottom 2px

@media (min-width: 801px)
  .markdown
    table
      tr:last-child td
        border-bottom 0

@media (max-width: 800px)
  .markdown
    h1
      margin 60px 0 20px 0
      font-size 32px
      line-height 38px
    h2
      font-size 22px
      line-height 28px
    h3
      font-size 18px
      letter-spacing 1px
      word-spacing 4px
    .paragraph
      font-size 18px
      letter-spacing 0.3px
      line-height 28px
      text-align left
      word-spacing 4px
    table
      border 0
      line-height 26px
      tr
        display block
        margin-bottom 20px
      td
        border 0
        display block
        padding 0
        &:nth-child(2)
          font-size 18px
        &:nth-child(1)
          border-bottom 1px solid $carbon
          display inline-block
          font-size 16px
          line-height 18px
          padding-bottom 4px
    blockquote
      padding 20px
      font-size 20px