@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600,300);
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
  color: #394568;
}
* .frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* .frame .center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
* .frame .center .graphic {
  width: 100%;
  height: 80%;
  background: #1A2238;
  position: relative;
  overflow: hidden;
}
* .frame .center .graphic .moon {
  background: #F6EDBD;
  border-radius: 50%;
  width: 4.5rem;
  height: 4.5rem;
  position: absolute;
  top: 100%;
  left: 3rem;
  overflow: hidden;
  box-shadow: 2px 2px 3px 4px rgba(246, 237, 189, 0.2), 2px -2px 3px 4px rgba(246, 237, 189, 0.2), -2px 2px 3px 4px rgba(246, 237, 189, 0.2), -2px -2px 3px 4px rgba(246, 237, 189, 0.2);
  animation: moon-rise 1s linear forwards;
}
* .frame .center .graphic .moon .crater-1 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 17%;
  height: 17%;
  top: 13%;
  left: 34%;
}
* .frame .center .graphic .moon .crater-2 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 10%;
  left: 67%;
}
* .frame .center .graphic .moon .crater-3 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 66%;
  left: 76%;
}
* .frame .center .graphic .moon .crater-4 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 11%;
  height: 11%;
  top: 65%;
  left: 49%;
}
* .frame .center .graphic .moon .crater-5 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 65%;
  left: 42%;
}
* .frame .center .graphic .moon .crater-6 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 81%;
  left: 37%;
}
* .frame .center .graphic .moon .crater-7 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 12%;
  height: 12%;
  top: 83%;
  left: 66%;
}
* .frame .center .graphic .moon .crater-8 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 97%;
  left: 40%;
}
* .frame .center .graphic .moon .crater-9 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 18%;
  height: 18%;
  top: 72%;
  left: 24%;
}
* .frame .center .graphic .moon .crater-10 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 8%;
  left: 35%;
}
* .frame .center .graphic .moon .crater-11 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 19%;
  height: 19%;
  top: 16%;
  left: 25%;
}
* .frame .center .graphic .moon .crater-12 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 13%;
  height: 13%;
  top: 39%;
  left: 22%;
}
* .frame .center .graphic .moon .crater-13 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 9%;
  height: 9%;
  top: 92%;
  left: 60%;
}
* .frame .center .graphic .moon .crater-14 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 17%;
  height: 17%;
  top: 33%;
  left: 80%;
}
* .frame .center .graphic .moon .crater-15 {
  background: #f1e399;
  border-radius: 50%;
  position: absolute;
  width: 5%;
  height: 5%;
  top: 67%;
  left: 59%;
}
@keyframes moon-rise {
  to {
    top: 3rem;
    left: 3.5rem;
  }
}
* .frame .center .graphic .back-hill {
  background: #222d49;
  border-radius: 50%;
  width: 20rem;
  height: 20rem;
  position: absolute;
}
* .frame .center .graphic .back-hill-1 {
  bottom: -65%;
  left: -15%;
}
* .frame .center .graphic .back-hill-2 {
  bottom: -63%;
  right: -25%;
}
* .frame .center .graphic .front-hill {
  background: #2a375b;
  border-radius: 50%;
  width: 21rem;
  height: 21rem;
  position: absolute;
}
* .frame .center .graphic .front-hill-1 {
  bottom: -84%;
  left: -30%;
}
* .frame .center .graphic .front-hill-2 {
  bottom: -76%;
  left: 15%;
}
* .frame .center .graphic .front-hill-3 {
  bottom: -85%;
  right: -50%;
}
* .frame .center .graphic .bg-raindrop-1 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-1 0.9s linear 0.4s infinite;
}
* .frame .center .graphic .bg-raindrop-1:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 0.4s infinite;
}
@keyframes bg-raindrop-1 {
  0% {
    bottom: 110%;
    left: 15%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 5%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 5%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-1 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-1 1.4s linear 0.1s infinite;
}
* .frame .center .graphic .md-raindrop-1:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 0.1s infinite;
}
@keyframes md-raindrop-1 {
  0% {
    bottom: 110%;
    left: 18%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 8%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 8%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-1 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-1 2s linear 0.3s infinite;
}
* .frame .center .graphic .sm-raindrop-1:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 0.3s infinite;
}
@keyframes sm-raindrop-1 {
  0% {
    bottom: 110%;
    left: 15%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 5%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 5%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-2 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-2 0.9s linear 0.8s infinite;
}
* .frame .center .graphic .bg-raindrop-2:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 0.8s infinite;
}
@keyframes bg-raindrop-2 {
  0% {
    bottom: 110%;
    left: 30%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 20%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 20%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-2 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-2 1.4s linear 1s infinite;
}
* .frame .center .graphic .md-raindrop-2:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 1s infinite;
}
@keyframes md-raindrop-2 {
  0% {
    bottom: 110%;
    left: 38%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 28%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 28%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-2 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-2 2s linear 0.6s infinite;
}
* .frame .center .graphic .sm-raindrop-2:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 0.6s infinite;
}
@keyframes sm-raindrop-2 {
  0% {
    bottom: 110%;
    left: 35%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 25%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 25%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-3 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-3 0.9s linear 1.2s infinite;
}
* .frame .center .graphic .bg-raindrop-3:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 1.2s infinite;
}
@keyframes bg-raindrop-3 {
  0% {
    bottom: 110%;
    left: 45%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 35%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 35%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-3 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-3 1.4s linear 1.1s infinite;
}
* .frame .center .graphic .md-raindrop-3:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 1.1s infinite;
}
@keyframes md-raindrop-3 {
  0% {
    bottom: 110%;
    left: 58%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 48%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 48%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-3 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-3 2s linear 0.9s infinite;
}
* .frame .center .graphic .sm-raindrop-3:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 0.9s infinite;
}
@keyframes sm-raindrop-3 {
  0% {
    bottom: 110%;
    left: 55%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 45%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 45%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-4 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-4 0.9s linear 1.6s infinite;
}
* .frame .center .graphic .bg-raindrop-4:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 1.6s infinite;
}
@keyframes bg-raindrop-4 {
  0% {
    bottom: 110%;
    left: 60%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 50%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 50%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-4 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-4 1.4s linear 2s infinite;
}
* .frame .center .graphic .md-raindrop-4:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 2s infinite;
}
@keyframes md-raindrop-4 {
  0% {
    bottom: 110%;
    left: 78%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 68%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 68%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-4 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-4 2s linear 1.2s infinite;
}
* .frame .center .graphic .sm-raindrop-4:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 1.2s infinite;
}
@keyframes sm-raindrop-4 {
  0% {
    bottom: 110%;
    left: 75%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 65%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 65%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-5 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-5 0.9s linear 2s infinite;
}
* .frame .center .graphic .bg-raindrop-5:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 2s infinite;
}
@keyframes bg-raindrop-5 {
  0% {
    bottom: 110%;
    left: 75%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 65%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 65%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-5 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-5 1.4s linear 2.1s infinite;
}
* .frame .center .graphic .md-raindrop-5:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 2.1s infinite;
}
@keyframes md-raindrop-5 {
  0% {
    bottom: 110%;
    left: 98%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 88%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 88%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-5 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-5 2s linear 1.5s infinite;
}
* .frame .center .graphic .sm-raindrop-5:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 1.5s infinite;
}
@keyframes sm-raindrop-5 {
  0% {
    bottom: 110%;
    left: 95%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 85%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 85%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-6 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-6 0.9s linear 2.7s infinite;
}
* .frame .center .graphic .bg-raindrop-6:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 2.7s infinite;
}
@keyframes bg-raindrop-6 {
  0% {
    bottom: 110%;
    left: 40%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 30%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 30%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-6 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-6 1.4s linear 3s infinite;
}
* .frame .center .graphic .md-raindrop-6:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 3s infinite;
}
@keyframes md-raindrop-6 {
  0% {
    bottom: 110%;
    left: 43%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 33%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 33%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-6 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-6 2s linear 1.7s infinite;
}
* .frame .center .graphic .sm-raindrop-6:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 1.7s infinite;
}
@keyframes sm-raindrop-6 {
  0% {
    bottom: 110%;
    left: 45%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 35%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 35%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-7 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-7 0.9s linear 3.1s infinite;
}
* .frame .center .graphic .bg-raindrop-7:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 3.1s infinite;
}
@keyframes bg-raindrop-7 {
  0% {
    bottom: 110%;
    left: 60%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 50%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 50%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-7 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-7 1.4s linear 3.1s infinite;
}
* .frame .center .graphic .md-raindrop-7:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 3.1s infinite;
}
@keyframes md-raindrop-7 {
  0% {
    bottom: 110%;
    left: 63%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 53%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 53%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-7 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-7 2s linear 2s infinite;
}
* .frame .center .graphic .sm-raindrop-7:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 2s infinite;
}
@keyframes sm-raindrop-7 {
  0% {
    bottom: 110%;
    left: 65%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 55%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 55%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-8 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-8 0.9s linear 3.5s infinite;
}
* .frame .center .graphic .bg-raindrop-8:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 3.5s infinite;
}
@keyframes bg-raindrop-8 {
  0% {
    bottom: 110%;
    left: 80%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 70%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 70%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-8 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-8 1.4s linear 4s infinite;
}
* .frame .center .graphic .md-raindrop-8:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 4s infinite;
}
@keyframes md-raindrop-8 {
  0% {
    bottom: 110%;
    left: 83%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 73%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 73%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-8 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-8 2s linear 2.3s infinite;
}
* .frame .center .graphic .sm-raindrop-8:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 2.3s infinite;
}
@keyframes sm-raindrop-8 {
  0% {
    bottom: 110%;
    left: 85%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 75%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 75%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-9 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-9 0.9s linear 3.9s infinite;
}
* .frame .center .graphic .bg-raindrop-9:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 3.9s infinite;
}
@keyframes bg-raindrop-9 {
  0% {
    bottom: 110%;
    left: 100%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 90%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 90%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-9 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-9 1.4s linear 4.1s infinite;
}
* .frame .center .graphic .md-raindrop-9:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 4.1s infinite;
}
@keyframes md-raindrop-9 {
  0% {
    bottom: 110%;
    left: 103%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 93%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 93%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-9 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-9 2s linear 2.6s infinite;
}
* .frame .center .graphic .sm-raindrop-9:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 2.6s infinite;
}
@keyframes sm-raindrop-9 {
  0% {
    bottom: 110%;
    left: 105%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 95%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 95%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .bg-raindrop-10 {
  background: #81BEF7;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
  position: absolute;
  bottom: 110%;
  animation: bg-raindrop-10 0.9s linear 4.3s infinite;
}
* .frame .center .graphic .bg-raindrop-10:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: bg-raindrop-tail 0.9s linear 4.3s infinite;
}
@keyframes bg-raindrop-10 {
  0% {
    bottom: 110%;
    left: 20%;
  }
  80% {
    width: 0.5rem;
    height: 0.5rem;
    opacity: 1;
  }
  90% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 10%;
  }
  100% {
    width: 1.1rem;
    height: 0.3rem;
    bottom: 0rem;
    left: 10%;
    opacity: 0.3;
  }
}
@keyframes bg-raindrop-tail {
  0% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 1rem solid #81BEF7;
    border-left: 0.28rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.65rem;
    left: 0.1rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.6rem solid transparent;
    border-right: 0.5rem solid transparent;
    top: -0.3rem;
    left: 0.05rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .md-raindrop-10 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.375rem;
  height: 0.375rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.7;
  animation: md-raindrop-10 1.4s linear 5s infinite;
}
* .frame .center .graphic .md-raindrop-10:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: md-raindrop-tail 1.4s linear 5s infinite;
}
@keyframes md-raindrop-10 {
  0% {
    bottom: 110%;
    left: 23%;
    opacity: 0.7;
  }
  80% {
    width: 0.375rem;
    height: 0.375rem;
    opacity: 0.7;
  }
  90% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 13%;
  }
  100% {
    width: 0.825rem;
    height: 0.225rem;
    bottom: 0rem;
    left: 13%;
    opacity: 0.3;
  }
}
@keyframes md-raindrop-tail {
  0% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.75rem solid #6699ff;
    border-left: 0.21rem solid transparent;
    border-right: 0.19rem solid transparent;
    top: -0.49rem;
    left: 0.075rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.375rem solid #6699ff;
    border-left: 0.45rem solid transparent;
    border-right: 0.375rem solid transparent;
    top: -0.225rem;
    left: 0.0375rem;
    transform: rotate(0deg);
  }
}
* .frame .center .graphic .sm-raindrop-10 {
  background: #6699ff;
  border-radius: 50%;
  width: 0.25rem;
  height: 0.25rem;
  position: absolute;
  bottom: 110%;
  opacity: 0.5;
  animation: sm-raindrop-10 2s linear 2.9s infinite;
}
* .frame .center .graphic .sm-raindrop-10:after {
  content: "";
  width: 2%;
  height: 0%;
  position: absolute;
  animation: sm-raindrop-tail 2s linear 2.9s infinite;
}
@keyframes sm-raindrop-10 {
  0% {
    bottom: 110%;
    left: 25%;
    opacity: 0.5;
  }
  80% {
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.5;
  }
  90% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 15%;
  }
  100% {
    width: 0.55rem;
    height: 0.15rem;
    bottom: 0rem;
    left: 15%;
    opacity: 0.3;
  }
}
@keyframes sm-raindrop-tail {
  0% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  80% {
    border-bottom: 0.5rem solid #81BEF7;
    border-left: 0.14rem solid transparent;
    border-right: 0.125rem solid transparent;
    top: -0.325rem;
    left: 0.05rem;
    transform: rotate(20deg);
  }
  90% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
  100% {
    border-bottom: 0.25rem solid #81BEF7;
    border-left: 0.3rem solid transparent;
    border-right: 0.25rem solid transparent;
    top: -0.15rem;
    left: 0.025rem;
    transform: rotate(0deg);
  }
}
* .frame .center .weather-info {
  width: 100%;
  height: 20%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
* .frame .center .weather-info .temperature {
  font-size: 2.5rem;
}
* .frame .center .weather-info .weather-data, * .frame .center .weather-info .forecast {
  display: flex;
}
* .frame .center .weather-info .weather-data {
  flex-direction: column;
  font-size: 0.92rem;
  margin: 0 5rem 0 1rem;
}
* .frame .center .weather-info .forecast {
  text-align: right;
  font-size: 0.94rem;
}
* .frame .center .weather-info .forecast .days, * .frame .center .weather-info .forecast .max-min {
  display: flex;
  flex-direction: column;
  margin-left: 0.6rem;
}
* .frame .center .weather-info .forecast .max-min {
  font-weight: 600;
}

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