.title,
.subtitle,
.content h2,
.content h3,
.button,
.label,
.share,
.stab::before,
.snippet-copy,
.side
  font-family: "Archia", sans-serif
  font-weight: 600

.title
  font-size: 1.875rem

.title:not(.is-spaced) + .subtitle
  margin-top: -1.25rem

.share em,
.subtitle
  font-weight: 400

.subtitle a
  color: $red
  &:hover
    color: $text-strong

.sides,
.message-body,
.panorama
  box-shadow: 0 2rem 4rem -1rem rgba(0, 0, 0, 0.2)

.message a:not(.button):not(.tag)
  border-bottom: 2px solid rgba(#000, 0.1)
  text-decoration: none
  &:hover
    border-bottom-color: currentColor

.message-body
  border-width: 0 0 0 5px
  p:not(:last-child)
    margin-bottom: 0.5em

#return
  display: none
  &.is-active
    display: block

.table-container
  @extend .block
  +overflow-touch
  overflow: auto
  overflow-y: hidden
  max-width: 100%

.stabs
  @extend .block
  border: 1px solid $border
  box-shadow: 0 0 0 5px $hl-background
  border-radius: 5px
  counter-reset: stabs
  &.is-vertical .stab .stabilo
    white-space: normal

.stab
  box-shadow: inset 0 -5px 10px $hl-background
  counter-increment: stabs
  display: flex
  flex-direction: column
  padding: 1em
  position: relative
  width: 100%
  &:not(:last-child)
    border-bottom: 1px solid $border
  &::before
    content: counter(stabs)
    font-size: 0.875em
    line-height: 1.5rem
    opacity: 0.5
    position: absolute
    right: calc(100% + 1em)
    top: 1rem

.stab-label
  flex-grow: 1
  flex-shrink: 1
  font-size: 0.875em
  padding-right: 1em

.stab-code
  flex-grow: 0
  flex-shrink: 0

+from(600px)
  .stabs:not(.is-vertical) .stab
    flex-direction: row

.shares
  align-items: stretch
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  margin-bottom: 1.5rem
  margin-top: 1.5rem

$html: #ff470f
$css: #00d1b2
$github: #333
$facebook: #3b5998
$twitter: #55acee
$whatsapp: #25d366
$patreon: #f96854
$paypal: #012169
$fortyfour: #5f45bb
$bulma: #00d1b2
$udemy: #ec5252
$hn: #ff6600
$reddit: #5f99cf

\:root
  --html: $html
  --css: $css
  --github: $github
  --facebook: $facebook
  --twitter: $twitter
  --whatsapp: $whatsapp
  --patreon: $patreon
  --paypal: $paypal
  --fortyfour: $fortyfour
  --bulma: $bulma
  --udemy: $udemy
  --hn: $hn
  --reddit: $reddit

.share
  border-radius: 5px
  color: var(--brand)
  margin-bottom: 1rem
  padding: 1.5em 0 1.75em
  position: relative
  text-align: center
  transition-duration: 200ms
  transition-property: background-color
  width: calc(50% - 0.5rem)
  &::before
    +overlay
    border: 3px solid var(--brand)
    border-radius: 5px
    content: ""
    opacity: 0.1
  span
    display: block
  svg
    height: 2em
    width: 2em
    path
      fill: currentColor
  em
    font-size: 0.75em
    font-style: normal
    opacity: 0.5
    position: relative
  strong
    display: block
    position: relative
  &:hover
    background-color: var(--brand)
    color: $white
  &.is-html
    --brand: var(--html)
  &.is-css
    --brand: var(--css)
  &.is-github
    --brand: var(--github)
  &.is-facebook
    --brand: var(--facebook)
  &.is-twitter
    --brand: var(--twitter)
  &.is-whatsapp
    --brand: var(--whatsapp)
  &.is-paypal
    --brand: var(--paypal)
  &.is-patreon
    --brand: var(--patreon)
  &.is-fortyfour
    --brand: var(--fortyfour)
    width: auto
  &.is-bulma
    --brand: var(--bulma)
    width: auto
  &.is-hn
    --brand: var(--hn)
    margin-bottom: 0
  &.is-reddit
    --brand: var(--reddit)
    margin-bottom: 0
  &.is-html,
  &.is-css,
  &.is-paypal
    &:hover
      img
        mix-blend-mode: screen
  &.is-patreon,
  &.is-paypal
    width: 100%
    em
      font-size: 1em
    strong
      display: inline
  &.is-udemy
    padding-bottom: 1em
    padding-top: 0
    em
      color: $text-light
      opacity: 1
    &:hover
      background-color: $background
      color: $text-strong
  &.is-udemy-advanced
    width: 100%

.content
  kbd
    -moz-osx-font-smoothing: auto
    -webkit-font-smoothing: auto
    font-family: monospace
    font-size: 0.875em
    font-weight: normal
    &.key
      background-color: $background
      border: 1px solid $border
      border-radius: 3px
      box-shadow: 0 1px 0 rgba($black, 0.2), inset 0 0 0 1px $white
      color: $purple
      padding: 0.25em 0.5em 0.25em
  h2
    font-size: 1.5em
    padding-top: 0
    position: relative
  h3
    color: $red
    font-size: 1.125em
    margin: 1em 0
  table
    border: 1px solid $border
  pre
    padding: 1.25rem 1.5rem
  p,
  li
    a
      border-bottom: 2px solid rgba($blue, 0.1)
      padding-bottom: 2px
      &:hover
        border-bottom-color: $blue
      &[target="_blank"]
        &::after
          content: "↗️"
          font-size: 0.75em
          margin-left: 0.5em
          margin-right: 0.25em
  .label
    font-size: 0.875em
    &:not(:last-child)
      margin-bottom: 0.5em
  .focus
    margin: 2em 0
    text-align: center
    a
      display: inline-block
      vertical-align: top
      &[target="_blank"]::after
        display: none
      &.share
        border-bottom: none
        width: 100%
  .madeby
    color: $text-light
    font-size: 0.875em
    a[target="_blank"]::after
      content: "❤️"
  .panorama
    display: block
    margin-bottom: 3rem
    img
      display: block
  .stabilo
    background-color: transparent
    color: $border
    white-space: nowrap
    span
      background-color: $hl-background
      &.is-blue
        color: $hl-blue
      &.is-black
        color: $hl-black
      &.is-green
        color: $hl-green
      &.is-red
        color: $hl-red
      &.is-purple
        color: $hl-purple
  .newsletter
    background-color: $jt
    border-radius: 5px
    margin-bottom: 1.5rem
    padding: 2rem
    h3
      margin-top: 0
    .help
      em
        color: rgba($black, 0.5)
        font-style: normal

@keyframes blink
  from
    background-color: lightyellow
  to
    background-color: transparent
