html, body {
  background: #f5f5f5
  margin: 0
  font: caption
  overflow: hidden
  height: 100%
  font-size: 12px
  -webkit-user-select: none
  color: #2b2b2b
}

body {
  display: flex
  flex-direction: column
  line-height: 1.2
}

h1 {
  font-size: 200%
  margin: 4px 0
  font-weight: normal
  flex: 1
}

select {
  font-size: 80%
  display: inline-block
  padding: 2px 4px
  height: 18px
  border: 1px solid #A9A9A9
  background: #666 svg(dropArrow) no-repeat right
  -webkit-appearance: none
  color: #FFF
  padding-right: 12px
  border-radius: 0

  :hover {
    background-image: svg(dropArrow -active)
  }

  @svg dropArrow {
    width: 12px
    height: 6px
    content: "<path d='M2,0 L10,0 L6,6 Z' />"

    path {
      fill: #888
    }

    -active {
      path {
        fill: #DDD
      }
    }
  }
}

input {
  [type='text'] {
    font-size: 80%
    display: inline-block
    padding: 2px 4px
    height: 18px
    border: 1px solid #A9A9A9
    background: #333
    color: #FFF
    padding-right: 12px
    border-radius: 0
  }
}

::-webkit-file-upload-button {
  font-family: inherit
}

a {
  color: #286bc3
  text-decoration: none

  code {
    color: #8EC1FC
  }

  :hover {
    text-decoration: underline
  }
}

* + h1 {
  margin-top: 16px
}

* {
  box-sizing:border-box
}

input, textarea, keygen, select, button {
  font-family: '.SFNSText-Regular', sans-serif
}