//--------------------
// Blog Header
//--------------------
header
  height: 60px
  background-color: darken(color-default , 5)
  box-shadow: 0 -1px 0 lighten(color-default , 7) inset , 0 -3px 0 darken(color-default , 7) inset
  -webkit-box-shadow: 0 -1px 0 lighten(color-default , 7) inset , 0 -3px 0 darken(color-default , 7) inset
  .header-title
    a
      padding: 0 0 0 20px
      height: 60px
      line-height: 60px
      font-size: 20px
      color: color-background
      letter-spacing: 0.2em

  .nav-container
    display: -webkit-box
    display: -ms-flexbox
    display: flex
    -webkit-box-pack: justify
    -ms-flex-pack: justify
    justify-content: space-between
  .left-nav
    display: -webkit-box
    display: -ms-flexbox
    display: flex
    -webkit-box-align: center
    -ms-flex-align: center
    align-items: center
    -webkit-box-pack: start
    -ms-flex-pack: start
    justify-content: flex-start
    font-size: 20px
    margin-left: 0
    font-weight: 300
    
    -webkit-box-pack: start
    -ms-flex-pack: start
    justify-content: flex-start
    -webkit-box-flex: 1
    -ms-flex: 1 1 auto
    flex: 1 1 auto
    text-align: left
    width: auto
    font-size: 15px
  .right
    font-size: 15px
  .alt
    padding: 00
    text-align: right
    display: -webkit-box
    display: -ms-flexbox
    display: flex
    -webkit-box-align: stretch
    -ms-flex-align: stretch
    align-items: stretch
    -webkit-box-pack: center
    -ms-flex-pack: center
    justify-content: center

.blog-title a
  position: relative
  


button
  align-items: flex-start
  text-align: center
  cursor: default
  color: buttontext
  background-color: buttonface
  box-sizing: border-box
  padding: 2px 6px 3px
  border-width: 2px
  border-style: outset
  border-color: buttonface
  border-image: initial
  
  text-rendering: auto
  color: initial
  letter-spacing: normal
  word-spacing: normal
  text-transform: none
  text-indent: 0px
  text-shadow: none
  display: inline-block
  text-align: start
  margin: 0em 0em 0em 0em
  font: 11px system-ui
  
  -webkit-writing-mode: horizontal-tb
  -webkit-appearance: button
  

.__web-inspector-hide-shortcut__
  visibility: hidden !important



.hamburger
  display: inline-block
  background-color: transparent
  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-3 -6 24 24\"><path fill=\"#FFF\" d=\"M0 12h18v-2H0v2M0 7h18V5H0v2M0 0v2h18V0H0\"/></svg>');
  background-repeat: no-repeat
  background-size: 30px 24px
  background-position: center center
  border: none
  margin: 0
  padding: 0
  width: 60px
  height: 60px
  cursor: pointer
  -ms-flex-item-align: center
  -ms-grid-row-align: center
  align-self: center


.tab
  position: relative
  color: color-default
  padding: 6px
  margin: 0 4px
  text-decoration: none
  text-transform: uppercase
  font-weight: 400
  -webkit-transition: .1s ease color
  transition: .1s ease color
  
amp-sidebar
  width: 250px
  background-color: darken(color-default , 10)
  ul
    padding: 10px 0
  li
    border-top: 1px solid lighten(color-default , 1)
    &:last-child
      border-bottom: 1px solid lighten(color-default , 1)
    a
      color: color-background
      font-weight: bold
      display: block
      padding: 10px 20px
      &:hover
        color: darken(color-background , 20)
        background-color: darken(color-default , 20)
    


//-----------------------------
// categries header
//-----------------------------
.categories-header
  background-color: color-default
  padding: font-size * 0 content-margin-side
  a
    color: color-background
    &:hover
      color: color-background
  .breadcrumb
    ol
      li
        list-style: none
        display: inline-block
        margin: 0
        span
          font-size: font-size * 0.8
          font-weight: bold
        &:after
          content: "/"
          color: color-background
          display: inline-block
          margin: 0 font-size * 0.4
        &:last-child:after
          content: ""
          margin: 0



//--------------------
// Blog title
//--------------------
.entry-header
  // margin: content-margin * 0.5 content-margin-side
  FlexBox()
  .flx
    &:first-child
      margin: 0 font-size 0 0
.header-cap
  FlexGlow(3)
.title-cover
  background-color: color-background
  color: color-default
  padding: content-margin * 0.5 content-margin-side 0 content-margin-side
  a
    font-size: font-size * 1.2
    color: color-default
    text-align: left
    font-weight: bold

.entry-title
  margin: 0

.entry-meta-header
  font-size: font-size * 0.85
  text-align: center
  .date
    font-family: font-serif