@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";:root{--box-bg: #ffffff10;--light-text: #c8c6c6;--body-bg: #1A1E3C;--sm-font: .87rem}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--body-bg);font-family:Poppins,sans-serif;color:#fff}ul{list-style-type:none}.box{border-radius:25px;padding:25px;background-color:var(--box-bg)}.md-text{font-size:clamp(1.5rem,1.7vw,2rem)}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:transparent;border-radius:25px}::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:25px;cursor:pointer}::-webkit-scrollbar-thumb:hover{background:#ffffff70}header{position:fixed;top:0;background-color:var(--body-bg);z-index:2;width:100%;max-width:1600px;display:flex;justify-content:space-between;align-items:center;padding:16px 32px}header:after{content:"";width:100%;height:16px;background-color:var(--body-bg);position:absolute;top:68px;left:0;filter:blur(3px)}.logo{color:#fff;height:30px}.logo>svg{width:43px;height:auto;margin-right:4px;position:relative;bottom:7px}.logo>span{font-size:1.5rem;position:relative;bottom:19px}.searchBar{width:30%;height:42px;min-width:375px;position:relative}.searchBar.searching:after{content:"";display:block;width:15px;height:15px;border:3.5px solid white;border-bottom-color:transparent;border-radius:54px;position:absolute;top:10px;right:15px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.searchInput{background-color:var(--box-bg);width:100%;height:100%;display:flex;align-items:center;border-radius:20px;padding:10px 15px;gap:10px}.searchInput>input{flex:.85;border:none;font-family:Poppins,sans-serif;outline:none;background-color:transparent;color:inherit}.searchInput button{display:none}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.searchIcon{width:13px}.searchResult{background-color:#fff;width:100%;z-index:2;border-radius:5px;display:none;position:absolute;top:60px;overflow-y:auto}.searchResult.visible{display:block}.searchResult li:not(:last-child){border-bottom:1px solid #f2e7e7}.searchResult li{padding:16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s ease;position:relative}.searchResult li p{color:var(--body-bg)}.searchResult li svg{fill:var(--body-bg)}.searchResult p>span{color:gray}.search-view-btn{background-color:#ffffff67;width:45px;height:45px;margin-right:3px;display:grid;place-items:center;clip-path:circle(45%);transition:all .3s ease;cursor:pointer;display:none;-webkit-tap-highlight-color:transparent}.currentLocationBox{background-color:#3fc83f;color:#fff;width:163px;height:42px;padding:7px 10px;display:flex;align-items:center;justify-content:space-around;border-radius:20px;font-size:.8rem;transition:all .3s ease;cursor:pointer}.currentLocationBox>span:nth-child(1){position:relative;top:3px}.sideSection{position:sticky;top:93px}.currentWeatherBox{width:100%}.currentWeatherBox>h2{line-height:1rem;margin-top:10px}.currTempBox{display:flex;align-items:center;width:100%}.currTemp{font-size:4rem;font-weight:500;line-height:7rem;display:flex;align-items:center}.currWeatherIcon{width:100px;height:auto;margin-inline:auto}.currWeatherIcon>img{width:140%;height:auto;margin:-12%}.currentWeatherBox>p{font-size:1.2rem;line-height:1.4rem}hr{margin:15px 0}.meta li{display:flex;gap:10px;align-items:center}.meta li:first-child{margin-bottom:9px}.daily-forecast>h2{margin:10px 0}.df-card{background-color:var(--box-bg);width:100%}.df-list>li{display:flex;align-items:center}.df-list>li:not(:last-child){margin-bottom:15px}.df-info{display:flex;align-items:center;gap:8px;width:100px}.df-info>img{width:50px;height:auto;margin:-10px;position:relative;top:-1.5px}.df-list>li>p{color:var(--light-text);flex:1;text-align:right}.hl-icon{height:47px;width:auto}.mainSection>div{width:100%}.Highlights{width:100%;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;row-gap:12.5px;column-gap:12.5px}.Highlights>div.box{background-color:#ffffff10}.additionalInfo{height:100%;width:100%;display:flex;gap:12.5px}.additionalInfo>div{flex:1;background-color:#ffffff10}.additionalInfo>.box>div:last-child{gap:30px!important}.aqi{display:flex;justify-content:space-between;align-items:center}.aqi>div:nth-child(1){color:var(--light-text)}.aqi>div:nth-child(2){background-color:transparent;color:#fff;padding:3px 15px;border-radius:25px}.aqi>div[data-aqi-value="1"]{background-color:#3fc83f}.aqi>div[data-aqi-value="2"]{background-color:#f1f100}.aqi>div[data-aqi-value="3"]{background-color:#ff7e00}.aqi>div[data-aqi-value="4"]{background-color:red}.aqi>div[data-aqi-value="5"]{background-color:#8f3f97}.aqi-info{display:flex;justify-content:space-around;align-items:center;width:100%;margin:32px 0 0;gap:30px}.pollutant{text-align:center}.pollutant>div:first-child{color:var(--light-text);font-size:var(--sm-font);margin-bottom:5px}.sun-card>div:first-child{color:var(--light-text);height:25px}.sun-card>div:last-child{display:flex;justify-content:space-around;align-items:center;margin:32px 0 0;gap:25px;flex-wrap:wrap}.sunrise-box,.sunset-box{display:flex;justify-content:space-between;align-items:center;gap:24px}.s-time>div:first-child{color:var(--light-text);font-size:var(--sm-font);margin-bottom:5px}.humidity>div:first-child{color:var(--light-text)}.humidity>div:last-child{margin-top:20px;display:flex;justify-content:space-between;align-items:center}.pressure>div:first-child{color:var(--light-text)}.pressure>div:last-child{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:5px}.visibility>div:first-child{color:var(--light-text)}.visibility>div:last-child{margin-top:20px;display:flex;justify-content:space-between;align-items:center}.feels-like>div:first-child{color:var(--light-text)}.feels-like>div:last-child{margin-top:20px;display:flex;justify-content:space-between;align-items:center}.hourly-forecast{margin-top:10px}.hourly-forecast>div{padding-top:10px;overflow-x:auto;transition:all .3s ease;-webkit-user-select:none;user-select:none}.hourly-forecast>div.overflow{cursor:grab;cursor:-webkit-grab}.hourly-forecast>div.active{background-color:#ffffff0f;cursor:grabbing;cursor:-webkit-grabbing;transform:scale(1.01)}.hourly-forecast>div::-webkit-scrollbar{display:none}.hf-cards-list{display:flex;gap:16px}li.hf-card{min-width:123px;text-align:center;margin-bottom:10px;flex:1}.hf-card.box{padding-inline:0}.hf-icon.ht{height:66px;margin:0}.hf-icon{height:40px;margin:16px 0}.footer{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:10px;gap:0 35px;align-items:center}.footer div:first-child{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.footer a{border:thin solid transparent;line-height:0rem;text-underline-offset:2px}.footer a:link{color:#4f4fff}.footer a:visited{color:#ee78ee}.footer a:active{color:red}.footer img{width:150px;height:auto;object-fit:contain;margin-inline-end:10px}.App{width:100%;max-width:1600px;margin-inline:auto}.App.loading{width:100%;height:100vh;height:100svh;display:grid;place-items:center}.App.loading>*{display:none}.App.loading:before{content:"";display:block;width:100px;height:100px;border:20px dotted white;background-color:transparent;border-bottom-color:transparent;border-radius:50%;position:fixed;animation:spin 1s linear infinite}.error{width:100%;height:100vh;display:grid;place-items:center;font-size:larger}main{padding:0 32px;margin-top:92px;display:grid;grid-template-columns:360px minmax(0,1fr);gap:32px;align-items:flex-start}h2{font-weight:500}@media (max-width:1440px){.md-text{font-size:clamp(1.32rem,1.68vw,1.7rem)}.hl-icon{height:40px}header{padding:16px}main{padding:0 16px;gap:16px}.aqi-info,.sun-card>div{justify-content:space-around;gap:20px}.sun-card>div:last-child,.sunrise-box,.sunset-box{gap:10px}}@media (max-width:1250px){.Highlights{grid-template-columns:1fr}.hl-icon{height:50px}.md-text{font-size:clamp(1.9rem,1vw,2.4rem)}.aqi-info,.sun-card>div{justify-content:space-around}.sun-card>div:last-child,.sunrise-box,.sunset-box{gap:20px}}@media (max-width:1024px){.md-text{font-size:clamp(1.2rem,2.5vw,1.9rem)}header{justify-content:right;gap:16px}main{grid-template-columns:300px minmax(0,1fr)}.logo{margin-right:auto}.searchBar{min-width:250px}.searchResult{min-width:325px}.currTemp{font-size:3rem;line-height:5rem}.currWeatherIcon{width:75px}.aqi-info{display:flex;gap:15px}.hl-icon{height:40px}.sunrise-box,.sunset-box{gap:12px}.sun-card>div:last-child{gap:10px}.additionalInfo{flex-wrap:wrap}li.hf-card{min-width:105px}.hf-card.box{padding:20px;padding-inline:0}}@media (max-width:768px){main{display:block}header{justify-content:flex-end;padding:16px;gap:0px}.sideSection{position:static}.searchBar{height:150vh;max-height:none;width:100%;position:fixed;top:0;left:0;z-index:3;background:#fff;clip-path:circle(21px at calc(100% - 90px) 38px);transition:clip-path .8s ease;visibility:hidden;opacity:0}.searchBar.active{visibility:visible;clip-path:circle(150%);opacity:1}html:has(.searchBar.active) ::-webkit-scrollbar{display:none}.searchBar>.searchInput{all:unset;display:flex;align-items:center;gap:5px;border-bottom:thin solid lightgray;color:#000}.searchInput>input{font-size:inherit;flex:.9}.searchIcon{display:none}.searchInput button{all:unset;height:45px;width:45px;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}.arrow-icon{display:block;width:25px;height:auto}.searchBar>.searchResult{all:unset}.search-view-btn{display:grid}.searchBar.searching:after{border-color:#000;border-bottom-color:transparent}.currentLocationBox{width:45px;height:45px;clip-path:circle(45%)}.currentLocationBox>span{display:none}.currTemp{font-size:4rem}.currWeatherIcon{margin-inline:auto;width:100px}.mainSection{margin:16px 0 0}.md-text{font-size:clamp(1.38rem,4.55vw,1.6rem)}.hl-icon{height:40px}.pollutant>div:first-child{margin:0}.sun-card>div:last-child{justify-content:space-around;gap:30px}.additionalInfo{flex-wrap:wrap}}@media (max-width: 480px){.md-text{font-size:clamp(1.1rem,4.5vw,1.6rem)}.currTemp{font-size:clamp(3.3rem,15.5vw,4rem)}.currWeatherIcon{min-width:80px;max-width:100px;width:30%}.aqi-info{display:grid;grid-template-columns:.8fr 1fr 1fr}.aqi-info>svg{justify-self:center;grid-row:span 2}.pollutant{display:flex;flex-direction:row-reverse;justify-content:left;align-items:center;gap:5px}.sun-card>div:last-child,.sunrise-box,.sunset-box{gap:8px}.highlights-container.box{padding:25px 16px}.additionalInfo .md-text{font-size:clamp(1.5rem,4.5vw,1.6rem)}.footer p,.footer div:last-child{font-size:.85rem}}@media (hover: hover){.currentLocationBox:hover{background-color:#0e7205}.search-view-btn:hover{background-color:#ffffff42}.searchResult li:hover :is(p,span){color:#005eff}.searchResult li:hover svg{fill:#005eff}}