html body
  font-family: $font-stack
html, body
  scroll-behavior: smooth

  font-size: 1.0rem
  @media (min-width: 768px)
    font-size: 1.05rem
  @media (min-width: 960px)
    font-size: 1.1rem

pre
  code
    font-size: 0.9rem

body 
  margin: 0
  min-height: calc(100vh - 55px)
  color: #333
  padding-top: 55px
  display: flex
  text-align: center
  flex-direction: column

nav, footer
  font-size: 0.85rem
  z-index: 9

.meel
  cursor: pointer

.support
  font-size: 1rem
  noscript
    border-left: 5px solid darkred
    padding: 0.5rem

.avatar
  float: right
  margin-top: 0rem
  margin-left: 1.5rem
  img
    border-radius: 50%

.copyright 
    margin: 15px 0

ul 
  list-style: circle


div.highlight 
  padding-top: 1.5rem
  padding-bottom: 1.5rem


a:link, a:visited, a
  color: var(--accent)
  text-decoration: none

  &:hover
    border-bottom: 1px solid $grey
    color: $grey


h4 a 
  font-weight: normal


pre 
  font-size: 1rem !important

// fix FF letter float - https://stackoverflow.com/questions/6737175/firefox-specific-margin
@-moz-document url-prefix()
  main
    &.post article > p:first-of-type::first-letter,
    &.essays article > p:first-of-type::first-letter
      margin-top: 10px    


main
  display: block
  line-height: 1.7
  margin: auto
  padding: 25px
  flex: 1 0 auto
  max-width: 750px

  padding-top: 0 !important
  @media (min-width: 1600px)
    max-width: 930px !important

  article
    text-align: left
    margin-bottom: 1rem
    p
      margin: 0 0 20px !important

    blockquote p 
      margin: 0 !important

    a
      border-bottom: 1px solid var(--accent)

  &.post article > p:first-of-type::first-letter,
  &.essays article > p:first-of-type::first-letter
    font-size: 3.05em
    font-weight: bold
    line-height: 1.1em
    float: left
    margin-right: 10px


  footer
    margin-top: 3.5rem

  .inmargin
    display: none
    border-bottom: none

    @media (min-width: 1200px)
      display: block
      right: calc(-600px + 50vw)
      position: absolute

.list-tags
  a
    text-decoration: none !important

header
    margin: auto
    padding-top: 1rem
    padding-bottom: 1.5rem

    h1
      color: var(--accent)
    h2
      margin-top: -1rem
    h2, h3
      font-weight: normal
    h3
      font-size: 1.3rem
      color: grey

time
  color: grey

kbd
  color: var(--accent)
  border: 1px solid var(--accent)
  font-size: 1rem
  padding: 2px 4px
  border-radius: 3px
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25)
  white-space: nowrap

  &:hover
    color: $grey
    border: 1px solid $grey

#skiptocontent
  z-index: 100

  a
    padding: 6px
    position: absolute
    top: 100px
    left: -200px
    color: white
    border 1px solid white
    border-top-right-radius: 8px
    border-bottom-right-radius: 8px
    background: black
    -webkit-transition: left 1s ease-out
    transition: left 1s ease-out

    &:focus
      position: absolute
      left: 0px
      top: 100px
      outline-color: transparent
      -webkit-transition: left .1s ease-in
      transition: left .1s ease-in


.sl-wrapper
  .sl-counter
    font-weight: bold
    font-size: 1.2rem !important

  .sl-caption
    text-align: center
    background: rgba(0,0,0,0.65) !important


article hr
    margin-top: 60px
    margin-bottom: 60px