@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";#search-bar{position:relative;width:300px;margin:0 auto}#search-bar:not(:focus-within) .suggestions:not(:active){display:none}.suggestions{list-style:none;padding:0;margin:1px 0 0 1px;box-sizing:border-box;border-top:none;border-radius:0 0 4px 4px;background:#fff;position:absolute;z-index:1;width:99%;max-height:160px;overflow:clip;color:#000;text-align:left}#search-bar input{width:100%;padding:10px;margin:0;outline:none;box-sizing:border-box;border:0;border-bottom:none;border-radius:4px 4px 0 0;font-size:1rem;font-family:Poppins;background-color:#04040493;color:#fff;font-weight:400}#search-bar input:focus,#search-bar input:hover{background-color:#04040462}.suggestions li{padding:15px;cursor:pointer;border-bottom:1px solid #ddd}.suggestions li:hover{background:#f0f0f0}@media (max-width: 500px){#search-bar{width:70%}}@media (max-width: 400px){#search-bar{width:80%}}@media (max-width: 380px){#search-bar{width:100%}}#forecast table{border-collapse:collapse}#forecast table tr{border-bottom:1px solid rgba(154,152,200,.8)}#forecast table tr:last-child{border-bottom:0}#forecast table td{font-weight:200;padding:15px 20px;text-align:center}#forecast table td.icon-cell{text-align:right}#forecast table td.icon-cell span{content:url(/assets/sun-DHCTaOq5.png);width:20px;vertical-align:bottom}#details table{border-collapse:collapse}#details table tr{border-bottom:1px solid rgba(154,152,200,.8)}#details table tr:last-child{border-bottom:0}#details table td{padding:16px 20px;text-align:left}#details table td.value{font-weight:500;text-align:right}#wind{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}#wind img{width:100px}#wind div{display:grid;grid-template-columns:1fr;gap:0;font-weight:200;font-size:1.2rem}#times{height:fit-content}#times table{width:100%;border-collapse:collapse}#times table tr{border-bottom:1px solid rgba(154,152,200,.8)}#times table tr:last-child{border-bottom:0}#times table td{text-align:left;padding:8px 10px}#times table td.time{text-align:right;font-weight:500}#air-quality #aqi{width:40%;margin:0 auto 10px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}#air-quality #aqi img{width:50px}#air-quality #aqi p{font-size:1.4rem;font-weight:500}#air-quality #aqi-details{display:grid;grid-auto-flow:column;grid-template-rows:1fr;margin-bottom:0;font-size:1.2rem;font-weight:300}#air-quality #aqi-details .gas{display:grid}.chart-container{height:auto;margin:0 auto;background-color:#9a98c81a;border-radius:10px;overflow:clip;box-shadow:0 5px 10px #131111;transition:.2s}.chart-container:hover{background-color:#9a98c833}.chart-container .plot .x-axis,.chart-container .plot .y-axis{font-size:1rem}.chart-container .plot .x-label,.chart-container .plot .y-label{font-size:1.2rem;font-weight:500;fill:#f5f5f5;font-style:italic}.chart-container .plot .caption{font-size:1.4rem;font-weight:500;fill:#fff}@media (max-width: 1150px){.chart-container .plot .x-axis,.chart-container .plot .y-axis{font-size:.8rem}.chart-container .plot .x-label,.chart-container .plot .y-label{font-size:1rem;font-weight:500;fill:#f5f5f5;font-style:italic}.chart-container .plot .caption{font-size:1.2rem;font-weight:500;fill:#fff}}@media (max-width: 800px){.chart-container .plot .x-axis,.chart-container .plot .y-axis{font-size:1rem}.chart-container .plot .x-label,.chart-container .plot .y-label{font-size:1.2rem}.chart-container .plot .caption{font-size:1.4rem;font-weight:500;margin-bottom:100px}}@media (max-width: 700px){.chart-container .plot .x-axis,.chart-container .plot .y-axis{font-size:.8rem}.chart-container .plot .x-label,.chart-container .plot .y-label{font-size:.7rem}.chart-container .plot .caption{font-size:1rem;font-weight:500}}@media (max-width: 600px){.chart-container{max-width:100%}.chart-container .plot .x-axis,.chart-container .plot .y-axis{font-size:.6rem}.chart-container .plot .caption{font-size:.7rem;font-weight:500}}@media (max-width: 400px){.chart-container .plot .x-axis,.chart-container .plot .y-axis,.chart-container .plot .x-label,.chart-container .plot .y-label{font-size:.4rem}.chart-container .plot path{stroke-width:1}.chart-container .plot .caption{font-size:.5rem;font-weight:500}}html,body{margin:0;padding:0}body{background:linear-gradient(160deg,#414053 27%,#1e2223);min-height:100vh;color:#fff}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;font-family:Poppins}#loading-container{width:80%;margin:0 auto}#loading-container #logo{width:200px;display:block;margin:50px auto}#loading-container #spinner{width:100px;display:inline-block}header#city{display:flex;justify-content:space-around;align-items:center;gap:30px}header#city section{width:50%;display:flex;align-items:center;justify-content:space-evenly}header#city section h1{margin-top:0}header#city div:first-child{display:flex;align-items:center;justify-content:space-between;gap:30px;width:50%}header#city div:first-child button#back{background:none;width:80px;height:80px;padding:0;border-radius:50%;border:none;display:block;margin:0 auto}header#city div:first-child button#back:active,header#city div:first-child button#back:hover{cursor:pointer;background-color:#bebeb5b3}header#city div:first-child button#back img{width:80px;height:80px}.charts{display:grid;grid-template-columns:1fr 1fr;gap:20px}.charts .chart-container{width:100%}header{margin:0 auto;padding:2rem;text-align:center}header h1{font-size:4rem}header section h1{font-size:3.4rem;margin-bottom:0;font-weight:500}header section div{font-size:1.4rem;font-weight:300}header section div span{margin-left:10px}main{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;gap:25px}main section{background-color:#9a98c81a;border-radius:10px;padding:20px;box-shadow:0 5px 10px #131111;transition:.2s}main section img{width:100px;margin-bottom:10px}main section table{margin:0 auto;width:70%}main section table caption{font-size:1.6rem;font-weight:400;margin-bottom:10px}main section table td{font-weight:200;font-size:1.2rem;vertical-align:baseline}main section:hover{background-color:#9a98c833}main section#others{background-color:initial;border-radius:10px;padding:0;box-shadow:none;display:grid;grid-auto-flow:column;grid-template-columns:1fr 1fr;gap:25px;height:fit-content}@media (max-width: 1150px){header#city{display:grid;gap:0}header#city div:first-child{width:100%}header#city section{width:100%;display:grid;align-items:center;justify-content:space-evenly}main section#others #wind{grid-template-columns:1fr;grid-template-rows:1fr 1fr}main section#others #wind img{margin:0 auto}main section#others #times table td{padding-bottom:30px}main section#air-quality #aqi-details{margin:0 auto;padding:0;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);grid-auto-flow:row;gap:25px}}@media (max-width: 950px){.charts{grid-template-columns:1fr;grid-auto-flow:row}main section table{width:100%}}@media (max-width: 830px){main{grid-template-columns:1fr;gap:15px}main section table{width:80%}main section#air-quality #aqi-details{grid-auto-flow:column;grid-template-rows:1fr;grid-template-columns:auto}}@media (max-width: 700px){header#city div:first-child{display:grid;margin:0 auto;justify-content:center}}@media (max-width: 500px){main{grid-template-columns:1fr}main section table{width:100%}main section#others{grid-auto-flow:row;grid-template-columns:1fr;gap:20px}main section#air-quality #aqi{width:100%}main section#air-quality #aqi-details{display:none}}@media (max-width: 480px){header#city{padding:0}header#city div:first-child button#back,header#city div:first-child button#back img{width:50px;height:50px}header#city h1{font-size:2rem}header#city p{font-size:1.2rem}}@media (max-width: 380px){main section#forecast table td.icon-cell{display:none}}@media (max-width: 300px){#loading-container #logo{width:150px}}