*
  box-sizing: border-box

html
  border-top: 6px solid #666

body
  +latofont(100)
  font-size: 1.2em
  line-height: 1.2em
  text-align: center
  text-rendering: optimizeLegibility
  max-width: 50em
  padding: 3em
  margin: 0 auto
  opacity: 1
  +transition(opacity 1.6s)

p
  text-align: center
  line-height: 1.2em
  margin: 0 auto

a
  color: #666
  background-color: rgba(#f0f0f0,0)
  border-bottom: 1px solid #666
  text-decoration: none
  padding: 2px
  margin: -2px
  +transition(background 300ms, border 300ms, padding 300ms)

  &:hover
    background-color: #f0f0f0
    border-bottom: 1px solid #f0f0f0
    text-decoration: none

h1, h2, h3
  +latofont(100)
  line-height: 1em

h1
  font-size: 3em
  margin: 0.6em 0

h2
  font-size: 1.6em
  margin: 0.2em 0

h3
  font-size: 0.4em

button
  +latofont(100)
  background-color: #666
  color: #f0f0f0
  font-size: 1.6em
  width: 100%
  border: 4px solid #666
  padding: 0.3em 0.6em
  cursor: pointer

  +transition(background-color 200ms, color 200ms)

  &:hover
    background-color: #f0f0f0
    color: #666

.loading
  opacity: 0