@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:Poppins,Arial,sans-serif;color:#fff;background-image:url(https://images.unsplash.com/photo-1501630834273-4b5604d2ee31);background-size:cover;background-position:center;background-attachment:fixed}body:before{content:"";position:fixed;inset:0;background:#1e3c72a6;z-index:-1}.WeatherApp{width:90%;max-width:1200px;margin:20px auto;border-radius:20px;overflow:hidden;box-shadow:0 10px 30px #00000080;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff0d;max-height:calc(100vh - 40px)}.weather-container{display:flex;flex-direction:column;height:100%}.left-panel{padding:30px 20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:url(https://images.unsplash.com/photo-1506744038136-46273834b3fb) no-repeat center center/cover;position:relative;min-height:40vh;flex:1}.left-panel:before{content:"";position:absolute;inset:0;background:#00000073}.left-panel *{position:relative;z-index:2}.cityName{text-align:center;margin-bottom:20px}.cityName h2{font-size:28px;font-weight:700;margin:0 0 5px}.cityName h4{font-size:16px;font-weight:500;margin:0}.time-temp{display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:20px}.time{font-size:22px;font-weight:500;margin:0}.date{font-size:14px;margin-top:5px;text-align:center}.temperature{font-size:36px;font-weight:700;margin:0}.right-panel{padding:25px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;background:url(https://images.unsplash.com/photo-1507525428034-b723cf961d3e) no-repeat center center/cover;position:relative;flex:1}.right-panel:before{content:"";position:absolute;inset:0;background:#00000073}.right-panel *{position:relative;z-index:2}.forecast-heading{font-size:24px;font-weight:700;margin-bottom:15px;text-align:center;color:#fff}.weather-icon img{width:70px;height:70px;margin-bottom:10px}.condition{font-size:22px;font-weight:600;margin:10px 0 15px}.search-bar{display:flex;width:100%;max-width:400px;margin:15px 0}.search-bar input{flex:1;padding:12px;font-size:14px;border-radius:8px 0 0 8px;border:none;outline:none;background:#ffffff1a;color:#fff}.search-bar input::placeholder{color:#ddd}.search-bar button{padding:12px 15px;border:none;background:#ffffff30;color:#fff;border-radius:0 8px 8px 0;cursor:pointer}.search-bar button:hover{background:#ffffff50}.city{margin:15px 0;font-size:16px;font-weight:500}.details{width:100%;max-width:400px;margin-top:15px;border-radius:10px;background:#ffffff0d;padding:15px;flex-shrink:0}.details p{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.2);padding:10px 0;font-size:14px;margin:0}.details p:last-child{border-bottom:none}.details span{font-weight:500;color:#eee}@media screen and (max-width: 1023px){html,body{overflow:auto}.WeatherApp{max-height:none;margin:15px auto;overflow:visible}.weather-container{min-height:100vh}.left-panel{min-height:45vh}.search-bar input,.search-bar button{padding:14px 16px}.details p{padding:12px 0}}@media screen and (min-width: 576px) and (max-width: 1023px){.left-panel{padding:40px 30px;min-height:40vh}.cityName h2{font-size:32px}.time{font-size:24px}.temperature{font-size:42px}.right-panel{padding:30px 25px}.forecast-heading{font-size:26px}.weather-icon img{width:80px;height:80px}.condition{font-size:24px}.city{font-size:18px}}@media screen and (min-width: 768px) and (max-width: 1023px){.weather-container{flex-direction:row;height:auto;min-height:500px}.left-panel{flex:2;border-radius:20px 0 0 20px;min-height:auto;padding:40px}.left-panel:before{border-radius:20px 0 0 20px}.time-temp{flex-direction:row}.right-panel{flex:1;border-radius:0 20px 20px 0;padding:30px 25px;overflow-y:auto}.right-panel:before{border-radius:0 20px 20px 0}}@media screen and (min-width: 1024px){html,body{overflow:hidden}.weather-container{flex-direction:row;height:600px}.left-panel{flex:2;border-radius:20px 0 0 20px;min-height:auto;padding:40px}.left-panel:before{border-radius:20px 0 0 20px}.time-temp{flex-direction:row}.right-panel{flex:1;border-radius:0 20px 20px 0;padding:30px 25px}.right-panel:before{border-radius:0 20px 20px 0}}@media screen and (min-width: 992px){.WeatherApp{width:85%;margin:40px auto}.cityName h2{font-size:34px}.time{font-size:26px}.temperature{font-size:48px}.forecast-heading{font-size:28px}}@media screen and (min-width: 1200px){.WeatherApp{width:75%}}@media screen and (max-height: 700px) and (max-width: 576px){.weather-container{min-height:auto}.left-panel{padding:20px 15px;min-height:35vh}.right-panel{padding:20px 15px}.cityName h2{font-size:24px}.temperature{font-size:32px}.details{padding:10px}.details p{padding:8px 0;font-size:13px}}