@import url('https://fonts.googleapis.com/css?family=Roboto:400,700')
@import './settings.json'
@import '~normalize.css/normalize.css'

body
  align-items: center
  display: flex
  flex-direction: column
  font-family: 'Roboto', sans-serif
  font-size: 18px
  padding: 2rem
  color: transparentize(black, 0.1)

  > *
    width: 100%
    max-width: 600px

p
  margin: 0
  word-wrap: break-word

  & + p
    margin-top: 1rem

body, html
  margin: 0

.bar
  position: absolute
  top: 0
  left: 0
  max-width: 100%
  height: 5px
  background-color: $color

h1, h2
  margin: 0 0 1rem

  &:not(.top)
    margin: 1rem 0

a
  color: $color
  font-weight: bold

ul
  padding: 0
  margin: 0

  .title
    font-weight: bold

  li
    &:not(:first-of-type)
      margin-top: 0.75rem

    a
      font-size: 1.2rem

      img
        display: inline-block
        margin-left: 0.5rem
        margin-bottom: -0.25rem

ul.projects
  list-style: none

  .wip
    font-style: italic
    color: gray

  a
    display: table-cell

    &.smaller
      font-size: 95%

ul.supporters
  list-style: square
  margin: 1rem 0

.patreon-button
  margin: 0.25rem 0 0

  img
    height: 50px