.weatherBody {
   width: 100%;
   height: 260px;
   background: transparent;
}
/*  */
.container {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3f4c6b+45,fdff96+100 */
background: #212f45;    /* Old browsers */
background: -moz-linear-gradient(-45deg,  #212f45 40%, #fdff96 100%);            /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #212f45 40%,#fdff96 100%);          /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #212f45 40%,#fdff96 100%);                  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212f45', endColorstr='#fdff96',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

   width: 100%;
   max-width: 460px;
   min-height: 200px;
   margin: 5% auto;  /* puts the box in the middle  */
   display: flex;
   flex-direction: column;
}
.container h2 {
   color: #fffafa;
   font-family: "Roboto", sans-serif;
   width: 250px;
   text-align: center;
   padding-left: 5px;
  /* padding-right: 2rem; */
  /* margin: 1rem auto; */
   text-transform: capitalize;
   letter-spacing: 0.02rem;  border: #FFFAFA 0px dotted;
}
.container p {
   color: #000080;                     border: #FFFAFA 0px dotted;
   font-family: "Roboto", sans-serif;
   font-size: xx-small;
   width: 225px;
   text-align: left;
  /* padding-left: 2rem;  */
  /* padding-right: 2rem; */
  /* margin: 1rem auto; */
   letter-spacing: 0.05rem;
}
.container a {
   color: #fdac49;
}
.container .showcase {
   flex-grow: 1;
   margin: 1rem auto;
   padding: 10px;
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(auto-fill, 150px);
   grid-auto-rows: 150px;
}
@media all and (min-width: 200px) {
   .container .showcase {
      max-width: 200px;
      grid-gap: 10px;
   }
}
@media all and (min-width: 400px) {
   .container .showcase {
      max-width: 400px;
      grid-gap: 10px;
   }
}
@media all and (min-width: 600px) {
   .container .showcase {
      max-width: 600px;
      grid-gap: 12px;
   }
}
.container .showcase .canvas {
   position: relative;
}
@media all and (max-width: 200px) {
   .container .container {
      display: none;
   }
}


#sunny .sun {
   position: absolute;
   width: 50%;
   height: 50%;
   top: 25%;
   left: 25%;
   background: radial-gradient(#fdac49, #fcd422);
   border-radius: 50%;
   animation: spinSun 20s linear infinite;
}
#sunny .sun:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0%;
   left: 0%;
   background: inherit;
   border-radius: 50%;
}
#sunny .sun .beam:nth-child(even):before {
   background: #fdac49;
}
#sunny .sun .beam:nth-child(even):after {
   background: #fdac49;
}
#sunny .sun .beam:nth-child(odd):before {
   background: #fcd422;
}
#sunny .sun .beam:nth-child(odd):after {
   background: #fcd422;
}
#sunny .sun .beam:nth-of-type(1) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
}
#sunny .sun .beam:nth-of-type(1):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(1):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(2) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(22.5deg);
}
#sunny .sun .beam:nth-of-type(2):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(2):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(3) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(45deg);
}
#sunny .sun .beam:nth-of-type(3):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(3):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(4) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(67.5deg);
}
#sunny .sun .beam:nth-of-type(4):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(4):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(5) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(90deg);
}
#sunny .sun .beam:nth-of-type(5):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(5):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(6) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(112.5deg);
}
#sunny .sun .beam:nth-of-type(6):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(6):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(7) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(135deg);
}
#sunny .sun .beam:nth-of-type(7):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(7):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#sunny .sun .beam:nth-of-type(8) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   outline: 1px solid #212f45;
   transform: rotate(157.5deg);
}
#sunny .sun .beam:nth-of-type(8):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#sunny .sun .beam:nth-of-type(8):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@keyframes spinSun {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

