.heart {
  position: absolute;
  height: calc(var(--size) * 1vmin);
  width: calc(var(--size) * 1vmin);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.heart svg {
  height: 100%;
  width: 100%;
}
.heart path {
  fill: hsl(var(--hue), 100%, 60%);
}
.backdrop {
  --color-one: #868ff9;
  --color-two: #86f9f9;
  --color-three: #bff986;
  --color-four: #f9e586;
  --color-five: #f99986;
  --cloud: rgba(255,255,255,0.95);
  height: 100vmax;
  width: 100vmax;
  background: radial-gradient(circle at center center, var(--cloud) 20%, transparent 20%), repeating-conic-gradient(var(--color-one) 0, var(--color-one) 10%, var(--color-two) 10%, var(--color-two) 20%, var(--color-three) 20%, var(--color-three) 30%, var(--color-four) 30%, var(--color-four) 40%, var(--color-five) 40%, var(--color-five) 50%);
  position: fixed;
  transform-origin: center;
  border-radius: 50%;
}
svg {
  --size: 50;
  height: calc(var(--size) * 1vmin);
  width: calc(var(--size) * 1vmin);
  z-index: 2;
}
span {
  z-index: 2;
}
.care-bear {
  --lightness: 50;
  cursor: pointer;
}
.care-bear__ear circle:nth-of-type(1) {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__ear circle:nth-of-type(2) {
  --lightness: 90;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__arm rect {
  --lightness: 45;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__feet {
  --lightness: 40;
}
.care-bear__feet path {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__head circle {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__belly circle:nth-of-type(1) {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__belly circle:nth-of-type(2) {
  --lightness: 90;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__heart {
  --saturation: 20;
  --hue: 0;
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
.care-bear__muzzle {
  --lightness: 90;
}
.care-bear__muzzle circle {
  fill: hsl(var(--hue), calc(var(--saturation) * 1%), calc(var(--lightness) * 1%));
}
/**
  * Rain
  */
.rain svg {
  -webkit-animation-delay: calc(var(--d) * -1s);
          animation-delay: calc(var(--d) * -1s);
  -webkit-animation-duration: calc(var(--a) * 1s);
          animation-duration: calc(var(--a) * 1s);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  height: 3vmin;
  left: calc(var(--x) * 1%);
  position: absolute;
  top: calc((var(--y) + 50) * -1px);
  width: 3vmin;
  z-index: -1;
}
.rain svg path {
  fill: #a1c6cc;
  stroke: none;
  opacity: var(--o);
  transform: scaleY(calc(var(--s) * 1.5));
}
@-webkit-keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(75vmin);
  }
}
@keyframes drop {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(75vmin);
  }
}