body
  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  font-size 16px
  color #2c3e50

.page
  padding-left 300px

.sidebar
  width 300px
  position fixed
  margin 0
  top 0
  left 0
  bottom 0
  padding 2em 0
  box-sizing border-box
  border-right 1px solid #eaecef
  overflow-y scroll
  ul
    padding 0
    margin 0
    list-style-type none
  a
    display inline-block
    color #2c3e50
    border-left 4px solid transparent
    padding 0.25em
    padding-left 1.25em
    &:hover
      color darken(#41b883, 5%)
    &.router-link-exact-active
      font-weight 600
      color darken(#41b883, 5%)
      border-left-color darken(#41b883, 5%)

.markdown
  max-width 720px
  margin 2em auto
  padding 0 2em

blockquote
  font-size 1.25em
  color #999
  border-left .25em solid #dfe2e5
  margin-left 0
  padding-left 1em

ul, ol
  padding-left 1.5em

a, p a code
  color darken(#41b883, 5%)
  text-decoration none

strong
  font-weight 600

h1, h2, h3, h4, h5, h6
  font-weight 600
  line-height 1.25
  &:not(:first-child)
    margin-top 1.5em
  &:hover .header-anchor
    opacity: 1

h1
  font-size 2.3em

h2
  font-size 1.8em
  padding-bottom .3em
  border-bottom 1px solid #eaecef

h3
  font-size 1.4em

a.header-anchor
  font-size 0.85em
  float left
  margin-left -0.87em
  padding-right 0.23em
  margin-top 0.125em
  opacity 0

code
  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

p, ul, ol
  line-height 1.7

p, h1, h2, h3, h4, h5, h6
  code
    padding 0.2em 0.5em
    margin 0
    font-size 0.85em
    background-color rgba(27,31,35,0.05)
    border-radius 3px

p code
  color lighten(#2c3e50, 20%)

pre, pre[class*="language-"]
  background-color #2d2d2d
  color white
  line-height 1.4
  border-radius 6px
  padding 1.4em 1.6em
  white-space pre-wrap
  word-break break-word
  overflow auto
  code
    font-size 0.85em

.highlighted-line
  background-color #14161a
  display block
  margin 0 -1.6em
  padding 0.2em 1.6em 0

.custom-block
  .custom-block-title
    font-weight 600
    text-transform uppercase
  &.tip, &.warning, &.danger
    padding .1em 1.4em
    border-left-width .5em
    border-left-style solid
    margin 1em 0
  &.tip
    background-color #f3f5f7
    border-color #42b983
  &.warning
    background-color rgba(255,229,100,.3)
    border-color #ffe564
    color darken(#ffe564, 70%)
    .custom-block-title
      color darken(#ffe564, 50%)
  &.danger
    background-color #ffe6e6
    border-color red
    color darken(red, 70%)
    .custom-block-title
      color darken(red, 40%)

p
  &.demo
    padding 1rem
    border 1px solid #ddd
    border-radius 4px

@media (max-width: 879px)
  body
    font-size 15px
  .sidebar
    font-size 14px
    width 250px
  .page
    padding-left 250px
  .markdown
    margin 1.5em 0
    padding 0 1.5em

@media (max-width: 639px)
  body
    font-size 15px
  .sidebar
    width 275px
    display none
  .page
    padding-left 0
  .markdown
    margin 1em 0
    padding 0 1em