@import "variables"
@import "mixins"
@import "layout"
@import "anchors"
@import "sections"

html
  font: 16px/1.4 $base-font-family
  color: #342828
  background-color: $color-sand

a
  color: $color-ocre
  text-decoration: none

a:hover
  text-decoration: underline

h1
  color: $color-ocre
  font-size: 3.2em
  font-weight: bold
  font-family: $base-font-family
  margin-bottom: 0
  line-height: 1
  text-transform: lowercase

h2
  font-size: 1.2em
  margin-top: 0.2em
  margin-bottom: 2em

h1, h2
  text-align: left

h3
  font-size: 1.3em
  font-family: $base-font-family
  margin-bottom: 1em
  position: relative
  padding-left: .1em

h3:hover .anchor, h3:focus .anchor
  display: block

h3 ~ p
  margin-top: 0

h1, h2, h3
  margin-top: 0
  padding-top: 1em

.about
  text-align: center

.about
  margin-top: 0

header
  .mark
    float: left
    margin-top: 2em
    margin-left: 2em
    clear: both
    width: 80px

    @inclde sm
      margin-top: 1em
      margin-left: 1.5em
      width: 100px

    @include md
      width: 120px
      margin-top: 3em 
      margin-bottom: 2em 
      margin-left: 3em

    @include lg
      width: 150px
      clear: none
      margin-top: 3em 
      margin-bottom: 4em 

    @include xl
      width: 150px

  .locales
    margin-top: 2em
    margin-right: 3em
    margin-left: 1em
    font-size: 75%

    @include md
      font-size: 85%
  
    @include lg
      font-size: 100%
      margin-bottom: -2em
      margin-top: 2em

  .newer, .last-version-notice
    padding: 1rem
    background-color: rgba(0, 0, 0, 1)
    color: #efefef

.footer
  line-height: 2.2

  .mark
    float: left

.locales
  float: right
  background-color: rgba(255, 255, 255, .5)
  border-radius: .5rem
  padding: .7rem 1rem

.locales li
  float: right
  font-size: 0.7em
  display: inline
  list-style-type: none
  white-space: nowrap

pre, code
  background-color: $color-light-sand
  font-family: $source-code-font-family
code
  white-space: nowrap