@import normalize
@import typeplate
@import compass/css3
@import compass/css3/user-interface

$width: 700px 
$bg: lighten(#829AB5, 30%)
$pre-bg: lighten(#D6D5D1, 10%)
$a-color: lighten(#C14543, 10%)
$a-color-hover: #829AB5
$header-color: #C14543

@mixin fancy
  & > span

    & > span
      +user-select(none)
      color: rgba($header-color, 0.6)
      display: inline-block
      text-shadow: 3px 3px 0 rgba(lighten($header-color, 20%), 0.4)
      cursor: default
      pointer-events: none

      &:nth-child(2n)
        +transform(rotate(-6deg))
        color: rgba($header-color, 0.7)
      
      &:nth-child(3n)
        +transform(translateY(20px))
      
      &:nth-child(4n)
        color: rgba($header-color, 0.5)
      
      &:nth-child(3n+3)
        +transform(scale(1.1) rotate(5deg))
      
      &:nth-child(7n)
        +transform(scale(0.8))
      
      &:nth-child(12n)
        +transform(scale(1.1))

      &.x
        display: none

html, body, .main
  background: $bg

body
  border-top: 5px solid lighten($header-color, 20%)

.main
  font-size: 80%
  width: $width
  margin: 0 auto
  padding: 40px 0

  & > .section > p:nth-child(2)
    position: relative
    top: -#{$alpha+10}px
    font-size: 90%
    text-align: center
    color: lighten($header-color, 10%)
    opacity: 0.8
    font-weight: bold

  h1, h2, h3, h4, h5, h6
    +fancy
    text-align: center
    margin: 1.6em 0

  a
    color: $a-color
    text-decoration: none
    &:hover
      color: $a-color-hover

  .section > div
    margin-bottom: 1.5em

  .pre
    background: $pre-bg
    padding: 0 0.3em
    color: darken($bg, 40%)

  .contents
    ul
      list-style-type: none