// HEADER

.header
  // margin-top: 52px
  background-color: $color-primary
  color: white

  a
    color: white

  .container
    padding: 0 0 2rem
    display: flex
    align-items: center

  .titleContainer
    flex: 1
    text-align: center
    margin: 2rem 0 0 2rem

  .logo
    border-bottom-left-radius: 10px
    border-bottom-right-radius: 10px
    padding: 10px
    background-color: white

  h1, .title
    color: white
    font-family: $font-family-serif2
    font-size: 3rem
    font-weight: bold
    line-height: 1.1
    margin: 0
    padding: 0

  cite
    font-size: 1.4rem


@media screen and (max-width: 839px)
  .header
    margin-top: 0

    .container
        max-width: 680px
        padding: 0

    .titleContainer
      padding: 0
      margin: 1rem

    .logoContainer
      position: relative
      margin: 1rem
      top: 0

    img
      width: 100px
      height: 100px
      border-radius: 10px

    h1
      font-size: 2rem

    cite
      font-size: 1rem

@media screen and (max-width: 599px)
  .header
    .container
      align-items: flex-end
    .titleContainer
      display: none
    .logoContainer
      left: calc(50% - (152px / 2))