* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: linear-gradient(120deg, #0a0a2a, #1a1a4a);
  height: 100vh;
  overflow: hidden;
  color: white;
}

/* ANA ORTA ALAN */
.container {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* KALP YAĞMURU */
#heart-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.heart {
  position: absolute;
  top: -50px;
  animation: fall linear forwards;
  opacity: 0.8;
}

@keyframes fall {
  to {
    transform: translateY(110vh);
  }
}

/* AĞAÇ */
#tree-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.star {
  width: 50px;
  aspect-ratio: 1;
  background: gold;
  clip-path: polygon(50% 0, 79% 90%, 2% 35%, 98% 35%, 21% 90%);
  margin-bottom: 10px;
  animation: glow 1s infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 5px gold; }
  to { box-shadow: 0 0 20px gold; }
}

.level {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  width: 25px;
  height: 25px;
  background-color: #0e6655;
  border-radius: 50%;
  margin: 5px;
}

/* IŞIK TOGGLE */
.toggle-switch {
  position: relative;
  height: 30px;
  border-radius: 30px;
  margin: 0 5px;
  cursor: pointer;
}

.toggle-circle {
  position: absolute;
  width: 30px;
  height: 30px;
  background: #ff6b35;
  border-radius: 50%;
  transition: 0.3s;
}

.toggle-switch-s { width: 70px; }
.toggle-switch-m { width: 95px; }
.toggle-switch-l { width: 110px; }

/* YAZI & BUTON */
.text-area {
  text-align: center;
}

.text-area h1 {
  margin-bottom: 20px;
}

