/* Basic reset */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:Arial,Helvetica,sans-serif;background:#87ceeb;overflow:hidden;}

.weather-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:1px 1px 2px #000;}
.weather-container h1{font-size:2.5rem;margin-bottom:0.5rem;}
.weather-container p{font-size:1.5rem;margin:0.2rem 0;}

/* Cloud animation */
.clouds{position:absolute;width:200%;height:200%;top:-50%;left:-50%;background:rgba(255,255,255,0.5);border-radius:50%;animation:moveClouds 60s linear infinite;}
@keyframes moveClouds{0%{transform:translateX(0);}100%{transform:translateX(-50%);} }

/* Rain effect */
.rain{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;}
.rain:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 100%);animation:rain 1s linear infinite;}
@keyframes rain{0%{transform:translateY(-100%);}100%{transform:translateY(100%);} }

/* Additional cloud layers for depth */
.clouds:nth-child(1){animation-duration:80s;opacity:0.6;}
.clouds:nth-child(2){animation-duration:120s;opacity:0.4;top:-70%;}
.clouds:nth-child(3){animation-duration:100s;opacity:0.5;top:-30%;}

/* Multiple rain drops */
.rain:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);animation:rain 1.5s linear infinite;}