// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much
html
  background: $background-color

body
  font-weight: 300

body > div > div
  border: none

body > header
  border-color: $header-color
  +background(linear-gradient(top, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.15) 100%))
  background-color: $header-color
  border-width: 0 0 1px
  border-style: solid
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 -1px 0px rgba(255, 255, 255, 0.4)
  padding-top: 0.8em
  padding-bottom: 0.9em
  h1
    display: inline-block
    margin-top: 0
    font-weight: 700
    line-height: 0

a
  +transition(color 0.25s 0s ease)
  color: $link-color
  &:hover
    color: $link-color-hover

header nav
  display: inline
  position: relative
  ul
    list-style: none
    float: right
    display: block
    margin: 0
    padding: 0
    border: 0
    li
      padding-left: 1.25em
      float: left
    padding-top: .15em
  a
    +transition(text-shadow 0.25s 0s ease)
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.2)
    color: white
    text-decoration: none
    &:hover, &:focus
      color: white
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.6)

article > header
  text-align: left

article > header h1, #content .blog-index article h1
  font-size: 1.5em

body > nav
  border: none

body > nav a
  text-shadow: none
  display: inline

@media only screen and (max-width: 400px)
  header
    text-align: center
  header nav
    display: none

blockquote
  font-size: 1em
  border: none

#content div.pagination, #content div.navigation
  text-align: center
  font-size: .95em
  height: 1.5em
  position: relative
  padding:
    top: 1.5em
    bottom: 1.5em
  &:after
    display: block
    content: ""
    clear: both
  a
    text-decoration: none
    color: $text-color-light
    &:hover
      color: $link-color-hover
    &[href*=archive]
      &:before, &:after
        content: '\2014'
        padding: 0 .3em

#content div.navigation
  a
    &.prev
      float: left
    &.next
      float: right

#content div.pagination
  a
    &.prev
      position: absolute
      left: 0
    &.next
      position: absolute
      right: 0