main.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Poppins",sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0}.container{background-color:#ffffff;padding:2rem;width:90%;max-width:500px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,0.1)}.weather_header{display:flex;justify-content:center;align-items:center}input{width:100%;border:none;background:#000000;color:#ffffff;outline:none;padding:0.75rem 2.5rem 0.75rem 1rem;border-radius:5px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.1)}.weather_search{position:relative;width:100%}.weather_search i{position:absolute;right:1rem;top:50%;transform:translateY(-50%);font-size:1rem;color:#ffffff}.weather_body{text-align:center;margin-top:2rem}.weather_forecast{background:#333;color:#fff;display:inline-block;padding:0.3rem 0.8rem;border-radius:20px}.weather_temperature{font-size:1.5rem}.weather_minmax{display:flex;justify-content:center;margin-top:1.5rem}.weather_minmax p{font-size:12px;margin:0 0.3rem}.weather_info{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:2rem}.weather_card{display:flex;align-items:center;background:#fff;color:#333;padding:1rem;border-radius:8px;box-shadow:5px 5px 35px 6px rgba(0,0,0,0.1)}.weather_card i{font-size:1.3rem;margin-right:0.8rem}.weather_card p{font-size:12px}@media (max-width:936px){.container{width:90%}.weather_header{flex-direction:column}input{padding:0.5rem 1.5rem}}@media (max-width:600px){.container{width:95%}input{padding:0.5rem 1rem}}@media (max-width:400px){input{width:calc(100% - 40px)}}