#partially-cloudy .sun {
   position: absolute;
   width: 42%;
   height: 42%;
   top: 10%;
   right: 15%;
   background: radial-gradient(#fdac49, #fcd422);
   border-radius: 50%;
   animation: spinSun 20s linear infinite;
}
#partially-cloudy .sun:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0%;
   left: 0%;
   background: inherit;
   border-radius: 50%;
}
#partially-cloudy .sun .beam:nth-child(even):before {
   background: #fdac49;
}
#partially-cloudy .sun .beam:nth-child(even):after {
   background: #fdac49;
}
#partially-cloudy .sun .beam:nth-child(odd):before {
   background: #fcd422;
}
#partially-cloudy .sun .beam:nth-child(odd):after {
   background: #fcd422;
}
#partially-cloudy .sun .beam:nth-of-type(1) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
}
#partially-cloudy .sun .beam:nth-of-type(1):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(1):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(2) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(22.5deg);
}
#partially-cloudy .sun .beam:nth-of-type(2):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(2):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(3) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(45deg);
}
#partially-cloudy .sun .beam:nth-of-type(3):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(3):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(4) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(67.5deg);
}
#partially-cloudy .sun .beam:nth-of-type(4):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(4):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(5) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(90deg);
}
#partially-cloudy .sun .beam:nth-of-type(5):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(5):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(6) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(112.5deg);
}
#partially-cloudy .sun .beam:nth-of-type(6):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(6):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(7) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(135deg);
}
#partially-cloudy .sun .beam:nth-of-type(7):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(7):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#partially-cloudy .sun .beam:nth-of-type(8) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(157.5deg);
}
#partially-cloudy .sun .beam:nth-of-type(8):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#partially-cloudy .sun .beam:nth-of-type(8):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@keyframes spinSun {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
#partially-cloudy .cloud {
   position: absolute;
   width: 40%;
   height: 40%;
   top: 27.5%;
   left: 25%;
   background: rgba(255, 250, 250, 0.3);
   border-radius: 44% 56% 49% 51%/71% 63% 37% 29%;
}
#partially-cloudy .cloud:before {
   content: "";
   position: absolute;
   width: 85%;
   height: 85%;
   top: 10%;
   left: -50%;
   right: -50%;
   background: inherit;
   right: unset;
   border-radius: 52% 48% 58% 42%/43% 61% 39% 57%;
}
#partially-cloudy .cloud:after {
   content: "";
   position: absolute;
   width: 85%;
   height: 85%;
   top: 10%;
   left: -50%;
   right: -50%;
   background: inherit;
   left: unset;
   border-radius: 52% 48% 49% 51%/43% 61% 39% 57%;
}

#rain .sun {
   position: absolute;
   width: 42%;
   height: 42%;
   top: 10%;
   right: 15%;
   background: radial-gradient(#fdac49, #fcd422);
   border-radius: 50%;
   animation: spinSun 20s linear infinite;
}
#rain .sun:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0%;
   left: 0%;
   background: inherit;
   border-radius: 50%;
}
#rain .sun .beam:nth-child(even):before {
   background: #fdac49;
}
#rain .sun .beam:nth-child(even):after {
   background: #fdac49;
}
#rain .sun .beam:nth-child(odd):before {
   background: #fcd422;
}
#rain .sun .beam:nth-child(odd):after {
   background: #fcd422;
}
#rain .sun .beam:nth-of-type(1) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
}
#rain .sun .beam:nth-of-type(1):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(1):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(2) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(22.5deg);
}
#rain .sun .beam:nth-of-type(2):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(2):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(3) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(45deg);
}
#rain .sun .beam:nth-of-type(3):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(3):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(4) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(67.5deg);
}
#rain .sun .beam:nth-of-type(4):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(4):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(5) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(90deg);
}
#rain .sun .beam:nth-of-type(5):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(5):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(6) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(112.5deg);
}
#rain .sun .beam:nth-of-type(6):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(6):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(7) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(135deg);
}
#rain .sun .beam:nth-of-type(7):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(7):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
#rain .sun .beam:nth-of-type(8) {
   position: absolute;
   width: 15%;
   height: 140%;
   top: -20%;
   left: 42.5%;
   transform: rotate(157.5deg);
}
#rain .sun .beam:nth-of-type(8):before {
   content: "";
   position: absolute;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
