.fox {
  width: 470px;
  height: 335px;
  min-width: 470px;
  min-height: 335px;
  transform: translateY(-86px) scale(0.35);
  transform-origin: left bottom;
  margin-left: 80px;
  margin-top: 0;
}

@media (max-width: 768px) {
  .fox {
    transform: translateY(-56px) scale(0.34);
    margin-left: 72px;
  }
}
.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;
  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;
  animation: leg 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  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 {
  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;
}
@keyframes paw {
  10%, to {
    transform: rotate(10deg);
  }
  20%, 40% {
    transform: rotate(10deg);
  }
  70% {
    transform: rotate(120deg);
  }
}

.hind-paw {
  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 {
  animation: log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}

.hind-log {
  animation: hind-log 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  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;
  animation: log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  background-color: #272727;
  background-image: linear-gradient(to top, black, black 10px, transparent 11px, transparent);
  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: #181818;
}
.leg-outer + .leg-outer .log-inner:before {
  background: radial-gradient(farthest-side at bottom left, transparent, transparent 99%, #181818);
}
.log-inner:before, .log-inner:after {
  content: "";
  display: block;
  position: absolute;
}
.log-inner:before {
  right: 100%;
  background: radial-gradient(farthest-side at bottom left, transparent, transparent 99%, #272727);
  height: 90%;
  bottom: 0;
  width: 240%;
  border-top-left-radius: 100%;
}
.log-inner:after {
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: #272727;
  transform-origin: bottom right;
  transform: rotate(15deg);
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 5px;
  background-image: linear-gradient(-15deg, black, black 9.5px, transparent 9.5px, transparent);
}

.hind-log-inner {
  bottom: calc(100% - 7px);
  width: 15px;
  left: -1px;
  height: 80px;
  transform-origin: bottom center;
  animation: hind-log-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -0.225s;
  background-color: #272727;
  background-image: linear-gradient(to top, black, black 12px, transparent 12px, transparent);
}
.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, transparent, transparent 99%, #272727);
  height: 90%;
  bottom: 0;
  width: 240%;
  border-top-left-radius: 100%;
}
.hind-log-inner:after {
  left: 100%;
  height: 100%;
  width: 34px;
  background-color: #272727;
  border-bottom-right-radius: 100% 100%;
  transform-origin: bottom left;
  transform: skewY(-38deg);
  background-image: linear-gradient(38deg, black, black 10px, transparent 10px, transparent);
}
.hind-leg-outer + .hind-leg-outer .hind-log-inner:before {
  background: radial-gradient(farthest-side at bottom left, transparent, transparent 99%, #181818);
}

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

.hind-paw:after {
  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 {
  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: #181818;
}

.body {
  top: 50%;
  left: 170px;
  height: 90px;
  width: 173px;
  background: #272727;
  border-top-left-radius: 25% 50%;
  border-bottom-left-radius: 25% 50%;
  border-bottom-right-radius: 25% 50%;
  transform-origin: right center;
  animation: body 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-duration: 0.45s;
  animation-delay: -0.225s;
}
@keyframes body {
  from, to {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}
.body:before {
  content: "";
  display: block;
  position: absolute;
  height: 50px;
  width: 50px;
  background: #272727;
  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: #272727;
  animation: head 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-duration: 0.45s;
  animation-delay: -0.225s;
  transform-origin: center bottom;
  z-index: 0;
  transform-style: preserve-3d;
}
@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, transparent, transparent 99%, #272727 99.1%);
}
.head:after {
  width: 50px;
  height: 40px;
  top: calc(100% - 1px);
  left: 50%;
  background-image: radial-gradient(ellipse farthest-side at bottom right, transparent, transparent 99%, #646464 99.1%);
}

.face {
  width: 84px;
  height: 72px;
  bottom: 0;
  right: 5px;
  background: #646464;
  border-top-left-radius: 60% 100%;
  border-top-right-radius: 40% 10%;
  z-index: 2;
  animation: face 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@keyframes face {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
}
.face:before, .face:after {
  content: "";
  display: block;
  position: absolute;
  animation: eye 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@keyframes eye {
  from, to {
    transform: rotate(-12deg);
  }
  50% {
    transform: translateX(-2px) rotate(-12deg);
  }
}
.face:before {
  height: 8px;
  width: 10px;
  border-radius: 50% 50% 40% 60%/60% 60% 40% 40%;
  top: 10px;
  right: 8px;
  background: rgb(135, 135, 135);
  box-shadow: 8px 10px 0 -2px rgb(135, 135, 135);
}
.face:after {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  top: 22px;
  right: 16px;
  background: black;
}

.snout {
  width: 36px;
  height: 24px;
  left: calc(100% - 5px);
  bottom: 0;
  border-bottom-right-radius: 100%;
  background-color: #646464;
  background-image: radial-gradient(circle 6px at top right, black, black 99%, transparent 99%);
  transform-origin: right;
  animation: snout 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@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, transparent, transparent 99%, #272727 99.1%);
}
.snout:before {
  animation: snout-outer 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@keyframes snout-outer {
  50% {
    transform: scaleX(0.93);
  }
}
.snout:after {
  background-image: radial-gradient(ellipse farthest-side at top right, transparent, transparent 99%, #646464 99.1%);
  left: 0;
}

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

.body > .tail {
  height: 20;
  width: 20;
  left: 10px;
  transform: rotate(58deg);
}
.body > .tail .tail {
  right: 100%;
  z-index: -1;
}
.body > .tail > .tail {
  height: 36px;
  width: 36px;
  top: -8px;
  animation: tail-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
@keyframes tail-2 {
  from, to {
    transform: rotate(0);
  }
  50% {
    transform: rotate(0);
  }
}
.body > .tail > .tail {
  transform-origin: calc(100% + 10px);
  transform: rotate(0);
}
.body > .tail > .tail:before, .body > .tail > .tail:after {
  content: "";
  left: 50%;
  position: absolute;
  height: 50%;
  width: 26.83281573px;
  display: block;
  background: #272727;
}
.body > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-16.601549599deg);
}
.body > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(16.601549599deg);
}
.body > .tail > .tail2 > .tail {
  height: 70px;
  width: 70px;
  top: -25px;
  animation: tail2-2 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
@keyframes tail2-2 {
  from, to {
    transform: rotate(-33deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
.body > .tail > .tail2 > .tail {
  transform-origin: calc(100% + 10px);
  transform: rotate(-30deg);
}
.body > .tail > .tail2 > .tail:before, .body > .tail > .tail2 > .tail:after {
  content: "";
  left: 50%;
  position: absolute;
  height: 50%;
  width: 37.4165738677px;
  display: block;
  background: #272727;
}
.body > .tail > .tail2 > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-33.7489885959deg);
}
.body > .tail > .tail2 > .tail:before {
  transform-origin: bottom left;
  transform: rotate(33.7489885959deg);
}
.body > .tail > .tail > .tail {
  height: 93px;
  width: 93px;
  top: -28.5px;
  animation: tail-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
@keyframes tail-3 {
  from, to {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-24deg);
  }
}
.body > .tail > .tail > .tail {
  transform-origin: calc(100% + 18px);
  transform: rotate(-24deg);
}
.body > .tail > .tail > .tail:before, .body > .tail > .tail > .tail:after {
  content: "";
  left: 50%;
  position: absolute;
  height: 50%;
  width: 57.861904566px;
  display: block;
  background: #272727;
}
.body > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-26.2226465049deg);
}
.body > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(26.2226465049deg);
}
.body > .tail > .tail2 > .tail > .tail {
  height: 120px;
  width: 120px;
  top: -25px;
  animation: tail2-3 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -425ms;
  background: linear-gradient(45deg, #646464 25%, transparent 25%), linear-gradient(135deg, #646464 25%, transparent 25%) 0 0, linear-gradient(to left, transparent, transparent 66%, #646464 66%);
  background-size: 40px 40px, 40px 40px, 100%;
  background-position: center;
  background-color: #272727;
  background-repeat: repeat-y;
}
@keyframes tail2-3 {
  from, to {
    transform: rotate(-35deg);
  }
  50% {
    transform: rotate(-30deg);
  }
}
.body > .tail > .tail2 > .tail > .tail {
  transform-origin: calc(100% + 35px);
  transform: rotate(-30deg);
}
.body > .tail > .tail2 > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail:after {
  content: "";
  left: 50%;
  position: absolute;
  height: 50%;
  width: 91.6515138991px;
  display: block;
  background: #272727;
}
.body > .tail > .tail2 > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-15.2575232905deg);
}
.body > .tail > .tail2 > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(15.2575232905deg);
}
.body > .tail > .tail > .tail > .tail {
  height: 98px;
  width: 98px;
  top: -2.5px;
  animation: tail-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -425ms;
  background: rgb(135, 135, 135) !important;
}
.body > .tail > .tail > .tail > .tail:before {
  background: linear-gradient(to right, rgb(135, 135, 135), #272727) !important;
}
@keyframes tail-4 {
  from, to {
    transform: rotate(-24deg);
  }
  50% {
    transform: rotate(-17deg);
  }
}
.body > .tail > .tail > .tail > .tail {
  transform-origin: calc(100% + 46.5px);
  transform: rotate(-17deg);
}
.body > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail:after {
  content: "";
  left: 50%;
  position: absolute;
  height: 50%;
  width: 95.4672718789px;
  display: block;
  background: #272727;
}
.body > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(-1.5000608783deg);
}
.body > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(1.5000608783deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail {
  height: 50px;
  width: 50px;
  top: 35px;
  animation: tail2-4 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
.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: rgb(135, 135, 135) !important;
}
@keyframes tail2-4 {
  from, to {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(27deg);
  }
}
.body > .tail > .tail2 > .tail > .tail > .tail {
  transform-origin: calc(100% + 60px);
  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.4596669241px;
  display: block;
  background: #272727;
}
.body > .tail > .tail2 > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(24.3157391712deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-24.3157391712deg);
}
.body > .tail > .tail > .tail > .tail > .tail {
  height: 36px;
  width: 36px;
  top: 31px;
  animation: tail-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
.body > .tail > .tail > .tail > .tail > .tail, .body > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail > .tail:after {
  background: rgb(135, 135, 135) !important;
}
@keyframes tail-5 {
  from, to {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(41deg);
  }
}
.body > .tail > .tail > .tail > .tail > .tail {
  transform-origin: calc(100% + 49px);
  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.3969696197px;
  display: block;
  background: #272727;
}
.body > .tail > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(27.5606031053deg);
}
.body > .tail > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-27.5606031053deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail {
  height: 20px;
  width: 20px;
  top: 15px;
  animation: tail2-5 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail, .body > .tail > .tail2 > .tail > .tail > .tail > .tail:before, .body > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
  background: rgb(135, 135, 135) !important;
}
@keyframes tail2-5 {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(23deg);
  }
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail {
  transform-origin: calc(100% + 25px);
  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.6227766017px;
  display: block;
  background: #272727;
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(25.3769335252deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-25.3769335252deg);
}
.body > .tail > .tail > .tail > .tail > .tail > .tail {
  height: 15px;
  width: 15px;
  top: 10.5px;
  animation: tail-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
.body > .tail > .tail > .tail > .tail > .tail > .tail, .body > .tail > .tail > .tail > .tail > .tail > .tail:before, .body > .tail > .tail > .tail > .tail > .tail > .tail:after {
  background: rgb(135, 135, 135) !important;
}
@keyframes tail-6 {
  from, to {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
.body > .tail > .tail > .tail > .tail > .tail > .tail {
  transform-origin: calc(100% + 18px);
  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.2379000772px;
  display: block;
  background: #272727;
}
.body > .tail > .tail > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(24.3157391712deg);
}
.body > .tail > .tail > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-24.3157391712deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail {
  height: 10px;
  width: 10px;
  top: 5px;
  animation: tail2-6 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -225ms;
}
.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: rgb(135, 135, 135) !important;
}
@keyframes tail2-6 {
  from, to {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(10deg);
  }
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail {
  transform-origin: calc(100% + 10px);
  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.1421356237px;
  display: block;
  background: #272727;
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:after {
  bottom: 0;
  transform-origin: top left;
  transform: rotate(19.4712206345deg);
}
.body > .tail > .tail2 > .tail > .tail > .tail > .tail > .tail:before {
  transform-origin: bottom left;
  transform: rotate(-19.4712206345deg);
}
.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 {
  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: #272727;
  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: #272727;
}
.ear:after {
  background: rgb(135, 135, 135);
  width: 60%;
  right: 0;
  animation: ear-inner 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
  animation-delay: -0.45s;
  transform-origin: right;
}
@keyframes ear-inner {
  50% {
    transform: scaleX(0.9);
  }
}
.ear:nth-child(1) {
  right: 0;
  animation: ear-back 0.9s cubic-bezier(0.445, 0, 0.55, 1) both infinite;
}
@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);
  animation: snow-x cubic-bezier(0.445, 0, 0.55, 1) 4s both alternate infinite;
}
@keyframes snow-x {
  from {
    transform: translateX(-10%);
  }
  to {
    transform: translateX(10%);
  }
}
.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%;
  animation: snow 7s linear infinite;
  box-shadow: 36.4785018924vw 248.0804014252vh rgba(255, 255, 255, 0.8), 36.4785018924vw calc(248.0804014252vh + 300vh) rgba(255, 255, 255, 0.8), 77.7387672021vw 276.2075327402vh rgba(255, 255, 255, 0.8), 77.7387672021vw calc(276.2075327402vh + 300vh) rgba(255, 255, 255, 0.8), 75.0948035185vw 212.3385286205vh rgba(255, 255, 255, 0.8), 75.0948035185vw calc(212.3385286205vh + 300vh) rgba(255, 255, 255, 0.8), 13.7281616344vw 85.9786475526vh rgba(255, 255, 255, 0.8), 13.7281616344vw calc(85.9786475526vh + 300vh) rgba(255, 255, 255, 0.8), 2.613895914vw 111.0422446482vh rgba(255, 255, 255, 0.8), 2.613895914vw calc(111.0422446482vh + 300vh) rgba(255, 255, 255, 0.8), 48.6222947701vw 243.3881017963vh rgba(255, 255, 255, 0.8), 48.6222947701vw calc(243.3881017963vh + 300vh) rgba(255, 255, 255, 0.8), 83.8656232978vw 234.7761326866vh rgba(255, 255, 255, 0.8), 83.8656232978vw calc(234.7761326866vh + 300vh) rgba(255, 255, 255, 0.8), 64.2136535518vw 261.4655527262vh rgba(255, 255, 255, 0.8), 64.2136535518vw calc(261.4655527262vh + 300vh) rgba(255, 255, 255, 0.8), 70.6380934362vw 245.4866646824vh rgba(255, 255, 255, 0.8), 70.6380934362vw calc(245.4866646824vh + 300vh) rgba(255, 255, 255, 0.8), 59.0562630526vw 88.8735001633vh rgba(255, 255, 255, 0.8), 59.0562630526vw calc(88.8735001633vh + 300vh) rgba(255, 255, 255, 0.8), 17.4255493145vw 222.2586171677vh rgba(255, 255, 255, 0.8), 17.4255493145vw calc(222.2586171677vh + 300vh) rgba(255, 255, 255, 0.8), 52.203862617vw 239.5520340707vh rgba(255, 255, 255, 0.8), 52.203862617vw calc(239.5520340707vh + 300vh) rgba(255, 255, 255, 0.8), 14.6401904698vw 169.3412607505vh rgba(255, 255, 255, 0.8), 14.6401904698vw calc(169.3412607505vh + 300vh) rgba(255, 255, 255, 0.8), 2.6493671891vw 42.9014528229vh rgba(255, 255, 255, 0.8), 2.6493671891vw calc(42.9014528229vh + 300vh) rgba(255, 255, 255, 0.8), 71.079745958vw 30.2280344481vh rgba(255, 255, 255, 0.8), 71.079745958vw calc(30.2280344481vh + 300vh) rgba(255, 255, 255, 0.8), 13.7540531054vw 18.2955851262vh rgba(255, 255, 255, 0.8), 13.7540531054vw calc(18.2955851262vh + 300vh) rgba(255, 255, 255, 0.8), 49.6818411712vw 219.3969223116vh rgba(255, 255, 255, 0.8), 49.6818411712vw calc(219.3969223116vh + 300vh) rgba(255, 255, 255, 0.8), 99.0799399968vw 83.6948816829vh rgba(255, 255, 255, 0.8), 99.0799399968vw calc(83.6948816829vh + 300vh) rgba(255, 255, 255, 0.8), 24.994528397vw 225.4447273934vh rgba(255, 255, 255, 0.8), 24.994528397vw calc(225.4447273934vh + 300vh) rgba(255, 255, 255, 0.8), 40.1047566835vw 162.3697563644vh rgba(255, 255, 255, 0.8), 40.1047566835vw calc(162.3697563644vh + 300vh) rgba(255, 255, 255, 0.8), 98.3553513611vw 77.3847227234vh rgba(255, 255, 255, 0.8), 98.3553513611vw calc(77.3847227234vh + 300vh) rgba(255, 255, 255, 0.8), 10.8977431879vw 24.4341257642vh rgba(255, 255, 255, 0.8), 10.8977431879vw calc(24.4341257642vh + 300vh) rgba(255, 255, 255, 0.8), 37.6068165798vw 27.2008214202vh rgba(255, 255, 255, 0.8), 37.6068165798vw calc(27.2008214202vh + 300vh) rgba(255, 255, 255, 0.8), 86.8798313671vw 227.5406494768vh rgba(255, 255, 255, 0.8), 86.8798313671vw calc(227.5406494768vh + 300vh) rgba(255, 255, 255, 0.8), 68.5062301602vw 125.9978938532vh rgba(255, 255, 255, 0.8), 68.5062301602vw calc(125.9978938532vh + 300vh) rgba(255, 255, 255, 0.8), 62.945352328vw 246.2801845928vh rgba(255, 255, 255, 0.8), 62.945352328vw calc(246.2801845928vh + 300vh) rgba(255, 255, 255, 0.8), 27.0406668498vw 130.0140780361vh rgba(255, 255, 255, 0.8), 27.0406668498vw calc(130.0140780361vh + 300vh) rgba(255, 255, 255, 0.8), 6.3417081127vw 109.8469542058vh rgba(255, 255, 255, 0.8), 6.3417081127vw calc(109.8469542058vh + 300vh) rgba(255, 255, 255, 0.8), 91.5321465891vw 3.2449475398vh rgba(255, 255, 255, 0.8), 91.5321465891vw calc(3.2449475398vh + 300vh) rgba(255, 255, 255, 0.8), 78.4023495148vw 264.3927825211vh rgba(255, 255, 255, 0.8), 78.4023495148vw calc(264.3927825211vh + 300vh) rgba(255, 255, 255, 0.8), 97.5120388633vw 150.5834219991vh rgba(255, 255, 255, 0.8), 97.5120388633vw calc(150.5834219991vh + 300vh) rgba(255, 255, 255, 0.8), 83.4666622639vw 65.2236809669vh rgba(255, 255, 255, 0.8), 83.4666622639vw calc(65.2236809669vh + 300vh) rgba(255, 255, 255, 0.8), 68.4322236059vw 151.6353030756vh rgba(255, 255, 255, 0.8), 68.4322236059vw calc(151.6353030756vh + 300vh) rgba(255, 255, 255, 0.8), 57.0100090283vw 22.5888575959vh rgba(255, 255, 255, 0.8), 57.0100090283vw calc(22.5888575959vh + 300vh) rgba(255, 255, 255, 0.8), 77.6731733658vw 112.2642111226vh rgba(255, 255, 255, 0.8), 77.6731733658vw calc(112.2642111226vh + 300vh) rgba(255, 255, 255, 0.8), 73.2131339219vw 209.2629851129vh rgba(255, 255, 255, 0.8), 73.2131339219vw calc(209.2629851129vh + 300vh) rgba(255, 255, 255, 0.8), 69.7840393321vw 159.7807826917vh rgba(255, 255, 255, 0.8), 69.7840393321vw calc(159.7807826917vh + 300vh) rgba(255, 255, 255, 0.8), 78.6356098555vw 136.879180864vh rgba(255, 255, 255, 0.8), 78.6356098555vw calc(136.879180864vh + 300vh) rgba(255, 255, 255, 0.8), 26.189036974vw 52.5157058601vh rgba(255, 255, 255, 0.8), 26.189036974vw calc(52.5157058601vh + 300vh) rgba(255, 255, 255, 0.8), 39.3424255966vw 295.11947316vh rgba(255, 255, 255, 0.8), 39.3424255966vw calc(295.11947316vh + 300vh) rgba(255, 255, 255, 0.8);
}
.snow:after {
  width: 1.1vmin;
  height: 8px;
  animation-duration: 6s;
}
@keyframes snow {
  from {
    transform: rotate(10deg) translateY(-300vh);
  }
  to {
    transform: rotate(10deg) translateY(0);
  }
}

body {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  background: transparent;
}

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

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

/*# sourceMappingURL=styles.css.map */