*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}html{font-size:16px}body{min-width:320px}.app{min-height:100vh;padding:1rem;background:linear-gradient(to right,#eaecc6,#2bc0e4);display:flex;flex-direction:column;justify-content:space-between;gap:1rem}.weather{width:min(100%,clamp(320px,92vw,760px));margin:0 auto;padding:clamp(1rem,2vw,2rem);border-radius:26px;box-shadow:0 0 18px #00000047;display:flex;flex-direction:column;align-items:center;gap:.9rem;background:#ffffff0d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.search-bar{width:min(100%,560px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem}.search-bar input{width:100%;min-width:0;height:clamp(46px,5vw,52px);border:none;outline:none;border-radius:999px;padding:0 1.2rem;color:#1f2937;background:#ebfffc;font-size:clamp(1rem,2vw,1.125rem);box-shadow:0 6px 20px #00000014}.search-bar img{width:clamp(44px,5vw,50px);height:clamp(44px,5vw,50px);padding:.85rem;border-radius:50%;background:#ebfffc;cursor:pointer;box-shadow:0 6px 20px #00000014;flex-shrink:0}.weather-icon{width:clamp(110px,18vw,150px);margin:.4rem 0 0}.temperature{color:#fff;font-size:clamp(2.75rem,7.8vw,4.9rem);line-height:1;text-align:center}.location{color:#fff;font-size:clamp(1.45rem,3.2vw,2.3rem);text-align:center}.weather-data{width:100%;margin-top:.75rem;color:#fff;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.weather-data .col{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:.85rem;font-size:clamp(1rem,2.2vw,1.3rem);padding:.9rem 1rem;border-radius:18px;background:#ffffff14}.weather-data .col span{display:block;font-size:.9rem;opacity:.9;margin-top:.15rem}.weather-data .col img{width:clamp(22px,4vw,26px);margin-top:0;flex-shrink:0}.footer{min-height:3.5rem;padding:.5rem 1rem;text-align:center;font-size:clamp(.8rem,1.8vw,1rem);color:#111827;display:flex;justify-content:center;align-items:center;line-height:1.5}.Heading{min-height:3.5rem;text-align:center;font-size:clamp(1.5rem,3vw,2rem);color:#111827;display:flex;justify-content:center;align-items:center;font-weight:700;padding:0 1rem}@media (max-width: 800px){.weather{width:min(100%,820px)}.weather-data{grid-template-columns:1fr}}@media (max-width: 640px){.search-bar{grid-template-columns:1fr}.search-bar img{justify-self:end}.weather{padding:1rem;border-radius:22px}}@media (max-width: 480px){.app{padding:.75rem}.search-bar input{padding:0 1rem}}