#rain .sun .beam:nth-of-type(8):after {
   content: "";
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 13%;
   clip-path: polygon(50% 100%, 0 0, 100% 0);
}
@keyframes spinSun {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}
#rain .cloud {
   position: absolute;
   width: 40%;
   height: 40%;
   top: 27.5%;
   left: 25%;
   background: #fffafa;
   border-radius: 44% 56% 49% 51%/71% 63% 37% 29%;
}
#rain .cloud:before {
   content: "";
   position: absolute;
   width: 85%;
   height: 85%;
   top: 10%;
   left: -50%;
   right: -50%;
   background: inherit;
   right: unset;
   border-radius: 52% 48% 58% 42%/43% 61% 39% 57%;
}
#rain .cloud:after {
   content: "";
   position: absolute;
   width: 85%;
   height: 85%;
   top: 10%;
   left: -50%;
   right: -50%;
   background: inherit;
   left: unset;
   border-radius: 52% 48% 49% 51%/43% 61% 39% 57%;
}
#rain .cloud .cloud-copy {
   z-index: 2;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: inherit;
   border-radius: inherit;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 58%, #a1a1b7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 58%,#a1a1b7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 58%,#a1a1b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a1a1b7',GradientType=0 ); /* IE6-9 */
}
#rain .cloud .cloud-copy:before {
   content: "";
   position: absolute;
   width: 85%;
   height: 85%;
   top: 10%;
   left: -50%;
   right: -50%;
   background: inherit;
   right: unset;
   border-radius: 52% 48% 58% 42%/43% 61% 39% 57%;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+58,a1a1b7+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 58%, #a1a1b7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 58%,#a1a1b7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 58%,#a1a1b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a1a1b7',GradientType=0 ); /* IE6-9 */
}
#rain .cloud .cloud-copy:after {
   content: "";
   position: absolute;
   width: 85%;
   height: 85%;
   top: 10%;
   left: -50%;
   right: -50%;
   background: inherit;
   left: unset;
   border-radius: 52% 48% 49% 51%/43% 61% 39% 57%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 58%, #a1a1b7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 58%,#a1a1b7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 58%,#a1a1b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#a1a1b7',GradientType=0 ); /* IE6-9 */
}
#rain .cloud .rain {
   position: absolute;
   width: 140%;
   height: 100%;
   left: -20%;
   top: 80%;
   z-index: 1;
   overflow: hidden;
}
#rain .cloud .rain .drop:nth-of-type(1) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 1s linear infinite;
   left: 10%;
}
#rain .cloud .rain .drop:nth-of-type(2) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s linear infinite;
   left: 28.5%;
}
#rain .cloud .rain .drop:nth-of-type(3) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 1s linear infinite;
   left: 47%;
}
#rain .cloud .rain .drop:nth-of-type(4) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s linear infinite;
   right: 28.5%;
}
#rain .cloud .rain .drop:nth-of-type(5) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 1s linear infinite;
   right: 10%;
}
#rain .cloud .rain .drop:nth-of-type(6) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 2s linear infinite;
   left: 28.5%;
}
#rain .cloud .rain .drop:nth-of-type(7) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 2s linear infinite;
   right: 28.5%;
}
#rain .cloud .rain .drop:nth-of-type(8) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 3s linear infinite;
   left: 10%;
}
#rain .cloud .rain .drop:nth-of-type(9) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 3s linear infinite;
   left: 47%;
}
#rain .cloud .rain .drop:nth-of-type(10) {
   position: absolute;
   width: 3%;
   height: 20%;
   top: -20%;
   background: #fffafa;
   border-radius: 1rem;
   transform: rotate(22deg);
   animation: rainDropFall 4s 3s linear infinite;
   right: 10%;
}
@keyframes rainDropFall {
   15% {
      opacity: 1;
   }
   75% {
      opacity: 0;
   }
   100% {
      top: 120%;
      opacity: 0;
   }
}