@import url('https://fonts.googleapis.com/css?family=Hind:300,400,600,700')
$bkg: #25252D
$header: #1d1e23
$action: #2e5cfd
$action-secondary: #ffcd05
$text: #eaeaea

a
  color: $action-secondary
  font-size: .8em
  font-weight: 700
  text-decoration: none
  text-transform: uppercase
  transition: color 250ms

  &:hover
    color: lighten($action-secondary, 10%)

input[type="submit"]
  background: $action
  border: 0
  color: #fff
  cursor: pointer
  font-family: 'Hind', sans-serif
  outline: transparent
  padding: 1em 2em
  text-transform: uppercase
  transition: background 250ms

  &:hover
    background: lighten($action, 5%)

body
  background: $bkg
  color: $text
  display: flex
  flex-direction: column
  font-family: 'Hind', sans-serif
  font-size: .9em
  font-weight: 300
  margin: 0
  min-height: 100vh
  padding: 0

header
  background: $header
  order: 1

nav
  order: 0

  ul
    display: flex
    justify-content: center
    list-style: none
    margin: 0
    padding-left: 0

    a
      color: $text
      display: block
      font-weight: 600
      padding: 1em
      text-decoration: none

main
  flex-grow: 1
  margin: 0 auto
  max-width: 1200px
  order: 3
  width: 100%

footer
  background: $header
  margin-top: 2em
  order: 4

  ul
    display: flex
    justify-content: center
    list-style: none
    padding: 0

    a
      color: inherit
      text-decoration: inherit
      padding: 1em

h1
  color: $action-secondary
  font-weight: 300
  margin: 2em auto
  max-width: 1200px

  &::after
    background: $action-secondary
    content: ''
    display: block
    height: 3px
    width: 30px

  abbr
    display: block

h2
  font-weight: 400

dl
  display: flex
  flex-wrap: wrap

  dt
    box-sizing: border-box
    display: flex
    flex-direction: column
    line-height: 50px
    text-align: center
    padding: 1em
    width: 300px

  dd
    box-sizing: border-box
    margin-left: -300px
    padding: 3em 0 0
    text-align: center
    width: 300px

#planet main, #emplois main, #index-news
  box-sizing: border-box
  display: flex
  flex-wrap: wrap

  article
    background: lighten($bkg, 5%)
    border: 1px solid $bkg
    box-sizing: border-box
    flex: 1 50%
    padding: 2em

    a
      color: $action-secondary
      font-size: .8em
      font-weight: 700
      text-decoration: none
      text-transform: uppercase
      transition: color 250ms

      &:hover
        color: lighten($action-secondary, 10%)

    h2
      flex: 1 100%

    article
      background: lighten($bkg, 5%)
      border: 1px solid $bkg
      box-sizing: border-box
      flex: 1 50%
      padding: 2em

      h2
        font-size: 1.2em
        font-weight: 600