@import compass

html, body

  background: #111

#container

  background: #111
  position: absolute
  left: 50%
  top: 50%

#stats

  position: absolute
  right: 10px
  top: 10px

/* Info */

@import url( https://fonts.googleapis.com/css?family=Quantico )

@keyframes show-info
  0%
    transform: rotateY(120deg)
  100%
    transform: rotateY(0deg)

.info

  transition: all 180ms ease-out
  transform-style: preserve-3d
  transform: perspective(800px)

  font-family: 'Quantico', sans-serif
  position: absolute
  font-size: 12px
  opacity: 0.8
  color: #fff
  width: 220px
  left: 0px
  top: 20px

  &:hover

    box-shadow: 0 0 0 4px rgba(255,255,255,0.05)
    opacity: 1.0

  h1, h2, h3

    line-height: 1
    margin: 5px 0

  a

    transition: all 200ms ease-out
    border-bottom: 1px dotted rgba(255,255,255,0.4)
    text-decoration: none
    opacity: 0.6
    color: #fff

    &:hover

      opacity: 0.99

  .about,
  .more

    transform-origin: 0% 50%
    transform: rotateY(120deg)

    margin-bottom: 1px
    background: rgba(0,0,0,0.8)
    padding: 12px 15px 12px 20px

  .about

    animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 600ms 1 normal forwards
    padding-bottom: 15px

    a
      opacity: 0.9

    h1

      letter-spacing: -1px
      font-weight: 300
      font-size: 19px
      opacity: 0.95

    h2

      font-weight: 300
      font-size: 13px
      opacity: 0.8

    h3

      text-transform: uppercase
      margin-top: 10px
      font-size: 11px

      &:before

        margin-right: 2px
        font-size: 14px
        content: '\203A'

  .more

    animation: show-info 500ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 500ms 1 normal forwards
    padding: 5px 15px 10px 20px

    a
    
      text-transform: uppercase
      margin-right: 10px
      font-size: 10px