.fox {
  width: 470px;
  height: 335px;
  min-width: 470px;
  min-height: 335px;
}
.fox * {
  position: absolute;
}
.fox:after {
  content: '';
  display: block;
  position: absolute;
  width: 80%;
  height: 20px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0.2);
  bottom: -10px;
  left: 10%;
  z-index: -1;
}

@-webkit-keyframes log {
  from, to {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(25deg);
  }
}

@keyframes log {
  from, to {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(25deg);
  }
}
@-webkit-keyframes log-inner {
  from, to {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}
@keyframes log-inner {
  from, to {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}
@-webkit-keyframes hind-log {
  from, to {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
@keyframes hind-log {
  from, to {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(15deg);
  }
}
@-webkit-keyframes hind-log-inner {
  from, to {
    transform: rotate(50deg);
  }
  50% {
    transform: rotate(30deg);
  }
}
@keyframes hind-log-inner {
  from, to {
    transform: rotate(50deg);
  }
  50% {
    transform: rotate(30deg);
  }
}
.leg-outer {
  bottom: 0;
  right: 127px;
  -webkit-animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  z-index: 1;
}
@-webkit-keyframes leg-outer {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-76px);
  }
}
@keyframes leg-outer {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-76px);
  }
}
.hind-leg-outer {
  bottom: 0;
  right: 263px;
  -webkit-animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  z-index: 1;
}

.leg {
  bottom: 0;
  -webkit-animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes leg {
  75% {
    transform: translateY(-20px);
  }
  from, 40%, to {
    transform: translateY(0);
  }
}
@keyframes leg {
  75% {
    transform: translateY(-20px);
  }
  from, 40%, to {
    transform: translateY(0);
  }
}
.hind-leg-outer2 {
  bottom: 0;
  -webkit-animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
}

.paw, .hind-paw {
  bottom: 100%;
  width: 10px;
  height: 12px;
  transform-origin: bottom center;
  border-radius: 5px;
  background: #000;
}
.paw:after, .hind-paw:after {
  -webkit-animation: paw 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: paw 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  content: '';
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 200%;
  background: #000;
  border-radius: 100px;
  transform-origin: 5px center;
}
@-webkit-keyframes paw {
  10%, to {
    transform: rotate(10deg);
  }
  20%, 40% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(120deg);
  }
}
@keyframes paw {
  10%, to {
    transform: rotate(10deg);
  }
  20%, 40% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(120deg);
  }
}
.hind-paw {
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
}

