// You should replace all this content with your styles :)
// Of course you can grab from here something you like :)

@import 'base'

// Octocat corner styles
.open-source
  display: block
  position: absolute
  width: 80px
  height: 80px
  top: 0
  right: 0
  text-decoration: none
  &:active
    .background
      background: #ddd
  .crop
    position: absolute
    top: 0
    left: -10px
    width: 90px
    height: 90px
    overflow: hidden
  .background, .corner
    position: absolute
    top: -65px
    left: 32px
    width: 120px
    height: 120px
    +rotate(45deg)
  .background
    background: #e8e8e8
    +box-shadow(rgba(0, 0, 0, 0.5) 0 -7px 7px -7px inset)
  .source
    position: absolute
    color: black
    text-shadow: white 0 1px 0
    left: 40px
    line-height: 1.1
    code
      font-size: 10px
      font-family: "PT Mono", monospace
  .source-crop
    position: absolute
    width: 120px
    height: 120px
    background: #DDD
    top: 22px
    left: -50px
    +rotate(45deg)
  .octocat
    position: absolute
    width: +image-width("octocat.png")
    height: +image-height("octocat.png")
    background: inline-image("octocat.png")
    +rotate(45deg)
    top: 24px
    left: 43px
    +box-shadow(rgba(0, 0, 0, 0.4) 0 -5px 5px -5px inset)
  .corner
    position: absolute
    overflow: hidden
    left: 21px
    top: -66px
  .title
    position: absolute
    top: 82px
    left: 23px
    width: 82px
    height: 80px
    +rotate(45deg)
    background: white
    +box-shadow(rgba(0, 0, 0, 0.5) 0 0 3px)
  .border, .text
    position: absolute
    bottom: 0
    width: 100%
  .border
    border-top: 1px dashed #999
  .text
    bottom: 4px
    text-align: center
    font-size: 12px
    color: #666
    padding-left: 5px
  .rotator
    position: absolute
    width: 80px
    height: 80px
    left: 10px
    z-index: 3
  .translate
    position: absolute
    top: 90px
    text-align: center
    color: #666
    font-size: 13px
    opacity: 0
    +transition(opacity 400ms)
    &.show
      opacity: 1

.transform3d
  .open-source
    .text, .border
      +backface-visibility(hidden)
    .rotator
      +transition(all 600ms cubic-bezier(0.455, 0.030, 0.515, 0.955))
    .shadow
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: 0
      background: rgba(0, 0, 0, 0.1)
      opacity: 0
    &:hover
      .rotator
        +rotate3d(1, 1, 0, 180deg)

.transform2d
  .open-source
    &:hover
      .text, .border
        display: none
      .rotator
        +rotate(180deg)
      .translate
        opacity: 1


// bottle with ruby

*
  padding: 0
  margin: 0
  border: none

@-webkit-keyframes spaceboots
  0%
    -webkit-transform: translate(2px, 1px)
    -webkit-transform: rotate(0deg)
  10%
    -webkit-transform: translate(-1px, -2px)
    -webkit-transform: rotate(-1deg)
  20%
    -webkit-transform: translate(-3px, 0px)
    -webkit-transform: rotate(1deg)
  30%
    -webkit-transform: translate(0px, 2px)
    -webkit-transform: rotate(0deg)
  40%
    -webkit-transform: translate(1px, -1px)
    -webkit-transform: rotate(1deg)
  50%
    -webkit-transform: translate(-1px, 2px)
    -webkit-transform: rotate(-1deg)
  60%
    -webkit-transform: translate(-3px, 1px)
    -webkit-transform: rotate(0deg)
  70%
    -webkit-transform: translate(2px, 1px)
    -webkit-transform: rotate(-1deg)
  80%
    -webkit-transform: translate(-1px, -1px)
    -webkit-transform: rotate(1deg)
  90%
    -webkit-transform: translate(2px, 2px)
    -webkit-transform: rotate(0deg)
  100%
    -webkit-transform: translate(1px, -2px)
    -webkit-transform: rotate(-1deg)

@-webkit-keyframes water
  0%
    -webkit-transform: translate(20px, 10px)
  10%
    -webkit-transform: translate(-10px, -20px)
  20%
    -webkit-transform: translate(-25px, 0px)
  30%
    -webkit-transform: translate(0px, 20px)
  40%
    -webkit-transform: translate(10px, -10px)
  50%
    -webkit-transform: translate(-10px, 20px)
  60%
    -webkit-transform: translate(-25px, 10px)
  70%
    -webkit-transform: translate(20px, 11px)
  80%
    -webkit-transform: translate(-10px, -10px)
  90%
    -webkit-transform: translate(20px, 20px)
  100%
    -webkit-transform: translate(20px, 10px)

