.vi-weather{width:300px;height:400px;position:relative;display:flex;align-items:center;--cloud-border-radius:100px;--cloud-background-color:#fff;--overcast-background-color:#484f59;--rain-background-color:#05a2eb;--cloud-filter-shadow:#0001;--cloud-box-shadow:rgba(0, 0, 0, 0.12)}.vi-weather .cloud{position:relative;width:220px;height:80px;background-color:var(--cloud-background-color);border-radius:var(--cloud-border-radius);filter:drop-shadow(8px 8px 0 var(--cloud-filter-shadow));box-shadow:0 0 12px var(--cloud-box-shadow);animation:animateCloud 2s steps(1) infinite}.vi-weather .cloud::before{content:"";position:absolute;top:-20%;left:20%;width:70px;height:70px;border-radius:50%;background:var(--overcast-background-color);box-shadow:60px -10px 0 20px var(--overcast-background-color)}.vi-weather .cloud::after{content:"";position:absolute;inset:0;border-radius:var(--cloud-border-radius);background:var(--overcast-background-color)}.vi-weather .cloud .raindrop{position:absolute;top:0;width:2px;height:10px;transform-origin:bottom;background:var(--rain-background-color);animation:animateRain 2s linear infinite}@keyframes animateCloud{0%{filter:drop-shadow(8px 8px 0 var(--cloud-filter-shadow)) drop-shadow(0 0 0 var(--cloud-background-color)) brightness(1)}95%{filter:drop-shadow(8px 8px 0 var(--cloud-filter-shadow)) drop-shadow(0 0 50px var(--cloud-background-color)) brightness(10)}}@keyframes animateRain{0%{transform:translateY(0) scaleY(1)}70%{transform:translateY(260px) scaleY(1)}80%{transform:translateY(260px) scaleY(.2)}100%{transform:translateY(260px) scaleY(.2) scaleX(15)}}