@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Open Sans,sans-serif}body{background:linear-gradient(135deg,#2e3b55,#1e1e2f);color:#fff}h1{background:#2e3b55;font-size:1.75rem;text-align:center;padding:18px 0;color:#fff}.container{display:flex;gap:35px;padding:30px}.weather-input{width:550px}.weather-input input{height:46px;width:100%;outline:none;font-size:1.07rem;padding:0 17px;margin:10px 0 20px;border-radius:4px;border:1px solid #4a5670;background:#2e3b55;color:#fff}.weather-input input:focus{border:2px solid #5372f0}.weather-input .separator{height:1px;width:100%;margin:25px 0;background:#4a5670}.weather-input .separator:before{content:"or";color:#bbb;font-size:1.18rem;padding:0 15px;margin-top:-4px;background:#1e1e2f}.weather-input button{width:100%;padding:10px 0;cursor:pointer;outline:none;border:none;border-radius:4px;font-size:1rem;color:#fff;background:#5372f0;transition:.2s ease}.weather-input .search-btn:hover{background:#2c52ed}.weather-input .location-btn{background:#6c757d}.weather-input .location-btn:hover{background:#5c636a}.weather-data{width:100%}.weather-data .current-weather{color:#fff;background:#2e3b55;border-radius:5px;padding:20px 70px 20px 20px;display:flex;justify-content:space-between}.current-weather h2{font-weight:700;font-size:1.7rem}.weather-data h6{margin-top:12px;font-size:1rem;font-weight:500}.current-weather .icon{text-align:center}.current-weather .icon img{max-width:120px;margin-top:-15px}.current-weather .icon h6{margin-top:-10px;text-transform:capitalize}.days-forecast h2{margin:20px 0;font-size:1.5rem}.days-forecast .weather-cards{display:flex;gap:20px}.weather-cards .card{color:#fff;padding:18px 16px;list-style:none;width:20%;background:#4a5670;border-radius:5px}.weather-cards .card h3{font-size:1.3rem;font-weight:600}.weather-cards .card img{max-width:70px;margin:5px 0 -12px}@media (max-width: 1400px){.weather-data .current-weather{padding:20px}.weather-cards{flex-wrap:wrap}.weather-cards .card{width:calc(25% - 15px)}}@media (max-width: 1200px){.weather-cards .card{width:calc(100% / 3 - 15px)}}@media (max-width: 950px){.weather-input{width:450px}.weather-cards .card{width:calc(50% - 10px)}}@media (max-width: 750px){h1{font-size:1.45rem;padding:16px 0}.container{flex-wrap:wrap;padding:15px}.weather-input{width:100%}.weather-data h2{font-size:1.35rem}}