.title
  h1 Santa's Reindeer
  ul.socials
    li
      a(href="https://ivan.odintsov.me", target="_blank")
        img(src="https://img.icons8.com/material/48/000000/link--v1.png", alt="Link icon")
    li
      a(href="https://twitter.com/odintsov_design", target="_blank")
        img(src="https://img.icons8.com/color/48/000000/twitter.png", alt="Twitter icon")

.container
  .artboard
    .deer
      .rocking
        .head
          .horns
            .horn.horn-left
              .line.line-one
              .line
              .line.line-three
            .horn.horn-right
              .line.line-one
              .line
              .line.line-three
          .ears
            .ear.ear-left
            .ear.ear-right
          .eyes
            .eye.eye-left
            .eye.eye-right
          .nose
        .body
          .shadow
          .hooves
            .hoof-one
              .line
              .anim-part
                .circle
                  .circle
                    .circle
                      .circle
                        .circle.circle-last
            .hoof-two
              .line-one
              .line-two
        .tail
          .circle
            .circle
              .circle
                .circle
                  .circle
      .legs
        .leg-left
          .anim-part
            .line
        .leg-right
          .anim-part
            .circle
              .circle
                .circle
                  .circle
                    .circle
                      .circle
                        .circle
                          .circle
                            .circle.circle-last
    .presents
      .present.present-one
      .present.present-two
      .present.present-two.present-two-right
      .present.present-three
    .snow
    - for (var i = 1; i < 100; i++)
      .snowflake
      
.credits.
  Created with <span class="love"></span> by <a href="https://codepen.io/ivanodintsov">Ivan Odintsov</a>  &nbsp;&nbsp;&middot;&nbsp;&nbsp;  Original by <a href="https://dribbble.com/shots/2421804-Merry-Christmas">Artua</a>

$gray: #f4f4f4
$red: #fb5d5d
$blue: #82dfe3
$blue-light: #e7eff7
$blue-dark: #69b2cb
$blue-dark-two: #495169
$brown: #91655d
$brown-two: #835f5a
$brown-light: #9c7169
$brown-light-two: #aa8275
$brown-lighten: #e7beb2
$brown-dark: #c39e9a
$brown-dark-two: #674a4a
$brown-dark-three: #835f5b
$yellow: #ffb63c
$pink: #e66

.container
  background-color: white
  border-radius: 4px
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
  height: 300px
  margin: 40px auto 50px auto
  position: relative
  width: 450px

.artboard
  height: 100%
  overflow: hidden
  position: relative
  width: 100%

.deer
  width: 50px
  margin: 0 auto
  position: relative

.rocking
  animation: rocking .4s ease-in-out infinite alternate-reverse
  transform-origin: bottom left
  position: relative
  z-index: 1

.head
  position: relative
  width: 50px

.horns
  animation: rocking .4s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate-reverse
  height: 55px
  position: relative
  top: 21px
  width: 50px

.horn
  position: relative

  &:before
    background-color: $brown
    border-radius: 7px 7px 0 0
    content: ''
    display: block
    height: 55px
    position: absolute
    width: 7px
    z-index: 1

  .line
    background-color: $brown
    border-radius: 7px 0 0 7px
    height: 7px
    width: 20px
    margin-bottom: 15px
    position: relative
    top: 10px

    &-one
      width: 15px

    &-three
      top: -22px
      width: 17px

  &-left
    top: -7px
    transform: rotate(-25deg)

    &:before
      box-shadow: inset 2px 0 0 0 $brown-light

    .line
      box-shadow: inset 0 2px 0 0 $brown-light
      right: 15px
      transform: rotate(30deg)

      &-one
        right: 10px

      &-three
        box-shadow: inset 0 -2px 0 0 $brown-light
        right: -3px
        transform: rotate(160deg)

  &-right
    bottom: 55px
    left: 40px
    transform: rotate(25deg)

    &:before
      box-shadow: inset -2px 0 0 0 $brown-two

    .line
      box-shadow: inset 0 2px 0 0 $brown-two
      right: -2px
      transform: rotate(150deg)

      &-three
        right: 13px
        transform: rotate(20deg)

