// The site-wide header, with title, recent posts, and identity links

#header
  display: flex
  flex-direction: column
  align-items: flex-end
  justify-content: space-between

  background-color: #1f1815
  background-attachment: scroll, fixed
  background-image: url("/res/images/overlay.png"), url("/res/images/background.jpg")
  background-position: top left, top left
  background-repeat: repeat, no-repeat
  background-size: auto, auto 100%

  color: rgba(255, 255, 255, 0.4)

  width: 20%
  height: 100%
  left: 0
  top: 0

  position: fixed
  text-align: right
  padding: 8em 2em 8em 1em

  @media screen and (max-width: 1280px)
    padding: 6em 3em 3em 3em
    width: 30%

  @media screen and (max-width: 980px)
    background-attachment: scroll
    background-position: top left, center center
    background-size: auto, cover
    left: auto
    padding: 6em 4em
    position: relative
    text-align: center
    top: auto
    width: 100%
    display: block

  @media screen and (max-width: 736px), screen and (max-height: 700px)
    padding: 2.25em 1.5em
    min-height: 18em

    ul
      margin-bottom: 0

  @media screen and (max-width: 480px), screen and (max-height: 700px)
    padding: 2.25em 1.5em 2em
    min-height: 18em

  ul
    margin-bottom: 0

  & > *
    flex-shrink: 0
    width: 100%

  & > .inner
    flex-grow: 1
    margin: 0 0 2em 0

  section
    padding: 20px 0

    @media screen and (max-width: 980px)
      padding: 0

  a
    text-decoration-color: transparent
    transition: color 0.2s ease-in-out, text-decoration-color 0.25s linear

    &:hover
      text-decoration: underline

  h1
    font-size: 1.35em
    line-height: 1.75em
    margin: 0
    text-transform: uppercase
    color: $darkest-gray

    @media screen and (max-width: 1280px)
      font-size: 1.25em

    @media screen and (max-width: 980px)
      font-size: 1.75em

  p
    color: #d2d2d2
    position: relative
    margin: 0 0 1.5em 0


// Recent posts list

#posts ul
  list-style-type: none

  @media screen and (max-width: 980px)
    position: absolute
    bottom: 20px
    right: 20px

    .recent
      display: none

  li
    margin: 20px 0
    font-size: 0.9em
    line-height: 1.3em

    @media screen and (max-width: 980px)
      margin: 0.4em

    &.recent a
      background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 60%)
      display: inline-block
      width: 100%
      padding: 0.4em 0.5em 0.5em 2em


// Identity links

#identities
  position: absolute
  bottom: 20px
  left: 20px
  text-align: left

  ul
    margin-bottom: 0

  li
    font-size: 0.8em
    line-height: 1.4em
    margin: 0.4em 0

    &#pgp
      font-family: monospace