@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:#e3f2fd}h1{background:#5372f0;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 #ccc}.weather-input input:focus{padding:0 16px;border:2px solid #5372F0}.weather-input .separator{height:1px;width:100%;margin:25px 0;background:#bbb;display:flex;align-items:center;justify-content:center}.weather-input .separator:before{content:"or";color:#6c757d;font-size:1.18rem;padding:0 15px;margin-top:-4px;background:#e3f2fd}.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:#5372f0;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;align-content: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{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0;margin:0 0 20px}.weather-cards+.weather-cards{margin-top:20px}.weather-cards .card{color:#fff;padding:18px 16px;list-style:none;width:calc(25% - 15px);background:#6c757d;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}.history-search{margin-top:30px}.history-card{overflow-y:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background-color:#e3f2fd;border-radius:4px}::-webkit-scrollbar-thumb{background-color:#e3f2fd;border-radius:4px}.history-list{list-style:none;background:#daa520;padding:2%;margin-top:2%;border-radius:5px;font-weight:700;color:#fff;cursor:pointer;transition:background-color .3s ease}.history-list:hover{background-color:#45a049}@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}}.subcribe-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:100}.subcribe-modal{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;width:400px;padding:32px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h3{color:#000;font-size:24px;font-weight:700}.close-icon{cursor:pointer;font-size:24px;color:#888}.modal-form{display:flex;flex-direction:column;gap:16px}.modal-input{padding:12px 16px;border:1px solid #ccc;border-radius:4px;font-size:16px}.modal-button{background-color:#5372f0;color:#fff;padding:12px 24px;border:none;border-radius:4px;font-size:16px;cursor:pointer;transition:background-color .3s}.modal-button:hover{background-color:#2c52ed}.icon button{background-color:#45a049;border:none;color:#fff;padding:8px 16px;margin-top:12px;text-align:center;text-decoration:none;display:inline-block;font-size:14px;cursor:pointer;border-radius:4px}.icon button:hover{background-color:#daa520}.load-more-button{display:block;margin:0 auto;padding:10px 20px;background-color:#5372f0;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}.load-more-button:hover{background-color:#2c52ed}