.ears
  position: absolute
  top: 70px

.ear
  background-color: $brown
  border-radius: 100% 50% 50% 50%
  height: 18px
  position: relative
  right: 20px
  top: 10px
  transform: rotate(30deg)
  transform-origin: 100%
  width: 30px

  &:before
    background-color: $brown-lighten
    border-radius: 100% 50% 50% 50%
    height: 9px
    content: ''
    display: block
    left: 5px
    position: relative
    top: 5px
    width: 15px

  &-left
    animation: ear-left 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) infinite alternate-reverse
    transform: rotate(30deg)

  &-right
    animation: ear-right 2s cubic-bezier(0.6, -0.28, 0.74, 0.05) 2s infinite alternate-reverse
    left: 10px
    right: 0
    top: -8px
    transform: rotate(160deg)

.eyes
  position: absolute
  top: 90px
  right: -5px
  width: 32px
  z-index: 2

  .eye
    background: linear-gradient(0deg, white 50%, $brown-light-two 50%)
    border-radius: 15px
    height: 15px
    width: 15px

    &:before
      animation: eaves 3s infinite alternate-reverse
      background-color: $brown-light-two
      border-radius: 9px 9px 0 0
      height: 9px
      content: ''
      display: block
      position: relative
      width: 15px
      top: -1px
      z-index: 1

    &:after
      animation: eyes 3s infinite alternate-reverse
      background-color: $blue-dark-two
      border-radius: 5px
      height: 5px
      content: ''
      display: block
      left: 5px
      position: relative
      top: -3px
      transform: translate(3px, 2px)
      width: 5px

    &-left
      float: left

    &-right
      float: right

.nose
  background-color: $brown
  border-radius: 0 7px 15px
  top: 47px
  height: 18px
  left: 40px
  position: relative
  width: 20px
  z-index: 2

  &:before
    background-color: $red
    border-radius: 15px
    content: ''
    display: block
    height: 14px
    position: absolute
    right: -.5px
    top: -.5px
    width: 16px

  &:after
    background-color: white
    border-radius: 5px
    content: ''
    display: block
    height: 2px
    position: absolute
    right: 4px
    top: 2px
    width: 5px

.body
  background-color: $brown
  border-radius: 50px 50px 0
  box-shadow: inset 7px 0 0 0 $brown-light
  height: 140px
  position: relative
  width: 50px
  z-index: 1

  &:before
    background-color: $brown-lighten
    border-radius: 20px 0 0 20px
    bottom: 20px
    box-shadow: inset -7px 0 0 0 $brown-dark
    content: ''
    display: block
    height: 65px
    position: absolute
    right: 0
    width: 20px

.hooves
  position: relative
  bottom: 40px
  right: 34px

.hoof

  &-one
    animation: jump .3s ease-in-out infinite alternate-reverse
    left: 10px
    position: relative
    top: 70px
    transform: rotate(25deg)
    transform-origin: 100% 50%

    .line
      height: 30px
      border: 20px solid
      border-radius: 40px
      border-color: transparent transparent $brown transparent
      left: 25px
      width: 30px
      position: relative
      top: 5px
      transform: rotate(-30deg)

    .anim-part
      position: relative
      bottom: 23px
      left: 81px
      transform: rotate(-75deg)
      transform-origin: left

    .circle
      animation: hoof-one .3s ease-in-out infinite alternate-reverse
      background-color: $brown
      height: 20px
      width: 20px
      border-radius: 30px
      transform: translateX(3px) rotate(0deg)

      &-last
        border-radius: 20px 0 0 20px
        transform: translateX(2px) rotate(0deg)

        &:before
          content: ''
          display: block
          border-top: 20px solid $brown-dark-two
          border-left: 7px solid transparent
          height: 0
          left: 10px
          width: 7px
          position: relative
          z-index: 1

        &:after
          background-color: $yellow
          border-radius: 10px
          bottom: 30px
          content: ''
          display: block
          height: 40px
          left: 19px
          position: relative
          width: 9px

  &-two
    animation: jump-two .3s ease-in-out infinite alternate-reverse
    left: 55px
    position: relative
    top: 10px
    z-index: -1

    .line

      &-one,
      &-two
        height: 10px
        border: 20px solid
        border-radius: 40px
        border-color: transparent transparent $brown transparent
        width: 10px
        position: absolute

      &-one
        transform: rotate(-45deg)

      &-two
        left: 30px
        transform: rotate(135deg)

