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

nav
  svg
    width: 24px
    height: 24px
    float: left

%icon-in-text
  position: relative
  top: 5px
  width: 24px !important
  height: 24px !important

main
  p
    .icon
      @extend %icon-in-text

.icon
  width: 32px
  height: 32px
  padding-right: 0.3rem  

  &-small
    position: relative
    top: 2px
    padding-right: 0.1rem
    width: 16px !important
    height: 16px !important

  &-text
    @extend %icon-in-text
  &-float
    @extend %icon-in-text
    float: left

  &-inline
    float: left
    color: #999

.copyright 
    margin: 15px 0

ul 
  list-style: circle


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


.text-justify img 
  display: block
  margin-left: auto
  margin-right: auto
  border: 1px solid #ccc !important
  border-radius: 4px
  margin-top: 1.5em
  margin-bottom: 1.5em

img 
    max-width: 100%

figure 
  margin-bottom: 1.5em !important
  img
    margin-bottom: 0 !important
  figcaption 
    margin-top: 0.8rem !important
    h4, p
      font-size: 1.2rem 
      text-align: center
      margin-top: 0 !important
      font-style: italic
      font-weight: normal
      color: #aaa


/** general **/

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

a.icon:hover 
    text-decoration: none

a:hover 
    text-decoration: underline


h4 a 
  font-weight: normal


pre 
  font-size: 1rem !important


.big-img .container 
  @media (min-width: 768px)
    height: 200px
  @media (min-width: 1600px) 
    height: 250px !important


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

  .text-justify p 
    margin: 0 0 20px !important

  .text-justify blockquote p 
    margin: 0 !important


.big-img 
  background: no-repeat center center
  -webkit-background-size: cover
  -moz-background-size: cover
  background-size: cover
  -o-background-size: cover

  border-top: 2px solid lightgray
  border-bottom: 1px solid var(--accent)


.item
    margin: auto
    padding-top: 1rem
    padding-bottom: 1.5rem
    max-width: 80%

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

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)