@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap);*{box-sizing:border-box;margin:0;padding:0}:root{--body-color:#f3f4f7;--blue-color:#86b4ea;--red-color:#ed5649;--first-color:#fff;--second-color:#f3f4f7;--text-color:#343434;--text-color-light:#949fae;--font:"Montserrat",sans-serif}body.dark{--body-color:#454e80;--blue-color:#86b4ea;--red-color:#ed5649;--first-color:#111e3b;--second-color:#1f2c47;--text-color:#fff;--text-color-light:#aeb2bd;background:linear-gradient(135deg,#fff,#f3f4f7 75%);background:linear-gradient(135deg,var(--first-color) 0,var(--body-color) 75%)}body{background:#f3f4f7;background:var(--body-color);font-family:Montserrat,sans-serif;font-family:var(--font);transition:all .5s}.app-container{display:grid;height:100vh;place-items:center;transition:all .5s;width:100%}.mode-btn{align-items:center;background-color:#fff;background-color:var(--first-color);border-radius:.5rem;color:#343434;color:var(--text-color);cursor:pointer;display:flex;left:50%;padding:1rem;position:fixed;top:3rem;-webkit-transform:translate(-50%);transform:translate(-50%);transition:all .25s}.mode-btn span i{padding-right:.25rem}.weather-app{background-color:#fff;background-color:var(--first-color);border-radius:1rem;height:auto;padding:2rem 1.5rem;position:relative;transition:all .5s;width:340px}.weather-content{display:flex;flex-direction:column;gap:2rem;margin-top:1.25rem}.weather-app input{background-color:#f3f4f7;background-color:var(--second-color);border:2px solid transparent;border-radius:.5rem;color:#343434;color:var(--text-color);font-size:1rem;outline:none;padding:.75rem 1rem;transition:all .5s;width:100%}.weather-app input::-webkit-input-placeholder{color:#949fae;color:var(--text-color-light);font-weight:300}.weather-app input::placeholder{color:#949fae;color:var(--text-color-light);font-weight:300}.weather-app input.error{border-color:#ed5649;border-color:var(--red-color)}.search-info{display:flex;flex-direction:column;gap:.25rem;width:100%}.date{color:#949fae;color:var(--text-color-light);font-size:.75rem}.city{color:#343434;color:var(--text-color);font-size:1rem;font-weight:400;text-transform:capitalize}.city span{color:#949fae;color:var(--text-color-light)}.weather-info{grid-gap:.25rem;align-items:center;display:grid;gap:.25rem;grid-template-columns:repeat(2,1fr);text-align:center}.weather-icon{background-color:#f3f4f7;background-color:var(--second-color);border-radius:50%;display:grid;padding:1.5rem;place-items:center;width:100%}.weather-icon img{object-fit:cover;width:100%}.weather-temp{display:grid;place-items:center}.temp{display:flex;font-size:4rem;font-weight:500;text-transform:capitalize}.temp,.temp span{position:relative}.temp span{font-size:2rem;height:100%;top:8px}.temp.blue{color:#86b4ea;color:var(--blue-color)}.temp.red{color:#ed5649;color:var(--red-color)}.status{color:#343434;color:var(--text-color);font-size:.9rem;margin-bottom:.25rem}.status,.status-desc{text-transform:capitalize}.status-desc{color:#949fae;color:var(--text-color-light);font-size:.75rem}.weather-grid{grid-gap:.25rem;background-color:#f3f4f7;background-color:var(--second-color);border-radius:4rem;display:grid;gap:.25rem;grid-template-columns:repeat(3,1fr);padding:1rem .25rem}.grid-box{border-right:1px solid #fff;border-right:1px solid var(--first-color);display:grid;padding:.5rem;place-items:center}.grid-box:last-child{border-right:none}.grid-title{color:#343434;color:var(--text-color);font-size:.75rem;font-weight:500;margin-bottom:.25rem}.grid-text{color:#949fae;color:var(--text-color-light);font-size:.75rem}.error-message{color:#ed5649;color:var(--red-color);margin-top:1.25rem}.loading{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite;border-left:3px solid #86b4ea;border-right:3px solid #86b4ea;border:3px solid var(--blue-color);border-bottom:3px solid transparent;border-radius:50%;border-top:3px solid transparent;height:50px;margin:1.5rem auto 0;position:relative;width:50px}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
/*# sourceMappingURL=main.7b6bac8e.css.map*/