.tail
  background-color: $brown-light
  bottom: 0
  left: 4px
  position: absolute
  width: 20px
  z-index: 0

  .circle
    animation: tail 2s cubic-bezier(0, 0.02, 0.9, 2) infinite
    background-color: $brown-light
    border-radius: 11px
    height: 12px
    position: relative
    right: 2px
    transform: rotate(-5deg)
    width: 12px

.legs
  position: relative

  &:before
    background: linear-gradient(to left, $brown 50%, $brown-light 50%)
    bottom: 0
    content: ''
    display: block
    height: 10px
    left: 7px
    position: absolute
    width: 30px
    z-index: 0

.leg

  &-left,
  &-right

    &:before,
    &:after
      content: ''
      display: block
      position: absolute
      z-index: 1

  &-left

    .anim-part
      animation: leg-left .4s ease-out infinite alternate-reverse
      position: relative
      top: 1px
      transform: rotate(5deg) translateX(3px)
      transform-origin: right
      z-index: 2

      &:before,
      &:after
        content: ''
        display: block
        position: absolute
        z-index: 1

      &:before
        height: 16px
        width: 16px
        border: 20px solid
        border-radius: 30px
        border-color: transparent $brown-dark-three transparent transparent
        transform: rotate(-45deg)
        top: -17px
        left: 17px

      .line
        background-color: $brown-dark-three
        height: 25px
        position: absolute
        width: 20px
        left: 51px
        top: 7px
        z-index: 2
        transform: skew(-9deg)

      &:after
        background-color: $brown-dark-three
        height: 20px
        left: 33px
        top: -20px
        width: 24px

    &:after
      background-color: $brown-dark-two
      height: 13px
      left: 48px
      top: 32px
      transform: skew(-8deg)
      width: 20px
      z-index: 2

  &-right
    position: relative
    right: 10px

    &:before
      height: 30px
      width: 38px
      border: 20px solid
      border-radius: 40px
      border-color: $brown transparent transparent transparent
      transform: rotate(-15deg)
      z-index: 3
      top: -29px
      left: 21px

    .anim-part
      position: absolute
      left: 64px
      bottom: 9px
      transform: rotate(43deg)
      z-index: 2

      .circle
        animation: leg-right .4s ease-out infinite alternate-reverse
        width: 20px
        height: 20px
        background-color: $brown
        border-radius: 20px
        transform: translateX(4px) rotate(4deg)

        &-last
          border-radius: 20px 0 0 20px

          &:before
            content: ''
            display: block
            border-bottom: 20px solid $brown-dark-two
            border-right: 2px solid transparent
            height: 0
            left: 15px
            width: 11px
            position: relative
            z-index: 1

.presents
  top: 3px
  height: 45px
  margin: 0 auto
  position: relative
  width: 110px

  &:after
    animation: shadow .4s ease-out infinite alternate-reverse
    background-color: $blue-light
    bottom: 0
    border-radius: 7px
    content: ''
    display: block
    height: 7px
    left: -22px
    position: absolute
    width: 170px

