$background-color: #03071E
$text-color: #EAE2B7
$secondary-text-color: #F77F00
$primary-color: #D62828
$secondary-color: #F77F00

body
  margin: 0
  padding: 0
  display: flex
  flex-direction: column
  background-color: $background-color
  color: $text-color

a
  color: inherit
  font-size: 125%
  text-decoration: none
  letter-spacing: 2px

p
  font-size: 150%
  margin: 0

h3
  font-size: 200%
  margin: 0

ul
  display: flex
  flex-direction: row
  font-size: 20px
  list-style: none

  li
    padding-right: 30px

ol
  display: flex
  flex-direction: column
  list-style: georgian

.header
  background-color: $background-color
  width: 100%
  height: 100px
  display: flex
  align-items: center
  justify-content: flex-end
  font-family: 'Roboto', sans-serif

.header-title
  margin: 100px 0
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  font-family: 'Staatliches', sans-serif

  h1
    font-size: 90px
    letter-spacing: 30px
    margin: 0

  h2
    font-size: 30px
    letter-spacing: 10px
    margin: 0

.divider
  height: 3px
  background-color: #ad080f

.navigation
  background-color: black
  color: inherit
  font-family: 'Roboto', sans-serif
  width: 100%
  padding-top: 1%
  padding-bottom: 1%
  height: 5%
  min-height: 50px
  display: flex
  align-items: center

  img
    margin-right: auto
    width: 3%
    min-width: 30px
    padding-left: 2.5%

  a
    padding: 0 2%
    font-size: 200%
    font-weight: bolder

.article
  padding: 2%

  &:hover
    color: white

.article-body
  width: 60
  font-size: 80%
  font-weight: normal
  margin-top: 1%
  font-family: 'Roboto Mono', monospace

.article-body, .article-body-fulltext
  width: 100%

.article-description
  font-weight: 500
  font-family: 'Roboto Mono', monospace
  color: #D00000
  font-size: 75%
  margin-top: 0.5%

  &:p
    white-space: pre

.articles
  margin: auto
  width: 80%
  font-family: 'Roboto', sans-serif

.foot
  display: flex
  align-items: center
  justify-content: space-between
  width: 100%
  margin: 2.5% 0

  a
    font-family: 'Roboto Mono', monospace
    font-weight: normal
    padding: 0 10%

i
  margin-right: 20px

@media screen and (max-width: 1000px)
  .navigation
    flex-direction: column

    img
      margin: 10px 0
      padding: 0

    *
      margin: 5px 0

  .header-title
    text-align: center

    h1
      font-size: 50px
      letter-spacing: 20px

    h2
      font-size: 20px
      letter-spacing: 10px

  .articles
    width: 95%

    div
      margin: 10px 0

  h3
    font-size: 130%
  p
    font-size: 100%

  .foot
    flex-direction: column



@media screen and (max-width: 500px)
  .header-title
    h1
      font-size: 40px
      letter-spacing: 5px

    h2
      letter-spacing: 3px

  .article-description
    p
      display: flex
      flex-direction: row
      justify-content: space-between