.log, .hind-log {
  bottom: calc(100% - 5px);
  width: 10px;
  height: 44px;
  transform-origin: bottom center;
  transform: rotate(5deg);
  background: black;
  border-bottom-right-radius: 50% 100%;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.log:after, .hind-log:after {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 75%;
  right: 0;
  background: black;
  transform-origin: right bottom;
  transform: rotate(9deg);
  border-top-right-radius: 8px;
}

.log {
  -webkit-animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}

.hind-log {
  -webkit-animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
}

.log-inner, .hind-log-inner {
  z-index: 1;
}

.log-inner {
  bottom: calc(100% - 8px);
  width: 15px;
  height: 65px;
  transform-origin: bottom center;
  -webkit-animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  background-color: #E2DEE8;
  background-image: linear-gradient(to top, #000000, #000000 10px, rgba(0, 0, 0, 0) 11px, rgba(0, 0, 0, 0));
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.leg-outer + .leg-outer .log-inner, .leg-outer + .leg-outer .log-inner:after {
  background-color: #C7C3D0;
}
.leg-outer + .leg-outer .log-inner:before {
  background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #c7c3d0);
}
.log-inner:before, .log-inner:after {
  content: '';
  display: block;
  position: absolute;
}
.log-inner:before {
  right: 100%;
  background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8);
  height: 90%;
  bottom: 0;
  width: 240%;
  border-top-left-radius: 100%;
}
.log-inner:after {
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: #E2DEE8;
  transform-origin: bottom right;
  transform: rotate(15deg);
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 5px;
  background-image: linear-gradient(-15deg, #000000, #000000 9.5px, rgba(0, 0, 0, 0) 9.5px, rgba(0, 0, 0, 0));
}

.hind-log-inner {
  bottom: calc(100% - 7px);
  width: 15px;
  left: -1px;
  height: 80px;
  transform-origin: bottom center;
  -webkit-animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  background-color: #E2DEE8;
  background-image: linear-gradient(to top, #000000, #000000 12px, rgba(0, 0, 0, 0) 12px, rgba(0, 0, 0, 0));
}
.hind-log-inner:before, .hind-log-inner:after {
  content: '';
  display: block;
  position: absolute;
}
.hind-log-inner:before {
  right: 100%;
  background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8);
  height: 90%;
  bottom: 0;
  width: 240%;
  border-top-left-radius: 100%;
}
.hind-log-inner:after {
  left: 100%;
  left: 100%;
  height: 100%;
  width: 34px;
  background-color: #E2DEE8;
  border-bottom-right-radius: 100% 100%;
  transform-origin: bottom left;
  transform: skewY(-38deg);
  background-image: linear-gradient(38deg, #000000, #000000 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0));
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner:before {
  background: radial-gradient(farthest-side at bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #c7c3d0);
}

.leg-outer + .leg-outer {
  z-index: 0;
}
.leg-outer + .leg-outer, .leg-outer + .leg-outer *, .leg-outer + .leg-outer *:after {
  -webkit-animation-delay: -0.45s !important;
          animation-delay: -0.45s !important;
}

.hind-paw:after {
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
}

.hind-leg-outer + .hind-leg-outer {
  z-index: 0;
}
.hind-leg-outer + .hind-leg-outer, .hind-leg-outer + .hind-leg-outer *, .hind-leg-outer + .hind-leg-outer *:after {
  -webkit-animation-delay: -0.675s;
          animation-delay: -0.675s;
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner, .hind-leg-outer + .hind-leg-outer .hind-log-inner:after {
  background-color: #C7C3D0;
}

.body {
  top: 50%;
  left: 170px;
  height: 90px;
  width: 173px;
  background: #E2DEE8;
  border-top-left-radius: 25% 50%;
  border-bottom-left-radius: 25% 50%;
  border-bottom-right-radius: 25% 50%;
  transform-origin: right center;
  -webkit-animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-duration: 0.45s;
          animation-duration: 0.45s;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
}
@-webkit-keyframes body {
  from, to {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}
@keyframes body {
  from, to {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}
.body:before {
  content: '';
  display: block;
  position: absolute;
  height: 50px;
  width: 50px;
  background: #E2DEE8;
  z-index: 1;
  border-top-right-radius: 10px;
  right: 3px;
  top: -3px;
  transform: rotate(15deg);
}

.head {
  position: absolute;
  height: 87px;
  width: 112px;
  bottom: 89%;
  left: 65%;
  border-top-left-radius: 40% 60%;
  border-top-right-radius: 60% 20%;
  background: #E2DEE8;
  -webkit-animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-duration: 0.45s;
          animation-duration: 0.45s;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: center bottom;
  z-index: 0;
  transform-style: preserve-3d;
}
@-webkit-keyframes head {
  from, to {
    transform: rotate(0);
  }
  50% {
    transform: translateY(2px) rotate(-2deg);
  }
}
@keyframes head {
  from, to {
    transform: rotate(0);
  }
  50% {
    transform: translateY(2px) rotate(-2deg);
  }
}
.head:before, .head:after {
  content: '';
  display: block;
  position: absolute;
}
.head:before {
  width: 15px;
  height: 15px;
  right: 100%;
  bottom: 9px;
  background-image: radial-gradient(ellipse farthest-side at top left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8 99.1%);
}
.head:after {
  width: 50px;
  height: 40px;
  top: calc(100% - 1px);
  left: 50%;
  background-image: radial-gradient(ellipse farthest-side at bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #f0e9ec 99.1%);
}

.face {
  width: 84px;
  height: 72px;
  bottom: 0;
  right: 5px;
  background: #F0E9EC;
  border-top-left-radius: 60% 100%;
  border-top-right-radius: 40% 10%;
  z-index: 2;
  -webkit-animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes face {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
}
@keyframes face {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
}
.face:before, .face:after {
  content: '';
  display: block;
  position: absolute;
  background: black;
  -webkit-animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes eye {
  from, to {
    transform: rotate(-12deg);
  }
  50% {
    transform: translateX(-2px) rotate(-12deg);
  }
}
@keyframes eye {
  from, to {
    transform: rotate(-12deg);
  }
  50% {
    transform: translateX(-2px) rotate(-12deg);
  }
}
.face:before {
  height: 4px;
  width: 25px;
  border-radius: 2px;
  top: 13px;
  right: 10px;
}
.face:after {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  top: 23px;
  right: 15px;
}

.snout {
  width: 36px;
  height: 24px;
  left: calc(100% - 5px);
  bottom: 0;
  border-bottom-right-radius: 100%;
  background-color: #F0E9EC;
  background-image: radial-gradient(circle 6px at top right, #000000, #000000 99%, rgba(0, 0, 0, 0) 99%);
  transform-origin: right;
  -webkit-animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes snout {
  from, to {
    transform: scale(1);
  }
  50% {
    transform: scaleX(1.05);
  }
}
@keyframes snout {
  from, to {
    transform: scale(1);
  }
  50% {
    transform: scaleX(1.05);
  }
}
.snout:before, .snout:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 5px;
  width: calc(100% - 5px);
  height: 40px;
  background-image: radial-gradient(ellipse farthest-side at top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #e2dee8 99.1%);
}
.snout:before {
  -webkit-animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes snout-outer {
  50% {
    transform: scaleX(0.93);
  }
}
@keyframes snout-outer {
  50% {
    transform: scaleX(0.93);
  }
}
.snout:after {
  background-image: radial-gradient(ellipse farthest-side at top right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 99%, #f0e9ec 99.1%);
  left: 0;
}

.tail {
  border-radius: 50%;
  background: #E2DEE8;
  width: 1rem;
  height: 1rem;
}

.body > .tail {
  height: 20;
  width: 20;
  left: 10px;
  transform: rotate(58deg);
}
.body > .tail .tail {
  right: 100%;
  border-color: green;
  z-index: -1;
}
.body > .tail > .tail {
  height: 36px;
  width: 36px;
  top: -8px;
  -webkit-animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 10px);
  transform: rotate(0);
}
@-webkit-keyframes tail-2 {
  from, to {
    transform: rotate(0);
  }
  50% {
    transform: rotate(0);
  }
}
@keyframes tail-2 {
  from, to {
    transform: rotate(0);
  }
  50% {
    transform: rotate(0);
  }
}
.body > .tail > .tail:before, .body > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 26.83282px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-16.60156deg);
}
.body > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(16.60156deg);
}
.body > .tail > .tail2 > .tail {
  height: 70px;
  width: 70px;
  top: -25px;
  -webkit-animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 10px);
  transform: rotate(-30deg);
}
@-webkit-keyframes tail2-2 {
  from, to {
    transform: rotate(-33deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@keyframes tail2-2 {
  from, to {
    transform: rotate(-33deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
.body > .tail > .tail2 > .tail:before, .body > .tail > .tail2 > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 37.41657px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail2 > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-33.74902deg);
}
.body > .tail > .tail2 > .tail:before {
  transform-origin: bottom left;
  transform: rotate(33.74902deg);
}
.body > .tail > .tail > .tail {
  height: 93px;
  width: 93px;
  top: -28.5px;
  -webkit-animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 18px);
  transform: rotate(-24deg);
}
@-webkit-keyframes tail-3 {
  from, to {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-24deg);
  }
}
@keyframes tail-3 {
  from, to {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-24deg);
  }
}
.body > .tail > .tail > .tail:before, .body > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 57.8619px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-26.22267deg);
}
.body > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(26.22267deg);
}
.body > .tail > .tail2 > .tail > .tail {
  height: 120px;
  width: 120px;
  top: -25px;
  -webkit-animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -425ms;
          animation-delay: -425ms;
  background: linear-gradient(45deg, #f0e9ec 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(135deg, #f0e9ec 25%, rgba(0, 0, 0, 0) 25%) 0 0, linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 66%, #f0e9ec 66%);
  background-size: 40px 40px, 40px 40px, 100%;
  background-position: center;
  background-color: #E2DEE8;
  background-repeat: repeat-y;
  transform-origin: calc(100% + 35px);
  transform: rotate(-30deg);
}
@-webkit-keyframes tail2-3 {
  from, to {
    transform: rotate(-35deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
@keyframes tail2-3 {
  from, to {
    transform: rotate(-35deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
.body > .tail > .tail2 > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 91.65151px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail2 > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-15.25754deg);
}
.body > .tail > .tail2 > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(15.25754deg);
}
.body > .tail > .tail > .tail > .tail {
  height: 98px;
  width: 98px;
  top: -2.5px;
  -webkit-animation: tail-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -425ms;
          animation-delay: -425ms;
  background: #F0E9EC !important;
  transform-origin: calc(100% + 46.5px);
  transform: rotate(-17deg);
}
.body > .tail > .tail > .tail > .tail:before {
  background: linear-gradient(to right, #f0e9ec, #e2dee8) !important;
}
@-webkit-keyframes tail-4 {
  from, to {
    transform: rotate(-24deg);
  }
  50% {
    transform: rotate(-17deg);
  }
}
@keyframes tail-4 {
  from, to {
    transform: rotate(-24deg);
  }
  50% {
    transform: rotate(-17deg);
  }
}
.body > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 95.46727px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-1.50006deg);
}
.body > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(1.50006deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail {
  height: 50px;
  width: 50px;
  top: 35px;
  -webkit-animation: tail2-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail2-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 60px);
  transform: rotate(27deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail:before {
  display: none !important;
}
.body > .tail > .tail2 > .tail > .tail > .tail, .body > .tail > .tail2 > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail:after {
  background: #F0E9EC !important;
}
@-webkit-keyframes tail2-4 {
  from, to {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(27deg);
  }
}
@keyframes tail2-4 {
  from, to {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(27deg);
  }
}
.body > .tail > .tail2 > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 77.45967px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail2 > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(24.31576deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-24.31576deg);
}
.body > .tail > .tail > .tail > .tail > .tail {
  height: 36px;
  width: 36px;
  top: 31px;
  -webkit-animation: tail-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 49px);
  transform: rotate(41deg);
}
.body > .tail > .tail > .tail > .tail > .tail, .body > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail > .tail:after {
  background: #F0E9EC !important;
}
@-webkit-keyframes tail-5 {
  from, to {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(41deg);
  }
}
@keyframes tail-5 {
  from, to {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(41deg);
  }
}
.body > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 59.39697px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(27.56063deg);
}
.body > .tail > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-27.56063deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail {
  height: 20px;
  width: 20px;
  top: 15px;
  -webkit-animation: tail2-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail2-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 25px);
  transform: rotate(23deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail, .body > .tail > .tail2 > .tail > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
  background: #F0E9EC !important;
}
@-webkit-keyframes tail2-5 {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(23deg);
  }
}
@keyframes tail2-5 {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(23deg);
  }
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 31.62278px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(25.37695deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-25.37695deg);
}
.body > .tail > .tail > .tail > .tail > .tail > .tail {
  height: 15px;
  width: 15px;
  top: 10.5px;
  -webkit-animation: tail-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 18px);
  transform: rotate(10deg);
}
.body > .tail > .tail > .tail > .tail > .tail > .tail, .body > .tail > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail > .tail > .tail:after {
  background: #F0E9EC !important;
}
@-webkit-keyframes tail-6 {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
@keyframes tail-6 {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
.body > .tail > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 23.2379px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(24.31576deg);
}
.body > .tail > .tail > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-24.31576deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail {
  height: 10px;
  width: 10px;
  top: 5px;
  -webkit-animation: tail2-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: tail2-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.225s;
          animation-delay: -0.225s;
  transform-origin: calc(100% + 10px);
  transform: rotate(10deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail, .body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
  background: #F0E9EC !important;
}
@-webkit-keyframes tail2-6 {
  from, to {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
@keyframes tail2-6 {
  from, to {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
  content: '';
  left: 50%;
  position: absolute;
  height: 50%;
  width: 14.14214px;
  display: block;
  background: #E2DEE8;
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(19.47124deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-19.47124deg);
}
.body > .tail > .tail2 {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  position: absolute;
  right: 50%;
  transform-origin: right center;
  transform: rotate(18deg);
}
.body > .tail > .tail2 .tail {
  border-color: blue;
  z-index: -1;
}

.ears {
  top: 10px;
  left: 35px;
  width: 60px;
  transform: rotateY(20deg);
  transform-origin: bottom left;
}
.ears:before {
  content: '';
  display: block;
  position: absolute;
  width: 60px;
  height: 40px;
  background: #E2DEE8;
  border-top-left-radius: 100%;
  left: -36px;
  top: -16px;
  transform: rotate(-18deg) skewX(-20deg);
}

.ear {
  width: 40px;
  height: 46px;
  bottom: 0;
  transform: skewY(-10deg);
  transform-origin: right bottom;
}
.ear:before, .ear:after {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  border-top-left-radius: 100%;
}
.ear:before {
  background: #E2DEE8;
}
.ear:after {
  background: #D5D1DC;
  width: 60%;
  right: 0;
  -webkit-animation: ear-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: ear-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  -webkit-animation-delay: -0.45s;
          animation-delay: -0.45s;
  transform-origin: right;
}
@-webkit-keyframes ear-inner {
  50% {
    transform: scaleX(0.9);
  }
}
@keyframes ear-inner {
  50% {
    transform: scaleX(0.9);
  }
}
.ear:nth-child(1) {
  right: 0;
  -webkit-animation: ear-back 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
          animation: ear-back 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@-webkit-keyframes ear-back {
  from, to {
    transform: rotate(5deg) skewY(-10deg);
  }
  50% {
    transform: translateX(-1px) rotate(5deg) skewY(-10deg);
  }
}
@keyframes ear-back {
  from, to {
    transform: rotate(5deg) skewY(-10deg);
  }
  50% {
    transform: translateX(-1px) rotate(5deg) skewY(-10deg);
  }
}
.ear:nth-child(2) {
  left: 0;
  transform: skewY(-10deg);
}

.snow {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.445, 0, 0.55, 1);
  -webkit-animation: snow-x cubic-bezier(0.445, 0, 0.55, 1) 4s both alternate infinite;
          animation: snow-x cubic-bezier(0.445, 0, 0.55, 1) 4s both alternate infinite;
}
@-webkit-keyframes snow-x {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}
@keyframes snow-x {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}
.fox:hover + .snow {
  opacity: 1;
}
.snow:before, .snow:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 1vmin;
  height: 1vmin;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  -webkit-animation: snow 7s linear infinite;
          animation: snow 7s linear infinite;
  box-shadow: 83.01629vw 142.67843vh rgba(255, 255, 255, 0.8), 83.01629vw 442.67843vh rgba(255, 255, 255, 0.8), 63.67616vw 278.07096vh rgba(255, 255, 255, 0.8), 63.67616vw 578.07096vh rgba(255, 255, 255, 0.8), 69.01405vw 210.09706vh rgba(255, 255, 255, 0.8), 69.01405vw 510.09706vh rgba(255, 255, 255, 0.8), 34.56931vw 255.96437vh rgba(255, 255, 255, 0.8), 34.56931vw 555.96437vh rgba(255, 255, 255, 0.8), 57.24298vw 263.81025vh rgba(255, 255, 255, 0.8), 57.24298vw 563.81025vh rgba(255, 255, 255, 0.8), 23.86828vw 32.52485vh rgba(255, 255, 255, 0.8), 23.86828vw 332.52485vh rgba(255, 255, 255, 0.8), 12.95247vw 260.98299vh rgba(255, 255, 255, 0.8), 12.95247vw 560.98299vh rgba(255, 255, 255, 0.8), 84.17429vw 112.456vh rgba(255, 255, 255, 0.8), 84.17429vw 412.456vh rgba(255, 255, 255, 0.8), 96.47555vw 145.813vh rgba(255, 255, 255, 0.8), 96.47555vw 445.813vh rgba(255, 255, 255, 0.8), 24.36581vw 181.59714vh rgba(255, 255, 255, 0.8), 24.36581vw 481.59714vh rgba(255, 255, 255, 0.8), 96.23847vw 252.40198vh rgba(255, 255, 255, 0.8), 96.23847vw 552.40198vh rgba(255, 255, 255, 0.8), 0.37931vw 177.00791vh rgba(255, 255, 255, 0.8), 0.37931vw 477.00791vh rgba(255, 255, 255, 0.8), 27.41347vw 189.22939vh rgba(255, 255, 255, 0.8), 27.41347vw 489.22939vh rgba(255, 255, 255, 0.8), 59.21137vw 269.26095vh rgba(255, 255, 255, 0.8), 59.21137vw 569.26095vh rgba(255, 255, 255, 0.8), 34.36566vw 242.58963vh rgba(255, 255, 255, 0.8), 34.36566vw 542.58963vh rgba(255, 255, 255, 0.8), 3.02039vw 8.78147vh rgba(255, 255, 255, 0.8), 3.02039vw 308.78147vh rgba(255, 255, 255, 0.8), 69.99555vw 255.8864vh rgba(255, 255, 255, 0.8), 69.99555vw 555.8864vh rgba(255, 255, 255, 0.8), 78.53295vw 296.21864vh rgba(255, 255, 255, 0.8), 78.53295vw 596.21864vh rgba(255, 255, 255, 0.8), 78.55342vw 196.09585vh rgba(255, 255, 255, 0.8), 78.55342vw 496.09585vh rgba(255, 255, 255, 0.8), 61.66432vw 35.15111vh rgba(255, 255, 255, 0.8), 61.66432vw 335.15111vh rgba(255, 255, 255, 0.8), 86.28781vw 131.81338vh rgba(255, 255, 255, 0.8), 86.28781vw 431.81338vh rgba(255, 255, 255, 0.8), 12.86977vw 131.71597vh rgba(255, 255, 255, 0.8), 12.86977vw 431.71597vh rgba(255, 255, 255, 0.8), 70.4228vw 189.69075vh rgba(255, 255, 255, 0.8), 70.4228vw 489.69075vh rgba(255, 255, 255, 0.8), 40.4306vw 156.12597vh rgba(255, 255, 255, 0.8), 40.4306vw 456.12597vh rgba(255, 255, 255, 0.8), 8.22689vw 72.82597vh rgba(255, 255, 255, 0.8), 8.22689vw 372.82597vh rgba(255, 255, 255, 0.8), 13.84516vw 253.29328vh rgba(255, 255, 255, 0.8), 13.84516vw 553.29328vh rgba(255, 255, 255, 0.8), 45.80293vw 262.22872vh rgba(255, 255, 255, 0.8), 45.80293vw 562.22872vh rgba(255, 255, 255, 0.8), 80.89003vw 258.33462vh rgba(255, 255, 255, 0.8), 80.89003vw 558.33462vh rgba(255, 255, 255, 0.8), 9.01702vw 106.33103vh rgba(255, 255, 255, 0.8), 9.01702vw 406.33103vh rgba(255, 255, 255, 0.8), 75.57411vw 266.33757vh rgba(255, 255, 255, 0.8), 75.57411vw 566.33757vh rgba(255, 255, 255, 0.8), 56.72881vw 204.61839vh rgba(255, 255, 255, 0.8), 56.72881vw 504.61839vh rgba(255, 255, 255, 0.8), 82.44714vw 279.20329vh rgba(255, 255, 255, 0.8), 82.44714vw 579.20329vh rgba(255, 255, 255, 0.8), 57.48039vw 265.49685vh rgba(255, 255, 255, 0.8), 57.48039vw 565.49685vh rgba(255, 255, 255, 0.8), 25.12737vw 191.71878vh rgba(255, 255, 255, 0.8), 25.12737vw 491.71878vh rgba(255, 255, 255, 0.8), 66.13805vw 22.55526vh rgba(255, 255, 255, 0.8), 66.13805vw 322.55526vh rgba(255, 255, 255, 0.8), 31.63448vw 133.55119vh rgba(255, 255, 255, 0.8), 31.63448vw 433.55119vh rgba(255, 255, 255, 0.8), 83.92409vw 94.14506vh rgba(255, 255, 255, 0.8), 83.92409vw 394.14506vh rgba(255, 255, 255, 0.8), 63.14501vw 10.57822vh rgba(255, 255, 255, 0.8), 63.14501vw 310.57822vh rgba(255, 255, 255, 0.8), 87.9657vw 161.05507vh rgba(255, 255, 255, 0.8), 87.9657vw 461.05507vh rgba(255, 255, 255, 0.8), 86.61203vw 184.54081vh rgba(255, 255, 255, 0.8), 86.61203vw 484.54081vh rgba(255, 255, 255, 0.8);
}
.snow:after {
  width: 1.1vmin;
  height: 8px;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
@-webkit-keyframes snow {
  from {
    transform: rotate(10deg) translateY(-300vh);
  }
  to {
    transform: rotate(10deg) translateY(0);
  }
}
@keyframes snow {
  from {
    transform: rotate(10deg) translateY(-300vh);
  }
  to {
    transform: rotate(10deg) translateY(0);
  }
}
body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #9095B9;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}