*
{
margin:0;
padding:0;
box-sizing: border-box;


}

body
{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000000


}

.container 
{
position: relative;
height: 400px;
border-bottom: 2px solid #fff;


}

.cloud 
{
position: relative;
top:50px;
width: 320px;
height:100px;
background: #dddcdc;
border-radius: 100px;


}

.cloud::before
{
content: '';
position:absolute;
top: -50px;
left: 40px;
width: 110px;
height: 110px;
background: #dddcdc;
border-radius: 50%;
box-shadow:90px 0 0 30px #dddcdc;



}

.rain 
{
position: relative;
display: flex;
z-index: 1;
padding: 35px;


}

.rain span 
{
position: relative;
bottom: 10px;
width: 10px;
height: 10px;
background: #fff;
margin: 0 2px;
border-radius: 50%;
animation: animate 5s linear infinite;
animation-duration: calc(15s / var(--i));
transform-origin: bottom;

}

@keyframes animate
 {
    0%
    {
    transform: translateY(0) scale(1);
}
70%
{
transform: translateY(310px) scale(1);
}
100%
{
 transform: translateY(310px) scale(0);   
}
}