@-webkit-keyframes bubbleFloat
  0%
    bottom: 50px
  10%
    +opacity(0)
  20%
    +opacity(1)
  33%
    bottom: 340px
    left: 170px
  35%
    +opacity(0)
  100%
    bottom: 50px
    +opacity(0)

@-webkit-keyframes bubbleFloat2
  0%
    bottom: 40px
  10%
    +opacity(0)
  25%
    +opacity(1)
  33%
    bottom: 320px
    left: 150px
  35%
    +opacity(0)
  100%
    bottom: 40px
    +opacity(0)

@-webkit-keyframes bubbleFloat3
  0%
    bottom: 40px
  10%
    +opacity(0)
  25%
    +opacity(1)
  33%
    bottom: 320px
    left: 135px
  35%
    +opacity(0)
  100%
    bottom: 40px
    +opacity(0)

@-webkit-keyframes bubbleFloat4
  0%
    bottom: 40px
  10%
    +opacity(0)
  25%
    +opacity(1)
  33%
    bottom: 320px
    left: 120px
  35%
    +opacity(0)
  100%
    bottom: 40px
    +opacity(0)

@-webkit-keyframes bubbleFloat5
  0%
    bottom: 40px
  10%
    +opacity(0)
  25%
    +opacity(1)
  33%
    bottom: 320px
    left: 150px
  35%
    +opacity(0)
  100%
    bottom: 40px
    +opacity(0)

div
  display: block

body
  font-family: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif
  font-size: 15px
  color: #333
  line-height: 1.2
  background: #DDD
  padding: 0
  margin: 0
  display:  block
  .container
    position: relative
    width: 100%
    text-align: center
    .header
      padding: 30px 30px 0 30px
      margin: 0 20px 10px 20px
      position: relative
      display: block
      h1
        font-size: 30px
        text-transform: uppercase
        line-height: 1.5
        position: relative
        font-weight: 400
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7)
        padding-bottom: 5px
        margin: 0 20px
      h2
        font-size: 16px
        padding: 10px 0
    .content
      position: relative
      width: 800px
      margin: 30px auto
      display: block
      text-align: center
      .anime
        display: block
        &:hover
          .shake
            -webkit-animation-name: spaceboots
            -webkit-animation-duration: 0.9s
            -webkit-transform-origin: 50% 50%
            -webkit-animation-iteration-count: infinite
            -webkit-animation-timing-function: linear
          .ruby
            -webkit-animation-name: water
            -webkit-animation-duration: 6s
            -webkit-transform-origin: 50% 50%
            -webkit-animation-iteration-count: infinite
            -webkit-animation-timing-function: linear
        .ruby
          position: relative
          display: inline-block
          top: 350px
          right: 50px
        .shake
          display: inline-block
          position: relative
        .action
          width: 300px
          height: 450px
          margin: 0 auto
          position: relative
          top: -450px
          .bubble
            width: 3px
            height: 3px
            position: absolute
            display: block
            left: 105px
            bottom: 110px
            +border-radius(20px)
            +opacity(0.5)
            background: black
            -webkit-animation-name: bubbleFloat
            -webkit-animation-duration: 3s
            -webkit-animation-iteration-count: infinite
          .bubble2
            width: 3px
            height: 3px
            position: absolute
            display: block
            left: 90px
            bottom: 80px
            +border-radius(20px)
            +opacity(0.5)
            background: black
            -webkit-animation-name: bubbleFloat2
            -webkit-animation-duration: 3.2s
            -webkit-animation-iteration-count: infinite
          .bubble3
            width: 3px
            height: 3px
            position: absolute
            display: block
            left: 80px
            bottom: 76px
            +border-radius(20px)
            +opacity(0.5)
            background: black
            -webkit-animation-name: bubbleFloat3
            -webkit-animation-duration: 3.6s
            -webkit-animation-iteration-count: infinite
          .bubble4
            width: 3px
            height: 3px
            position: absolute
            display: block
            left: 70px
            bottom: 70px
            +border-radius(20px)
            +opacity(0.5)
            background: black
            -webkit-animation-name: bubbleFloat4
            -webkit-animation-duration: 2.5s
            -webkit-animation-iteration-count: infinite
          .bubble5
            width: 3px
            height: 3px
            position: absolute
            display: block
            left: 85px
            bottom: 85px
            +border-radius(20px)
            +opacity(0.5)
            background: black
            -webkit-animation-name: bubbleFloat5
            -webkit-animation-duration: 2s
            -webkit-animation-iteration-count: infinite