$primary: #39A2FB
$secondary: #F1F9FF
$tertiary: #2699FB
$fourth: #BCE0FD

$mediaMaxScreenSizeMobile: 1200px

$white: #FFFFFF

@import "reset"
@import url('https://fonts.googleapis.com/css?family=Roboto')

html, body
  height: 100%
  font-family: 'Roboto', sans-serif

h3
  font-size: 40px
  font-weight: bold

h5
  font-size: 24px

.center
  display: inline-block
  width: 100%
  text-align: center

.contentBlock
  min-height: 300px
  width: 100%
  padding: 2em
  box-sizing: border-box

#navbar
  width: 100%
  height: 4em
  background: $primary
  line-height: 4em

  >.navbaritem
    display: inline-block
    color: $white
    vertical-align: middle

    &#navname
      font-weight: bold
      margin-left: 1em
      margin-right: 6em
      font-size: x-large


#innerNavbar
  >.navitem
    margin: 0 1em
    display: inline-block


#content
  height: calc(100% - 4em)
  width: 100%

#main
  display: grid
  height: 100%
  background: $secondary

#innerMain
  color: $tertiary
  text-align: center
  max-width: 800px
  margin: auto
  >h3
    font-weight: bold

  >.intro
    margin-top: 2em

  >.buttons
    margin-top: 4em

#blogposts
  background: $white
  display: grid
  grid-template-columns: repeat(3, auto)
  grid-template-rows: auto

  &>.blogpost
    padding: 0 1em
    &:first-child
      padding-left: 0
    &:last-child
      padding-right: 0

  @media screen and (max-width: $mediaMaxScreenSizeMobile)
    grid-template-columns: auto
    grid-template-rows: repeat(3, auto)
    &>.blogpost
      padding-top: 2em
      &:first-child
        padding-top: 0
        padding-left: 1em
      &:last-child
        padding-right: 1em

#quote
  background-color: $tertiary
  color: $white
  >#innerQuote
    margin-top: 2em
    max-width: 900px
    margin-left: auto
    margin-right: auto

.button
  padding: 1em 2em
  border-radius: 8px
  border: 1px solid $tertiary
  margin: 0 2em
  color: $primary
  text-decoration: none

  &.button-dark
    background: $tertiary
    color: $white