<div class="s-man">
  <div class="s-man-hat">
    <div class="s-man-hat-top"></div>
    <div class="s-man-hat-bottom"></div>
  </div>
  <div class="s-man-head">
    <div class="s-man-eye">
      <div class="s-man-eye-pins"></div>
      <div class="s-man-eye-pins"></div>
      <div class="s-man-eye-pins"></div>
      <div class="s-man-eye-pins"></div>
    </div>
    <div class="s-man-eye">
      <div class="s-man-eye-pins"></div>
      <div class="s-man-eye-pins"></div>
      <div class="s-man-eye-pins"></div>
      <div class="s-man-eye-pins"></div>
    </div>
    <div class="s-man-nose"></div>
    <div class="s-man-mouth"></div>
  </div>
  <div class="s-man-scarf"></div>
  <div class="s-man-arm-left">
    <div class="s-man-arm-left-finger"></div>
    <div class="s-man-arm-left-finger"></div>
  </div>
  <div class="s-man-arm-right">
    <div class="s-man-arm-right-finger"></div>
    <div class="s-man-arm-right-finger"></div>
  </div>
  <div class="s-man-body">
    <div class="s-man-button"></div>
    <div class="s-man-button"></div>
    <div class="s-man-button"></div>
  </div>
</div>

<div class="s-f-w">
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
  <div class="s-flake"></div>
</div>

$bg: blue;
$white: #fff;
$black: #000;
$dark-brown: #462424;

html,
body {
  background: $bg;
  display: flex;
  width: 100%;
  height: 100%;
}

.s-man {
  margin: 0 auto;
  color: $white;
  cursor: pointer;
  position: relative;
}

.s-man-hat {
  position: relative;
  background-color: transparent;
  transition-property: background-color;
}

.s-man-hat-top {
  background-color: $black;
  width: 50px;
  height: 70px;
  margin: 0 auto;
  margin-bottom: 0px;
  border-radius: 10px;
}

.s-man-hat-bottom {
  background-color: $black;
  width: 100px;
  height: 30px;
  margin: 0 auto;
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0px;
  border-radius: 6px;
  z-index: 100;
}

.s-man:hover {
  background-color: $bg;

  .s-man-hat-top {
    background-color: red;
  }

  .s-man-nose {
    background-color: darkolivegreen;
  }

  .s-man-body {
    background-color: orange;
  }

  .s-man-arm-left {
    transform: rotateY(0deg) rotate(0deg);
  }

  .s-man-arm-right {
    transform: rotateY(0deg) rotate(0deg);
  }
}

.s-man-head {
  background-color: $white;
  height: 100px;
  width: 100px;
  border-radius: 45px;
  margin: -20px auto 0px auto;
  position: relative;
}

.s-man-eye {
  background-color: $black;
  height: 26px;
  width: 25px;
  border-radius: 15px;
  max-width: 100%;
  position: absolute;
  top: 22px;
}

.s-man-eye:nth-of-type(1) {
  left: 15px;
}

.s-man-eye:nth-of-type(2) {
  left: 60px;
}

.s-man-eye-pins {
  background-color: $white;
  width: 5px;
  height: 5px;
  border-radius: 5px;
}

.s-man-eye-pins:nth-of-type(1) {
  margin-left: 5px;
  margin-top: 6px;
}

.s-man-eye-pins:nth-of-type(2) {
  margin-left: 14px;
  margin-top: -5px;
}

.s-man-eye-pins:nth-of-type(3) {
  margin-left: 5px;
  margin-top: 3px;
}

.s-man-eye-pins:nth-of-type(4) {
  margin-left: 14px;
  margin-top: -5px;
}

.s-man-nose {
  background-color: orange;
  width: 35px;
  height: 20px;
  border-radius: 10px 10px 20px 20px;
  position: absolute;
  top: 50px;
  left: 31px;
}

.s-man-scarf {
  background-color: red;
  height: 20px;
  width: 120px;
  border-radius: 20px;
  margin: 0 auto;
  margin-top: -10px;
}

