#header
  width: 100%
  background: linear-gradient(#e66465, #9198e5)
  height: 77px
  @media screen and (max-width: 767px)
    height: 43px

.info-container
  display: inline-block
  vertical-align: top
  padding: 0
  box-sizing: border-box
  p
    display: flex
    padding: 3px
    border: 1px solid black;
    margin: 25px 15px 5px 7px
    @media screen and (max-width: 767px)
      margin-top: 7px

#mainTitle
  font-style: italic
  margin-left: 10px
  @media screen and (max-width: 767px)
    margin-left: 5px
  float: left
  img
    display: inline-block
    height: 30px
    margin-top: 25px
    @media screen and (max-width: 767px)
      margin-top: 7px
  p
    font-weight: bold
    padding: 0
    border: none
    margin-top: 21px
    font-size: 1.5em
    @media screen and (max-width: 767px)
      margin-top: 10px
      font-size: 1em

#flagMenu
  float: right
  margin-right: 10px
  @media screen and (max-width: 767px)
    margin-right: 5px
  img
    display: inline-block
    height: 30px
    padding-top: 27px
    @media screen and (max-width: 767px)
      padding-top: 8px

// TODO: box-shadow or box-sizing ? https://stackoverflow.com/a/13517809
.variant
  box-sizing: border-box
  border: 1px solid brown
  background-color: lightyellow
  &:hover
    background-color: yellow
  a
    color: #663300
    text-decoration: none
  .boxtitle
    font-weight: bold
    margin-bottom: 0
  .description
    @media screen and (max-width: 767px)
      margin-top: 0

#welcome
  max-width: 767px
  @media screen and (max-width: 767px)
    max-width: 100vw
  img
    width: 75%
    @media screen and (max-width: 767px)
      width: 100%
      max-width: 552px
  ul
    list-style-type: none
  // TODO: bad practice, shouldn't use table to align things...
  table.list-table
    width: 300px
    margin: 0 auto
    border: 0
    tbody
      border: 0
      tr
        border: 0
        margin: 0
        padding: 0
        td
          padding: 0
          text-align: left
          border: 0