$mobile-break: 500px

.header
  overflow: hidden
  background-color: lightgrey
  padding: 20px 10px

.header a
  float: left
  color: black
  text-align: center
  padding: 12px
  text-decoration: none
  font-size: 18px
  line-height: 25px
  border-radius: 4px

.header a.name
  font-size: 25px
  font-weight: bold

.header a:hover
  background-color: #dddddd
  color: black

.header a:active
  background-color: dodgerblue
  color: white

.header-right
  float: right

@media screen and (max-width: $mobile-break)
  .header a
    float: none
    display: block
    text-align: left

  .header-right
    float: none