*
  box-sizing: border-box
  -webkit-appearance: none
  margin: 0
  padding: 0

body, html 
  scroll-behavior: smooth

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

body
  font-family: var(--font)
  background-color: var(--bg)
  color: var(--text)
  text-align: justify
  line-height: 1.5
  margin: 0 auto
  position: relative
  font-kerning: normal
  display: flex
  flex-direction: column
  justify-content: space-between
  min-height: 100vh
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

a
  text-decoration: none
  color: inherit

.post_content
  blockquote
    p
      line-height: 1.2em

blockquote 
  @media (min-width: 960px)
    width: calc(100% - -220px + 0px)
    margin-left: -90px

  @media (min-width: 1120px)
    width: calc(100% - -260px + 0px)
    margin-left: -130px

  opacity: 0.8
  position: relative
  quotes: '\201C''\201D''\2018''\2019'
  margin: 1.2rem 0
  display: flex
  flex-flow: row wrap
  position: relative
  &::before 
    content: url('/images/icons/quote-left-solid.svg')
    display: block
    position: absolute
    width: 32px
    margin-left: -40px
  
  p
    @media (min-width: 960px)
      font-size: 1.8rem !important
    @media (min-width: 1120px)
      font-size: 2rem !important

    padding-left: 0.5rem 0 !important
    font-size: 1.5rem !important
    letter-spacing: -0.1rem
    width: 100%
    font-weight: 300
    font-style: italic

    span
      opacity: 0.6
      font-size: 1.3rem
      white-space: pre
      &::before
        content: '\A';

h1,h2,h3,h4,h5
  font-family: inherit
  font-weight: 500
  padding: 5px 0
  margin: 15px 0
  color: inherit
  line-height: 1.35

h1
  font-size: 200%
h2
  font-size: 175%
h3
  font-size: 150%
h4
  font-size: 125%
h5
  font-size: 120%
h6
  font-size: 100%

img, svg, video 
  max-width: 100%
  vertical-align: middle
img 
  height: auto
  margin: 1rem auto
  padding: 0

figcaption
  text-align: center
  font-style: italic
  margin-bottom: 1.3rem

.titlemeta
  font-size: 1.2rem
  text-align: center
  width: 100%
  color: #333333

main
  padding-bottom: 45px
  flex: 1

ul
  list-style: circle
  -webkit-padding-start: 0
  -moz-padding-start: 0

b, strong
  font-weight: 500

hr 
  border: none
  padding: 0.5px
  background: var(--theme)
  opacity: 0.5
  margin: 3rem 0

aside 
  h3
    position: relative
    margin: 0 !important

span
  &.pager_link
    opacity: 0.5

ol
  counter-reset: my-awesome-counter
  list-style: none !important
  padding-left: 3rem
  margin-left: 0.5rem
  @media screen and (min-width: 667px)
    // margin-left: 1rem
  li 
    margin: 0 0 0.5rem 0
    counter-increment: my-awesome-counter
    position: relative
    padding-left: 0.5rem !important
    &::before
      content: counter(my-awesome-counter)
      font-size: 1.15rem
      display: inline-grid
      align-items: center
      font-weight: 500
      position: absolute
      --size: 1.8rem
      left: -2rem
      line-height: var(--size)
      width: var(--size)
      height: var(--size)
      color: var(--theme)
      border-radius: 50%
      text-align: center
      top: 0.25rem
      border-right: 2px solid var(--theme)
    &.align::before
      top: 1rem