$chartWidth: 600px

*
 box-sizing: border-box
 font-family: 'Spectral', serif

a
 text-decoration: none
 color: inherit
 cursor:pointer

.header-ghost
 height: 145px

header
 position: fixed
 z-index: 100
 top: 0
 right: 0
 left: 0
 background: #3C873C
 height: 135px
 color: white
 text-shadow: 0 0 1px rgba(0,0,0,0.1)
 
 h1
  text-align: center
 
@media screen and (max-width: 500px) 
 
 header
  height: 165px
  
  h1
   margin: 15px
   text-align: center
   
 .header-ghost
  height: 170px


.chart-headers
 max-width: $chartWidth
 margin: 0 auto
 display: flex
 padding: 3px
 
.chart-headers .userName, .chart-headers .score
 font-size: 30px
 font-family: 'Spectral', serif
 
.rank
 width: 55px
 font-size: 25px
 text-align: center
 padding: 16px 0

.userName
 text-align: center
 font-size: 22px
 width: 295px
 padding: 16px 0
 font-family: serif
 
.score
 text-align: center
 font-size: 25px
 padding: 16px 0
 width: 180px
 
.chart-headers .score:hover
 color: #8B2D2D
 text-shadow: 0 0 1px rgba(0,0,0,0.1)
 
 
.main-board
 max-width: $chartWidth
 margin: auto

.odd
 background: #B5AEC9
 
.even
 background: #ACB3C6
 
.camper
 border-radius: 8px
 margin: 3px
 display: flex
 
.camper:hover
 background: #A4C270
 
.ghost-img
 width: 50px
 margin: 5px
 
.camper img
 width: 50px
 height: 50px
 border-radius: 10px
 margin: 5px