.s-man-body {
  position: relative;
  background-color: $white;
  height: 250px;
  width: 200px;
  border-radius: 80px 80px 80px 80px;
}

.s-man-button {
  background-color: $black;
  height: 26px;
  width: 30px;
  border-radius: 15px;
  max-width: 100%;
  position: absolute;
  left: 85px;
}

.s-man-button:nth-of-type(1) {
  top: 50px;
}

.s-man-button:nth-of-type(2) {
  top: 90px;
}

.s-man-button:nth-of-type(3) {
  top: 130px;
}

.s-man-arm-left {
  background-color: $dark-brown;
  width: 200px;
  height: 10px;
  position: absolute;
  left: -160px;
  top: 220px;
  transform: rotateY(0deg) rotate(30deg);
}

.s-man-arm-left-finger {
  background-color: $dark-brown;
  width: 50px;
  height: 10px;
  position: absolute;
  left: -10px;
  top: -10px;
}

.s-man-arm-left-finger:nth-of-type(1) {
  transform: rotateY(0deg) rotate(50deg);
  left: -10px;
  top: -20px;
}

.s-man-arm-left-finger:nth-of-type(2) {
  transform: rotateY(0deg) rotate(-50deg);
  left: -10px;
  top: 10px;
}

.s-man-arm-right {
  background-color: $dark-brown;
  width: 200px;
  height: 10px;
  position: absolute;
  left: 160px;
  top: 220px;
  transform: rotateY(0deg) rotate(-30deg);
}

.s-man-arm-right-finger {
  background-color: $dark-brown;
  width: 50px;
  height: 10px;
  position: absolute;
  left: -10px;
  top: -10px;
}

.s-man-arm-right-finger:nth-of-type(1) {
  transform: rotateY(0deg) rotate(50deg);
  left: 130px;
  top: 17px;
}

.s-man-arm-right-finger:nth-of-type(2) {
  transform: rotateY(0deg) rotate(-50deg);
  left: 140px;
  top: -17px;
}

.s-flake {
  position: absolute;
  color: $white;

  &:after {
    content: "\2744";
  }
}

@keyframes s-flakes-fall {
  0% {
    top: -15%;
  }

  100% {
    top: 100%;
  }
}
/* Credit to https://pajasevi.github.io/CSSnowflakes/ */
@keyframes s-flakes-move {
  0% {
    transform: translateX(0px);
  }

  50% {
    transform: translateX(70px);
  }

  100% {
    transform: translateX(0px);
  }
}

.s-flake {
  position: fixed;
  top: -15%;
  z-index: 9999;

  animation-name: s-flakes-fall, s-flakes-move;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

.s-flake:nth-of-type(0) {
  left: 1%;
  animation-delay: 0s, 0s;
}

.s-flake:nth-of-type(1) {
  left: 10%;
  animation-delay: 1s, 1s;
}

.s-flake:nth-of-type(2) {
  left: 20%;
  animation-delay: 6s, 0.5s;
}

.s-flake:nth-of-type(3) {
  left: 30%;
  animation-delay: 4s, 2s;
}

.s-flake:nth-of-type(4) {
  left: 40%;
  animation-delay: 2s, 2s;
}

.s-flake:nth-of-type(5) {
  left: 50%;
  animation-delay: 8s, 3s;
}

.s-flake:nth-of-type(6) {
  left: 60%;
  animation-delay: 6s, 2s;
}

.s-flake:nth-of-type(7) {
  left: 70%;
  animation-delay: 2.5s, 1s;
}

.s-flake:nth-of-type(8) {
  left: 80%;
  animation-delay: 1s, 0s;
}

.s-flake:nth-of-type(9) {
  left: 90%;
  animation-delay: 3s, 1.5s;
}

.s-flake:nth-of-type(10) {
  left: 25%;
  animation-delay: 2s, 0s;
}

.s-flake:nth-of-type(11) {
  left: 65%;
  animation-delay: 4s, 2.5s;
}

.s-flake:nth-of-type(12) {
  left: 85%;
  animation-delay: 1s, 0s;
}