@import 'nib'

$red = #ff5470
$yellow = #fff147

@keyframes morph-color
  from
    background-color: $yellow

  to
    background-color: $red


@keyframes going-up
  to
    transform: translate3d(0, -75%, 0)


::-moz-selection
  background: #000
  color: #fff
  text-shadow: none


::selection
  background: #000
  color: #fff
  text-shadow: none



html
  font-size: 85%
  background-color: #222
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif
  -webkit-font-smoothing: antialiased
  font-smoothing: antialiased


body
  padding: 3.125rem
  max-width: 60rem
  margin: 0 auto
  color: #ccc


h1
  font-family: Futura, "Helvetica Neue", Arial, Helvetica, sans-serif
  font-weight: bolder
  display: none
  font-size: 8.75rem
  background-color: #fff147
  color: #222
  text-align: center
  box-sizing: border-box
  margin: 0.2rem
  margin-bottom: 1.6rem
  line-height: 1.3
  width: 12.5rem
  height: 12.5rem
  animation: morph-color 5s infinite
  animation-direction: alternate


  &.photo
    color: transparent
    background-color: transparent
    background-image: url('k2.jpg')
    background-size: 250px
    background-position: center


section
  margin-bottom: 3rem

  &:first-child
    margin-bottom: 1rem

  > a
    font-size: 1.5rem


h3
  color: $red


.demo
  width: 245px
  height: 301px
  background-size: 245px 301px
  display: inline-block
  margin-bottom: 2rem


#demo1
  background-image: url('1.jpg')

#demo2
  background-image: url('2.jpg')

#demo3
  background-image: url('3.jpg')

#demo4
  background-image: url('4.jpg')

#demo5
  background-image: url('5.jpg')

#demo6
  background-image: url('6.jpg')

span
  background-color: #eee
  font-size: 1.875rem
  color: #222
  font-weight: bold
  letter-spacing: -2px
  padding: 0.625rem
  margin: 0.625rem
  display: inline-block

  a:hover
    color: #222


a, em
  color: #888
  text-decoration: none
  font-style: normal


a
  color: $red
  transition: color .33s

  &:hover
    color: #fff


pre
  background-color: #444
  color: #ddd
  font-size: 1.2rem
  margin: 0.8rem
  padding: 1rem
  overflow: auto


footer
  text-align: center
  font-size: 1.2rem


#count-demo
  width: 25rem
  height: 25rem
  margin: 1rem auto
  overflow: hidden

  ul
    list-style: none
    margin: 0
    padding: 0
    width: 100%
    animation: going-up 20s infinite linear
    animation-direction: alternate

    li
      width: 25rem
      height: 25rem
      padding: 0
      margin: 0
      font-size: 19rem
      line-height: 1.35
      font-weight: bolder
      text-align: center
      color: rgba(0, 0, 0, .3)

      &:nth-child(1)
        background-color: $red

      &:nth-child(2)
        background-color: #4aaaed

      &:nth-child(3)
        background-color: #8bf64d

      &:nth-child(4)
        background-color: #4aeda5

