$frame-color: #25a9fc
$gray: #999999
$black: #000000
$white: #ffffff
$brown: #402e2a

$width: 250px
$height: 250px

*
  box-sizing: border-box
  margin: 0
  padding: 0

html,body
  height: 100%

body
  position: relative

.frame
  background-color: $frame-color

  width: 960px
  height: 500px

  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)

  border-radius: 5px
  box-shadow: 3px 3px 3px rgba(darkgray, .3)

.box
  position: relative
  width: 100%
  height: 100%

  .head
    position: absolute
    top: calc(50% - #{$height /2})
    left: calc(50% - #{$width /2})

    background-color: $gray
    width: $width
    height: $height
    border-radius: $width

    .hair
      position: absolute

      width: 18%
      height: 18%
      transform: rotate(45deg)

      background-color: $gray

      &.left
        left: 33%
        top: -5%
      &.right
        top: 0%
        left: 50%


    .ear
      position: absolute

      width: $width * .6
      height: $width * .6
      border-radius: 50%

      z-index: -1

      background-color: $gray

      &.left
        left: -25%
      &.right
        right: -25%

      .inner
        width: 80%
        height: 80%
        border-radius: 50%
        background-color: darken($gray, 20%)
        margin: 10%

    .eye
      position: absolute
      width: 35%
      height: 35%
      border-radius: 50%
      background-color: $white
      top: 25%

      &.left
        left: 18%
      &.right
        right: 18%

      .pupil
        position: absolute
        width: 20%
        height: 20%
        margin: 40%
        border-radius: 50%
        background-color: $black

    .nose
      position: absolute
      margin: 45% 37.5%

      width: 25%
      height: 35%
      border-radius: 45%
      background-color: $brown

      z-index: 50000