.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;
}

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

@keyframes log-inner {
  from,
  to {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
}

@keyframes hind-log {
  from,
  to {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(15deg);
  }
}

@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;
}

@keyframes leg-outer {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-76px);
  }
}

.hind-leg-outer {
  bottom: 0;
  right: 263px;
  animation: leg-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -0.225s;
  z-index: 1;
}

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

@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: 75.33178vw 189.3465vh rgba(255, 255, 255, 0.8),
    75.33178vw 489.3465vh rgba(255, 255, 255, 0.8),
    40.77726vw 181.31011vh rgba(255, 255, 255, 0.8),
    40.77726vw 481.31011vh rgba(255, 255, 255, 0.8),
    73.32718vw 10.14161vh rgba(255, 255, 255, 0.8),
    73.32718vw 310.14161vh rgba(255, 255, 255, 0.8),
    78.59227vw 280.82905vh rgba(255, 255, 255, 0.8),
    78.59227vw 580.82905vh rgba(255, 255, 255, 0.8),
    11.9341vw 164.72468vh rgba(255, 255, 255, 0.8),
    11.9341vw 464.72468vh rgba(255, 255, 255, 0.8),
    64.2188vw 262.11594vh rgba(255, 255, 255, 0.8),
    64.2188vw 562.11594vh rgba(255, 255, 255, 0.8),
    40.4108vw 299.49646vh rgba(255, 255, 255, 0.8),
    40.4108vw 599.49646vh rgba(255, 255, 255, 0.8),
    87.52317vw 40.69123vh rgba(255, 255, 255, 0.8),
    87.52317vw 340.69123vh rgba(255, 255, 255, 0.8),
    89.80937vw 135.35487vh rgba(255, 255, 255, 0.8),
    89.80937vw 435.35487vh rgba(255, 255, 255, 0.8),
    64.04961vw 30.25628vh rgba(255, 255, 255, 0.8),
    64.04961vw 330.25628vh rgba(255, 255, 255, 0.8),
    16.33133vw 218.1513vh rgba(255, 255, 255, 0.8),
    16.33133vw 518.1513vh rgba(255, 255, 255, 0.8),
    82.45137vw 64.17503vh rgba(255, 255, 255, 0.8),
    82.45137vw 364.17503vh rgba(255, 255, 255, 0.8),
    5.63076vw 191.60386vh rgba(255, 255, 255, 0.8),
    5.63076vw 491.60386vh rgba(255, 255, 255, 0.8),
    99.66049vw 137.19712vh rgba(255, 255, 255, 0.8),
    99.66049vw 437.19712vh rgba(255, 255, 255, 0.8),
    98.98806vw 193.89565vh rgba(255, 255, 255, 0.8),
    98.98806vw 493.89565vh rgba(255, 255, 255, 0.8),
    59.97847vw 80.02595vh rgba(255, 255, 255, 0.8),
    59.97847vw 380.02595vh rgba(255, 255, 255, 0.8),
    26.98678vw 166.61078vh rgba(255, 255, 255, 0.8),
    26.98678vw 466.61078vh rgba(255, 255, 255, 0.8),
    47.48747vw 100.74496vh rgba(255, 255, 255, 0.8),
    47.48747vw 400.74496vh rgba(255, 255, 255, 0.8),
    87.95631vw 163.98715vh rgba(255, 255, 255, 0.8),
    87.95631vw 463.98715vh rgba(255, 255, 255, 0.8),
    55.89314vw 37.05915vh rgba(255, 255, 255, 0.8),
    55.89314vw 337.05915vh rgba(255, 255, 255, 0.8),
    7.61688vw 109.10717vh rgba(255, 255, 255, 0.8),
    7.61688vw 409.10717vh rgba(255, 255, 255, 0.8),
    79.92307vw 168.48341vh rgba(255, 255, 255, 0.8),
    79.92307vw 468.48341vh rgba(255, 255, 255, 0.8),
    41.89951vw 284.12528vh rgba(255, 255, 255, 0.8),
    41.89951vw 584.12528vh rgba(255, 255, 255, 0.8),
    73.71835vw 170.14191vh rgba(255, 255, 255, 0.8),
    73.71835vw 470.14191vh rgba(255, 255, 255, 0.8),
    31.43354vw 69.42172vh rgba(255, 255, 255, 0.8),
    31.43354vw 369.42172vh rgba(255, 255, 255, 0.8),
    92.69585vw 208.77204vh rgba(255, 255, 255, 0.8),
    92.69585vw 508.77204vh rgba(255, 255, 255, 0.8),
    64.85258vw 43.32502vh rgba(255, 255, 255, 0.8),
    64.85258vw 343.32502vh rgba(255, 255, 255, 0.8),
    20.02926vw 11.52144vh rgba(255, 255, 255, 0.8),
    20.02926vw 311.52144vh rgba(255, 255, 255, 0.8),
    14.3123vw 192.61852vh rgba(255, 255, 255, 0.8),
    14.3123vw 492.61852vh rgba(255, 255, 255, 0.8),
    94.46209vw 100.18925vh rgba(255, 255, 255, 0.8),
    94.46209vw 400.18925vh rgba(255, 255, 255, 0.8),
    5.51373vw 242.42128vh rgba(255, 255, 255, 0.8),
    5.51373vw 542.42128vh rgba(255, 255, 255, 0.8),
    54.27746vw 298.22054vh rgba(255, 255, 255, 0.8),
    54.27746vw 598.22054vh rgba(255, 255, 255, 0.8),
    10.02472vw 167.3573vh rgba(255, 255, 255, 0.8),
    10.02472vw 467.3573vh rgba(255, 255, 255, 0.8),
    35.3971vw 71.03151vh rgba(255, 255, 255, 0.8),
    35.3971vw 371.03151vh rgba(255, 255, 255, 0.8),
    26.59864vw 109.08827vh rgba(255, 255, 255, 0.8),
    26.59864vw 409.08827vh rgba(255, 255, 255, 0.8),
    40.41361vw 248.58402vh rgba(255, 255, 255, 0.8),
    40.41361vw 548.58402vh rgba(255, 255, 255, 0.8),
    73.88225vw 116.86652vh rgba(255, 255, 255, 0.8),
    73.88225vw 416.86652vh rgba(255, 255, 255, 0.8),
    49.61353vw 211.84517vh rgba(255, 255, 255, 0.8),
    49.61353vw 511.84517vh rgba(255, 255, 255, 0.8),
    59.1466vw 6.37526vh rgba(255, 255, 255, 0.8),
    59.1466vw 306.37526vh rgba(255, 255, 255, 0.8),
    42.72206vw 286.67713vh rgba(255, 255, 255, 0.8),
    42.72206vw 586.67713vh 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;
}