button {
  padding: 12px 30px;
  border: none;
  border-radius: 20px;
  background: crimson;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: pink;
  color: black;
}
.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: #ff8800;
  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: #d0c9c3;
}
.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%, #ff8800);
  height: 90%;
  bottom: 0;
  width: 240%;
  border-top-left-radius: 100%;
}
.log-inner:after {
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background-color: #ff8800;
  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: #ff8800;
  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%, #ff8800);
  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: #ff8800;
  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: #ff8800;
  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: #ff8800;
  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: #ff8800;
  -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%, #ff8800 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%, #ff8800 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: #ff8800;
  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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
  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: #ff8800;
}
.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, #ff8800) !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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
}
.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: #ff8800;
  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: #ff8800;
}
.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: 40.20955vw 138.6718vh rgba(255, 255, 255, 0.8), 40.20955vw 438.6718vh rgba(255, 255, 255, 0.8), 35.87087vw 142.80112vh rgba(255, 255, 255, 0.8), 35.87087vw 442.80112vh rgba(255, 255, 255, 0.8), 32.07666vw 19.16241vh rgba(255, 255, 255, 0.8), 32.07666vw 319.16241vh rgba(255, 255, 255, 0.8), 75.63073vw 217.78728vh rgba(255, 255, 255, 0.8), 75.63073vw 517.78728vh rgba(255, 255, 255, 0.8), 2.72167vw 294.92129vh rgba(255, 255, 255, 0.8), 2.72167vw 594.92129vh rgba(255, 255, 255, 0.8), 51.44709vw 190.30452vh rgba(255, 255, 255, 0.8), 51.44709vw 490.30452vh rgba(255, 255, 255, 0.8), 58.92459vw 170.26907vh rgba(255, 255, 255, 0.8), 58.92459vw 470.26907vh rgba(255, 255, 255, 0.8), 85.88565vw 219.06639vh rgba(255, 255, 255, 0.8), 85.88565vw 519.06639vh rgba(255, 255, 255, 0.8), 99.46475vw 110.83332vh rgba(255, 255, 255, 0.8), 99.46475vw 410.83332vh rgba(255, 255, 255, 0.8), 70.06253vw 5.16808vh rgba(255, 255, 255, 0.8), 70.06253vw 305.16808vh rgba(255, 255, 255, 0.8), 67.87394vw 33.40633vh rgba(255, 255, 255, 0.8), 67.87394vw 333.40633vh rgba(255, 255, 255, 0.8), 5.29669vw 196.26634vh rgba(255, 255, 255, 0.8), 5.29669vw 496.26634vh rgba(255, 255, 255, 0.8), 11.27573vw 249.28253vh rgba(255, 255, 255, 0.8), 11.27573vw 549.28253vh rgba(255, 255, 255, 0.8), 13.42111vw 195.9015vh rgba(255, 255, 255, 0.8), 13.42111vw 495.9015vh rgba(255, 255, 255, 0.8), 25.72256vw 97.13177vh rgba(255, 255, 255, 0.8), 25.72256vw 397.13177vh rgba(255, 255, 255, 0.8), 97.27992vw 53.3607vh rgba(255, 255, 255, 0.8), 97.27992vw 353.3607vh rgba(255, 255, 255, 0.8), 45.5925vw 62.71211vh rgba(255, 255, 255, 0.8), 45.5925vw 362.71211vh rgba(255, 255, 255, 0.8), 41.10555vw 100.83653vh rgba(255, 255, 255, 0.8), 41.10555vw 400.83653vh rgba(255, 255, 255, 0.8), 4.07118vw 289.34002vh rgba(255, 255, 255, 0.8), 4.07118vw 589.34002vh rgba(255, 255, 255, 0.8), 43.89357vw 131.20339vh rgba(255, 255, 255, 0.8), 43.89357vw 431.20339vh rgba(255, 255, 255, 0.8), 57.67619vw 223.00493vh rgba(255, 255, 255, 0.8), 57.67619vw 523.00493vh rgba(255, 255, 255, 0.8), 18.66621vw 5.41075vh rgba(255, 255, 255, 0.8), 18.66621vw 305.41075vh rgba(255, 255, 255, 0.8), 88.70182vw 108.66946vh rgba(255, 255, 255, 0.8), 88.70182vw 408.66946vh rgba(255, 255, 255, 0.8), 83.26317vw 178.53763vh rgba(255, 255, 255, 0.8), 83.26317vw 478.53763vh rgba(255, 255, 255, 0.8), 29.44021vw 294.1277vh rgba(255, 255, 255, 0.8), 29.44021vw 594.1277vh rgba(255, 255, 255, 0.8), 86.45682vw 255.52314vh rgba(255, 255, 255, 0.8), 86.45682vw 555.52314vh rgba(255, 255, 255, 0.8), 81.13773vw 286.69716vh rgba(255, 255, 255, 0.8), 81.13773vw 586.69716vh rgba(255, 255, 255, 0.8), 41.23247vw 65.91516vh rgba(255, 255, 255, 0.8), 41.23247vw 365.91516vh rgba(255, 255, 255, 0.8), 18.4556vw 240.76581vh rgba(255, 255, 255, 0.8), 18.4556vw 540.76581vh rgba(255, 255, 255, 0.8), 93.95735vw 262.81601vh rgba(255, 255, 255, 0.8), 93.95735vw 562.81601vh rgba(255, 255, 255, 0.8), 62.82226vw 289.48424vh rgba(255, 255, 255, 0.8), 62.82226vw 589.48424vh rgba(255, 255, 255, 0.8), 91.43624vw 92.27339vh rgba(255, 255, 255, 0.8), 91.43624vw 392.27339vh rgba(255, 255, 255, 0.8), 2.03403vw 230.59699vh rgba(255, 255, 255, 0.8), 2.03403vw 530.59699vh rgba(255, 255, 255, 0.8), 52.71573vw 225.35428vh rgba(255, 255, 255, 0.8), 52.71573vw 525.35428vh rgba(255, 255, 255, 0.8), 99.08377vw 244.69546vh rgba(255, 255, 255, 0.8), 99.08377vw 544.69546vh rgba(255, 255, 255, 0.8), 17.79451vw 290.08638vh rgba(255, 255, 255, 0.8), 17.79451vw 590.08638vh rgba(255, 255, 255, 0.8), 11.47686vw 182.11215vh rgba(255, 255, 255, 0.8), 11.47686vw 482.11215vh rgba(255, 255, 255, 0.8), 87.28894vw 228.52435vh rgba(255, 255, 255, 0.8), 87.28894vw 528.52435vh rgba(255, 255, 255, 0.8), 15.24407vw 76.39341vh rgba(255, 255, 255, 0.8), 15.24407vw 376.39341vh rgba(255, 255, 255, 0.8), 38.49935vw 181.66594vh rgba(255, 255, 255, 0.8), 38.49935vw 481.66594vh rgba(255, 255, 255, 0.8);
}
.snow:after {
  width: 1.1vmin;
  height: 8px;
  -webkit-animation-duration: 100s;
          animation-duration: 100s;
}
@-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;
}
.fox-text {
  margin-top: 30px;
  font-size: 28px;
  color: white;
  text-shadow: 0 0 10px black;
  font-family: Arial, sans-serif;
  animation: fadeIn 2s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}