html, body {
  background: #f5f5f5
  margin: 0
  font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif
  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
  }
  [type='search'] {
    padding: 4px 8px;
    border-radius: 3px;
    border: 0 none;
    background: #ffffff;
    color: #656565;
    font-size: 120%;
    width: 180px;
    box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1)
    :focus {
      outline: 0;
      box-shadow: inset 0 0 0px 1px #286bc3
    }
  }
}

::-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
}