#stone {
  position: absolute;
  left: -80px;
  top: -70px;
  transform: rotateZ(38deg);
  animation-timing-function: ease-out;
}
#stone:after {
  position: absolute;
  left: 0px;
  top: 0px;
  display: block;
  width: 90px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

/******************************  sunny  *************************/

.rope.sunny > .rope.sunny {
  font-size: 8px;
  position: absolute;
  z-index: -1;
  background-color: rgb(71, 56, 56);
  top: 20px;
  left: 24px;
  width: 2px;
  height: 35px;
  border-radius: 50%;
  backface-visibility: hidden;
  transform-origin: top center;
  animation: sunny 7s infinite;
  animation-timing-function: ease-in-out;
}
.rope.sunny > .rope.sunny > .rope.sunny {
  left: 0;
}
@keyframes sunny {
  0% {
    transform: rotateZ(0.1deg);
  }
  50% {
    transform: rotateZ(-0.1deg);
  }
  100% {
    transform: rotateZ(0.1deg);
  }
}

/******************************  windy  *************************/

.rope.windy > .rope.windy {
  font-size: 8px;
  position: absolute;
  z-index: -1;
  background-color: rgb(71, 56, 56);
  top: 20px;
  left: 24px;
  width: 2px;
  height: 35px;
  border-radius: 50%;
  backface-visibility: hidden;
  transform-origin: top center;
  animation: windy 4s infinite;
  animation-timing-function: ease-in;
}
.rope.windy > .rope.windy > .rope.windy {
  left: 0;
}
@keyframes windy {
  0% {
    transform: rotateZ(1deg);
  }

  50% {
    transform: rotateZ(-1deg);
  }

  100% {
    transform: rotateZ(1deg);
  }
}
/******************************  typhoon  *************************/

.rope.typhoon > .rope.typhoon {
  font-size: 8px;
  position: absolute;
  z-index: -1;
  background-color: rgb(71, 56, 56);
  top: 20px;
  left: 24px;
  width: 2px;
  height: 35px;
  border-radius: 50%;
  backface-visibility: hidden;
  transform-origin: top center;
  animation: typhoon 3s infinite;
  animation-timing-function: ease-in;
}
.rope.typhoon > .rope.typhoon > .rope.typhoon {
  left: 0;
}
@keyframes typhoon {
  0% {
    transform: rotateZ(1deg);
  }

  50% {
    transform: rotateZ(-3deg);
  }

  100% {
    transform: rotateZ(1deg);
  }
}
#stone.typhoon {
  display: none;
  position: absolute;
  left: -80px;
  top: -70px;
  transform: rotateZ(38deg);
  animation-timing-function: ease-out;
}
/******************************  misty  *************************/

.misty.active {
  position: absolute;
  background: linear-gradient(
    250deg,
    rgba(215, 215, 215, 0.46) 0%,
    rgba(170, 170, 170, 0.412) 35%,
    rgba(225, 229, 230, 0.294) 53%,
    rgba(235, 235, 235, 0.354) 74%,
    rgba(230, 233, 233, 1) 100%
  );
  width: 100%;
  height: 1000px;
  z-index: 99;
}
/******************************  snow  *************************/

.snow.active {
  position: absolute;
  background: linear-gradient(
    250deg,
    rgba(215, 215, 215, 0.46) 0%,
    rgba(111, 110, 110, 0.667) 35%,
    rgba(225, 229, 230, 0.453) 53%,
    rgba(235, 235, 235, 0.64) 74%,
    rgba(230, 233, 233, 1) 100%
  );
  width: 100%;
  height: 1000px;
  z-index: 999;
}
.rain {
  background: rgb(137, 137, 137);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.498) 0%,
    #ffffff 100%
  );
  height: 10px;
  position: absolute;
  width: 10px;
  border-radius: 50%;
}
.cloud.active {
  position: absolute;
  background: linear-gradient(
    100deg,
    rgba(98, 98, 98, 0.46) 0%,
    rgba(225, 229, 230, 0.453) 53%,
    rgba(144, 144, 144, 0.104) 100%
  );
  width: 100%;
  height: 1000px;
  z-index: 9;
}