.present
  border-radius: 4px
  bottom: 3px
  position: absolute
  z-index: 1

  &:before,
  &:after
    content: ''
    display: block
    position: relative

  &:before
    border-radius: 4px 4px 2px 2px
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, .04)
    right: 1px

  &-one
    background-color: $red
    height: 45px
    right: 32px
    width: 45px
    z-index: 2

    &:before
      background-color: lighten($red, 5)
      height: 12px
      width: 47px

  &-two
    background-color: $blue
    height: 30px
    width: 30px

    &:before
      background-color: lighten($blue, 5)
      height: 10px
      width: 32px

    &:after
      background-color: $blue-dark
      bottom: 10px
      height: 100%
      left: 7px
      width: 5px

    &-right
      right: 5px

  &-three
    background-color: $yellow
    height: 25px
    left: 25px
    margin: auto
    width: 25px
    z-index: 2

    &:before
      background-color: lighten($yellow, 5)
      height: 8px
      width: 27px

    &:after
      background-color: darken($red, 2)
      bottom: 8px
      height: 100%
      left: 13px
      width: 5px

.snowflake
  background-color: #e4e4e4
  border-radius: 3px
  height: 3px
  position: absolute
  top: 0
  width: 3px
  z-index: 3

@for $i from 0 through 100
  .snowflake:nth-child(#{$i})
    animation: snow-#{$i} random(10) + 5 + s infinite

  @keyframes snow-#{$i}
    $x: random(450) + px
    from
      transform: translate($x, random(300) - 300 + px)
    to
      transform: translate($x, random(300) + 400 + px)

@keyframes tail
  10%
    transform: rotate(2deg)
  20%
    transform: rotate(-5deg)

@keyframes shadow
  to
    width: 185px

@keyframes eyes
  50%
    transform: translate(3px, 2px)
  60%
    transform: translate(0, 0)
  100%
    transform: translate(0, 0)

@keyframes eaves
  50%
    transform: translateY(0)
  60%
    transform: translateY(-1px)
  100%
    transform: translateY(-1px)

@keyframes hoof-one
  to
    transform: translateX(2px) rotate(5deg)

@keyframes jump
  to
    transform: translateY(-2px) rotate(25deg)

@keyframes jump-two
  to
    transform: translateY(2px)

@keyframes rocking
  to
    transform: rotate(-1deg)

@keyframes ear-left
  85%
    transform: rotate(30deg)
  100%
    transform: rotate(-10deg)

@keyframes ear-right
  85%
    transform: rotate(160deg)
  100%
    transform: rotate(170deg)

@keyframes leg-right
  to
    transform: translateX(4px) rotate(2deg)

@keyframes leg-left
  0%
    transform: rotate(0deg) translateX(0px)
  50%
    transform: rotate(5deg) translateX(3px)

// Template styles
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600)

a
  font-weight: 600
  color: #91a7ff
  text-decoration: none
  
  &:hover
    color: #5c7cfa
    text-decoration: underline

html,
body
  font-family: 'Open Sans'

body
  background-color: #f8f9fa
  color: #adb5bd

.title
  text-align: center
  
  h1
    font-size: 1.5em
    margin: 100px 0 10px 0
  
.socials
  display: block
  font-size: 14px
  margin: 0
  padding: 0

  li
    display: inline

    &:not(:last-child)
      margin-right: .75em

    a
      vertical-align: middle
  
      &:hover
        img
          animation: link .5s

      img
        width: 1.3em

.credits
  font-size: .8em
  text-align: center

.love
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/heart-smil.svg)
  display: inline-block
  height: 16px
  vertical-align: middle
  width: 16px

.container
  background-color: white
  border-radius: 4px
  box-shadow: 0 1px 3px #dee2e6
  height: 300px
  margin: 40px auto 50px auto
  position: relative
  width: 450px

.artboard
  height: 100%
  overflow: hidden
  position: relative
  width: 100%

@keyframes link
  25%
    transform: rotate(10deg)
  50%
    transform: rotate(-10deg)