@font-face{font-family:Bricolage_Grotesque;src:url(/weather-app/fonts/Bricolage_Grotesque/static/BricolageGrotesque-Bold.ttf);font-weight:700}@font-face{font-family:DM_Sans;src:url(/weather-app/fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf);font-weight:300 700}:root{--Grotesque: "Bricolage_Grotesque", sans-serif;--DM: "DM_Sans", sans-serif;--Neutral_900: hsl(243, 96%, 9%);--Neutral_800: hsl(243, 27%, 20%);--Neutral_700: hsl(243, 23%, 24%);--Neutral_600: hsl(243, 23%, 30%);--Neutral_300: hsl(240, 6%, 70%);--Neutral_200: hsl(250, 6%, 84%);--Neutral_0: hsl(0, 0%, 100%);--Orange_500: hsl(28, 100%, 52%);--Blue_500: hsl(233, 67%, 56%);--Blue_700: hsl(248, 70%, 36%);--lavender-100: #F5EFFF;--lavender-200: #E5D9F2;--lavender-400: #CDC1FF;--lavender-600: #A294F9}@keyframes blink-cursor{0%,to{border-color:transparent}50%{border-color:var(--Orange_500)}}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes swing{0%{opacity:0;transform:rotateY(100deg);transform-origin:top}to{opacity:1;transform:rotateY(0);transform-origin:top}}@keyframes typing_error{0%{width:0}to{width:608px}}@keyframes typing_title{0%{width:0}to{width:746px}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes slide{0%{opacity:0;transform:translateY(-250px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeout{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}*{margin:0;padding:0;box-sizing:border-box;outline:none;border:none;text-decoration:none;list-style:none}html{font-size:16px;color:#fff}html:has(.root_inner.light){background-color:var(--Neutral_0)}html:has(.root_inner.dark){background-color:var(--Neutral_900)}html,#root,body{width:100vw;max-width:100vw;min-height:100vh}#root{display:flex;justify-content:center}svg,img{max-width:40px}header svg.logo{max-width:100%}p{line-height:1.2;font-size:1rem;font-family:var(--DM);font-weight:300}h1,h2,h3{line-height:1.2;font-family:var(--Grotesque)}.animated{border-radius:10px;transition:all .3s;position:relative;overflow:hidden;z-index:1}.animated:after{background-clip:padding-box;border-radius:inherit;content:"";position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:-2}.animated:before{background-clip:padding-box;border-radius:inherit;content:"";position:absolute;bottom:0;left:0;width:0%;height:100%;transition:all .3s;z-index:-1}.animated:focus:before{width:100%}.dropDown.fadeout{animation:fadeout 1s ease 0s 1 normal forwards!important}.root_inner.dark .daily .card.animated:before{background:var(--Neutral_700)!important}.root_inner.light .daily .card.animated:before{background:var(--lavender-600)!important}.root_inner.dark>div>section.weather>div.hourly>header>div.dropDown>p,.root_inner.dark .card.animated:after{background:var(--Neutral_800)!important}.root_inner.light div.hourly>header>div.dropDown>p:before{background:var(--lavender-400)!important}.root_inner.light .card.animated:after{background:var(--lavender-100)!important}.root_inner.dark>div>section.weather>div.hourly>header>div.dropDown>p:before{background:var(--Neutral_600)!important}.root_inner{display:flex;padding:48px 24px;flex-direction:column;align-items:center;max-width:1264px;width:100%;height:100%}.root_inner>header{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between}.root_inner.light header>svg>g>path:nth-child(3){fill:var(--Neutral_900)}#root>div>header>div.dropDown>div.units{display:flex;flex-direction:column;gap:4px}.root_inner>header>.units{width:143px;height:43px;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:10px;text-transform:capitalize}.root_inner.dark>header>.units{background-color:var(--Neutral_800)}.root_inner.light>header>.units{background-color:var(--lavender-100)}.root_inner.dark>header>.units p{color:var(--Neutral_0)}.root_inner.light>header>.units p{color:var(--Neutral_900)}.root_inner.dark>header .units svg path{fill:var(--Neutral_0)}.root_inner.light>header .units svg path{fill:var(--Neutral_900)}.root_inner>header .dropDown{box-shadow:0 8px 16px #03013252;animation:slide 2s ease 0s 1 normal forwards;z-index:2;position:absolute;top:56.5px;right:0;width:214px;padding:6px 8px;height:fit-content;display:flex;flex-direction:column;gap:4px;border-radius:10px}.root_inner.dark>header>.dropDown{background-color:var(--Neutral_800)}.root_inner.light>header>.dropDown{background-color:var(--lavender-100);border:1px solid var(--lavender-200)}.root_inner.light>header>.dropDown svg path{fill:var(--Neutral_900)}.root_inner>header>.dropDown>p{text-align:left}.root_inner>header>.dropDown button{margin:0 0 5px}.root_inner>header>.dropDown>.unitSelector,.root_inner>header>.dropDown button{text-align:left;display:flex;align-items:center;justify-content:space-between;padding:12px 10px;border-radius:10px;background-color:transparent;color:var(--Neutral_0)}.root_inner.light>header>.dropDown button:after{background-color:transparent}.root_inner.dark>header>.dropDown button:after{background-color:transparent}.root_inner.dark>header>.dropDown button:before{background-color:var(--Neutral_700)}.root_inner.light>header>.dropDown button:before{background-color:var(--lavender-400)}.root_inner>header>.dropDown>p{text-align:left;color:var(--Neutral_300);font-size:.875rem;padding-bottom:4px}.root_inner.dark>header>.dropDown>.unitSelector.selected{background-color:var(--Neutral_700)}.root_inner.light>header>.dropDown>.unitSelector.selected{background-color:var(--lavender-400)}#root>div>header>div.dropDown>div>p{text-align:left;color:var(--Neutral_300);font-size:.875rem;padding-bottom:4px}.root_inner section.search{width:fit-content;position:relative;display:flex;flex-direction:column;align-items:center}.root_inner section.search>h1{margin:64px 0;width:100%;text-align:center;font-size:3.25rem;overflow:hidden;border-right:.15em solid var(--Orange_500);white-space:nowrap;animation:typing_title 3.5s steps(28,end) forwards,blink-cursor .75s step-end infinite}.root_inner.light section.search>h1{color:var(--Neutral_900)}.root_inner section.search .input div.input{position:relative;width:100%;display:flex;justify-content:center;align-items:center}.root_inner section.search .input div.search{width:fit-content;position:relative;display:flex;justify-content:center;align-items:center;gap:16px}.root_inner section.search .input div.search div{transition:border-color 1s;display:flex;align-items:center;flex-direction:row-reverse;gap:16px;width:526px;height:56px;border:1px solid transparent;border-radius:10px;padding:10px 15px}.root_inner.dark section.search .input div.search div{background:var(--Neutral_800)}.root_inner.light section.search .input div.search div{background:var(--lavender-100)}.root_inner section.search .input div.search div input{transition:1s;width:100%;height:100%;background-color:transparent;font-size:1.25rem}.root_inner.dark section.search .input div.search div input{color:var(--Neutral_200)}.root_inner.light section.search .input div.search div input{color:var(--Neutral_900)}.root_inner section.search .input div.search div input::placeholder{transition:1s}.root_inner section.search .input div.search div svg path{transition:1s}input:focus+svg{animation:pulse 1s ease-out infinite}.root_inner.dark input:focus+svg path{fill:var(--Neutral_0)}.root_inner.dark input:focus::placeholder{color:var(--Neutral_0)}.root_inner.dark div:has(>input:focus){border-color:var(--Neutral_0)!important}.root_inner.light input:focus+svg path{fill:var(--Neutral_900)}.root_inner.light input:focus::placeholder{color:var(--Neutral_900)}.root_inner.light div:has(>input:focus){border-color:var(--Neutral_300)!important}.root_inner section.search .input div.search button{display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:var(--Neutral_0);font-family:var(--DM);font-weight:400;width:114px;height:56px;background-color:var(--Blue_500);border-radius:10px;transition:all .3s;position:relative;overflow:hidden;z-index:1}.root_inner section.search .input div.search button:after{background-color:var(--Blue_500)}.root_inner.dark section.search .input div.search button:before{background-color:var(--Blue_700)}.root_inner.light section.search .input div.search button:before{background-color:var(--lavender-600)}.root_inner section.search .results{box-shadow:0 8px 16px #03013252;position:absolute;z-index:2;bottom:100.5px;top:calc(100% + 10px);width:526px;height:fit-content;max-height:184px;overflow-y:scroll;scrollbar-width:none;border-radius:12px;padding:8px}.root_inner.dark section.search .results{background-color:var(--Neutral_800)}.root_inner.light section.search .results{background-color:var(--lavender-100)}.root_inner section.search .results p{text-align:left;display:flex;align-items:center;justify-content:space-between;padding:12px 8px;border-radius:8px;background-color:transparent}.root_inner section.search .results .progress svg{animation:rotate 3s infinite}.root_inner.dark section.search .results p{color:var(--Neutral_0)}.root_inner.light section.search .results p{transition:.5s;color:var(--Neutral_900)}.root_inner.light section.search .results svg path{fill:var(--Neutral_900)}.root_inner section.search .results p.loading{padding:0}.root_inner.dark section.search .results .res:before{background:var(--Neutral_600);border-radius:8px}.root_inner.light section.search .results .res:before{background:var(--lavender-200);border-radius:8px}.root_inner section.search .results .res:after{background:transparent}.root_inner section.search .results .res{cursor:pointer;padding-left:10px;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:10px}.root_inner.dark section.search .results .res svg path{fill:var(--Neutral_0)}.root_inner.light section.search .results .res svg path{fill:var(--Neutral_900)}.root_inner section.search .results .res svg path:hover,.root_inner section.search .results .res p.favorite+svg path{fill:var(--Orange_500)}.root_inner section.search .results svg path{transition:.5s}.root_inner section.search .results .res svg{max-width:20px}.root_inner section.search .results .progress{text-align:left;display:flex;align-items:center;gap:16px;padding:8px 10px;border-radius:8px;background-color:transparent;color:var(--Neutral_0)}section.weather{margin-top:50px;display:flex;flex-wrap:wrap;justify-content:center;width:100%;max-width:1216px;gap:2rem}section.weather .daily{max-width:800px;width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:32px}section.weather .daily .cards{display:flex;justify-content:space-between;gap:20px}section.weather .main-weather{width:100%;height:286px}section.weather .main-weather .info{display:flex;animation:swing 1s ease 0s 1 normal forwards;border-radius:20px;width:100%;height:100%;padding:80px 40px;aspect-ratio:400 / 143;background-size:cover!important;align-items:center;justify-content:space-between;gap:32px}.root_inner.dark section.weather .main-weather .info{background:url(/weather-app/images/bg-today-large.svg) no-repeat}.root_inner.light section.weather .main-weather .info{background:url(/weather-app/images/bg-today-large-light.svg) no-repeat}section.weather .main-weather .info .timeSpace{display:flex;flex-direction:column;gap:12px}section.weather .main-weather .info .timeSpace h2{font-size:1.75rem}.root_inner.dark section.weather .main-weather .info .timeSpace h2{color:var(--Neutral_0)}.root_inner.light section.weather .main-weather .info .timeSpace h2{color:var(--Neutral_900)}section.weather .main-weather .info .timeSpace p{text-transform:capitalize;font-size:1.125rem;font-weight:300;opacity:.8}.root_inner.dark section.weather .main-weather .info .timeSpace p{color:var(--Neutral_0)}.root_inner.root_inner.light section.weather .main-weather .info .timeSpace p{color:var(--Neutral_900)}section.weather .main-weather .info .weather{display:flex;align-items:center}section.weather .main-weather .info .weather img{max-width:120px}section.weather .main-weather .info .weather p{padding-right:15px;box-sizing:content-box;font-size:6rem;color:var(--Neutral_0);font-weight:600;font-style:italic;overflow:hidden;white-space:nowrap}.root_inner.light .weather .main-weather .info .weather p{color:var(--Neutral_900)}.root_inner.dark section.weather .main-weather .loading{background-color:var(--Neutral_800)}.root_inner.light section.weather .main-weather .loading{background-color:var(--lavender-100)}div.loading{background:transparent;height:100%;border-radius:20px;gap:10px;align-items:center;justify-content:center;flex-direction:column;gap:15px}div.loading .points{display:flex;align-items:center;gap:10px}div.loading .point{width:10px;height:10px;border-radius:50%}.root_inner.dark div.loading .point{background-color:var(--Neutral_300)}.root_inner.light div.loading .point{background-color:var(--Neutral_800)}div.loading .point.first{animation:blink 3s infinite}div.loading .point.middle{animation:blink 3.5s infinite}div.loading .point.last{animation:blink 4s infinite}div.loading .point.middle{position:relative;bottom:5px}div.loading p{text-transform:capitalize;text-align:center;color:var(--Neutral_300)}section.weather .daily>.cards{height:118px;display:flex;justify-content:space-between;gap:24px}section.weather .daily>.cards .card{flex:1;padding:20px;border-radius:10px;display:flex;flex-direction:column;gap:24px}section.weather .daily>.cards .card:has(.content){animation:swing 1s ease 0s 1 normal forwards}section.weather .daily>.cards .card h3{color:var(--Neutral_200);font-size:1.125rem;font-weight:500;text-transform:capitalize;font-family:var(--DM)}.root_inner.dark section.weather .daily>.cards .card h3{color:var(--Neutral_200)}.root_inner.light section.weather .daily>.cards .card h3{color:var(--Neutral_600)}section.weather .daily>.cards .card p{color:var(--Neutral_0);font-size:2rem;font-weight:300;font-family:var(--DM)}.root_inner.dark section.weather .daily>.cards .card p{color:var(--Neutral_0)}.root_inner.light section.weather .daily>.cards .card p{color:var(--Neutral_800)}section.weather .daily .dailyForecast{display:flex;flex-direction:column;gap:20px}section.weather .daily .dailyForecast h1{text-transform:capitalize;font-size:1.25rem;font-weight:600;font-family:var(--DM)}section.weather .daily .dailyForecast .cards{display:flex;justify-content:space-between;gap:16px}section.weather .daily>.dailyForecast .card{flex:1;padding:16px 10px;height:165px;border-radius:10px;background:var(--Neutral_800);display:flex;flex-direction:column;align-items:center;gap:16px}.root_inner.light section.weather .daily>.dailyForecast .card{background:transparent}section.weather .daily>.dailyForecast .card:has(.content){animation:swing 1s ease 0s 1 normal forwards}section.weather .daily>.dailyForecast .card .content{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;height:calc(100% - 1.125rem * 1.2 - 16px)}section.weather .daily .dailyForecast .card h3{font-size:1.125rem;font-weight:500;text-transform:capitalize;font-family:var(--DM)}.root_inner.dark section.weather .daily .dailyForecast .card h3{color:var(--Neutral_200)}.root_inner.light section.weather .daily .dailyForecast .card h3{color:var(--Neutral_600)}section.weather .daily>.dailyForecast .card p{font-size:1rem;font-weight:500;font-family:var(--DM)}.root_inner.dark section.weather .daily>.dailyForecast .card p{color:var(--Neutral_0)}.root_inner.light section.weather .daily>.dailyForecast .card p{color:var(--Neutral_800)}section.weather .daily>.dailyForecast .card .temperatures{width:100%;display:flex;align-items:center;justify-content:space-between}section.weather .daily>.dailyForecast .card .temperatures :last-child{color:var(--Neutral_200)}section.weather .hourly{position:relative;max-width:384px;height:693px;width:100%;padding:24px;border-radius:20px;display:flex;flex-direction:column;gap:16px}.root_inner.dark section.weather .hourly{background-color:var(--Neutral_800)}.root_inner.light section.weather .hourly{background-color:var(--lavender-100)}section.weather .hourly header .day{border-radius:10px;background-color:var(--Neutral_600);display:flex;align-items:center;justify-content:center;gap:12px;text-transform:capitalize;padding:8px 16px;width:fit-content}.root_inner.light section.weather .hourly header .day svg path{fill:var(--Neutral_900)}.root_inner.dark section.weather .hourly header .day{background-color:var(--Neutral_600)}.root_inner.light section.weather .hourly header .day{background-color:var(--lavender-200)}section.weather .hourly .dropDown{box-shadow:0 8px 16px #03013252;animation:slide 2s ease 0s 1 normal forwards;z-index:2;position:absolute;top:70px;right:24px;width:214px;padding:6px 8px;height:fit-content;flex-direction:column;gap:4px;border-radius:10px}.root_inner.dark section.weather .hourly .dropDown{background-color:var(--Neutral_800);border:1px solid var(--Neutral_600)}.root_inner.light section.weather .hourly .dropDown{background-color:var(--lavender-200);border:1px solid var(--lavender-400)}section.weather .hourly>.dropDown>p{text-align:left}section.weather>div.hourly>header>div.dropDown>p{text-align:left;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:8px;background-color:transparent;font-weight:300;text-transform:capitalize}.root_inner.light>section.weather>div.hourly>header>div.dropDown>p.selected{background:var(--lavender-400)!important;border:1px solid var(--lavender-600)!important}.root_inner.dark section.weather>div.hourly>header>div.dropDown>p{color:var(--Neutral_0)}.root_inner.light section.weather>div.hourly>header>div.dropDown>p{color:var(--Neutral_900)}section.weather .hourly header h1{font-size:1.25rem;font-weight:600;text-transform:capitalize;font-family:var(--DM)}.root_inner.light section.weather .hourly header h1{color:var(--Neutral_900)}section.weather .hourly header{display:flex;align-items:center;justify-content:space-between}section.weather .hourly .cards{display:flex;flex-direction:column;gap:16px;overflow-x:visible;overflow-y:scroll;scrollbar-width:none}section.weather .hourly>.cards .card{transition:padding .6s;flex:1;padding:9px 16px;border-radius:12px;display:flex;align-items:center;justify-content:space-between}.root_inner.dark section.weather .hourly>.cards .card{background:var(--Neutral_700)}.root_inner.light section.weather .hourly>.cards .card{background:var(--lavender-200)}section.weather .hourly>.cards .card:has(.content){animation:swing 1s ease 0s 1 normal forwards}section.weather .hourly>.cards .card .content{width:100%;height:100%;display:flex;align-items:center;justify-content:space-between}section.weather .hourly>.dropdown p.selected{padding:9px 16px;border-radius:12px;background:var(--Neutral_700);border:1px solid var(--Neutral_600);display:flex;align-items:center;justify-content:space-between}section.weather .hourly>.cards .card .left{display:flex;align-items:center;gap:8px}.root_inner.dark section.weather .hourly>.cards .card p{color:var(--Neutral_0)}.root_inner.light section.weather .hourly>.cards .card p{color:var(--Neutral_900)}section.weather .daily>.dailyForecast .card img{max-width:60px}#root>div.root_inner>section.weather>div.hourly .card .loading{width:100%;background:transparent;height:40px;border-radius:20px;gap:60px;flex-direction:row}section.weather .daily .cards .loading p,section.weather .hourly>.cards .card .loading p,section.weather .daily>.dailyForecast .card .loading p{font-size:1rem;text-transform:capitalize;text-align:center;color:var(--Neutral_300);font-weight:300}div.error{padding-top:40px;width:100%;flex-direction:column;align-items:center;gap:24px}div.error>p{font-size:1.25rem;max-width:554px;text-transform:capitalize;text-align:center;color:var(--Neutral_200);font-weight:500}div.error h1{width:608px;text-align:center;padding-right:15px;font-size:3.25rem;color:var(--Neutral_0);overflow:hidden;border-right:.15em solid var(--Orange_500);white-space:nowrap;margin:0 auto;animation:typing_error 3.5s steps(20,end) forwards,blink-cursor .75s step-end infinite}div.error button{cursor:pointer;width:max-content;padding:12px 16px;border-radius:8px;display:flex;align-items:center;gap:10px}.root_inner.dark div.error button{background:var(--Neutral_800)}.root_inner.light div.error button{background:var(--lavender-100)}div.error button svg{width:15px;fill:var(--Neutral_0)}.root_inner.dark div.error button svg{fill:var(--Neutral_0)}.root_inner.light div.error button svg{fill:var(--Neutral_900)}div.error button p{color:var(--Neutral_0);font-weight:500}div.error>svg{animation:rotate 3s ease 0s 1;fill:var(--Neutral_600);width:50px;height:50px}.root_inner.dark button.theme:after{background-color:var(--Neutral_300)}.root_inner.light button.theme:after{background-color:var(--lavender-200)}.root_inner.light>header>.dropDown button.theme:before{background-color:var(--lavender-400)}.root_inner.dark>header>.dropDown button.theme:after{background-color:transparent}.root_inner.light>header>.dropDown button.theme:after{background-color:transparent}.root_inner.light button.theme svg.light{display:none}.root_inner.dark button.theme svg.dark{display:none}.root_inner.light p,.root_inner.light h1,.root_inner.light h2,.root_inner.light h3{color:var(--Neutral_900)}.root_inner.dark .selected:after{background-color:var(--Neutral_700)!important}.root_inner.light .selected:after{background-color:var(--lavender-400)!important}@media screen and (min-width : 1024px){.root_inner>header>.dropDown button.theme:hover{color:#fff}div.error button:hover>svg{animation:rotate 3s ease 0s 1}.animated:hover:before{width:100%}button:hover{cursor:pointer}#root>div>section.weather>div.hourly>header>div.dropDown>p:hover,.card:hover{cursor:pointer;border:1px solid var(--Neutral_600)}#root>div>section.weather>div.hourly>header>div.dropDown>p:before{background-color:var(--Neutral_700)}.root_inner.light .card:hover{cursor:pointer;border:1px solid var(--lavender-200)}.hourly .card:hover{padding:15px 20px!important}.daily>.card:hover{padding:20px 25px!important}.dailyForecast .card:hover{padding:16px 20px!important}.root_inner.light div.hourly>header>div.dropDown>p:hover{border:1px solid var(--lavender-600)!important}div.search div:hover svg{animation:pulse 1s ease-out infinite}.root_inner.dark div.search div:hover svg path{fill:var(--Neutral_0)}.root_inner.dark div.search div:hover input::placeholder{color:var(--Neutral_0)}.root_inner.dark div:has(>input:hover){border-color:var(--Neutral_0)!important}.root_inner.light div.search div:hover input::placeholder{color:var(--Neutral_900)}.root_inner.light div.search div:hover svg path{fill:var(--Neutral_900)}.root_inner.light div:has(>input:hover){border-color:var(--Neutral_300)!important}.root_inner section.search .input div.search button:hover{color:#fff}.root_inner.light section.search .results .res:hover{cursor:pointer;border:1px solid var(--lavender-400)}.root_inner section.search .results p.loading:hover{border:none;background-color:transparent}.root_inner.dark section.search .results .res:hover{border:1px solid var(--Neutral_600);background-color:var(--Neutral_700)}}@media screen and (min-width: 768px) and (max-width: 1100px){html{font-size:14px}.root_inner{padding:24px 24px 80px}section.weather{max-width:800px}section.weather .daily{max-width:100%}section.weather>div.daily>div.dailyForecast>.cards{flex-wrap:wrap}section.weather>div.daily>div.dailyForecast>.cards .card{min-width:89px}section.weather>div.daily>div.cards{flex-wrap:wrap}section.weather>div.hourly{max-width:100%}}@media screen and (min-width: 1100px) and (max-width: 1280px){html{font-size:14px}section.weather{max-width:800px}section.weather>.hourly{max-width:100%}}@media screen and (max-width: 768px){#root>div>section.weather>div.daily>div.main-weather>div>div.timeSpace{text-align:center}#root>div>header>div.units>p{font-size:.7rem}#root>div>div>h1{animation:none;border:none;white-space:wrap;width:100%}#root>div>section.search>h1{animation:none;border:none;max-width:100%!important;white-space:wrap}div.loading .point{width:7px;height:7px}#root>div.root_inner>section.weather>div.daily>div.cards>div.card .loading p{font-size:1rem}section.weather .main-weather .info .weather img{width:100%;max-width:120px;min-width:40px;height:auto}section.weather .main-weather{width:100%;height:auto;aspect-ratio:343 / 286}.root_inner{padding:16px 16px 48px}#root>div.root_inner>header>div.units{height:33px;width:fit-content;padding:5px 10px;gap:6px}#root>div.root_inner>header>div.units svg{max-width:10px;max-height:10px}section.weather .daily{max-width:100%}#root>div.root_inner>section.weather>div.daily>div.dailyForecast>div.cards{display:grid;width:100%;grid-template-columns:repeat(auto-fit,minmax(80px,80px));justify-content:center;gap:16px}#root>div.root_inner>section.weather>div.daily>div.cards>div{flex:0 1 163.5px;max-width:200px}section.weather>div.daily>div.cards{height:100%;display:grid;grid-template-columns:repeat(2,minmax(120px,163.5px));gap:1rem;width:100%}section.weather>div.daily>div.dailyForecast>.cards .card{max-width:80px;min-width:60px}#root>div.root_inner>section.weather>div.daily>div.cards>div p{font-size:1.75rem}section.weather>div.hourly{max-width:100%}section.search>div>div.search{flex-wrap:wrap}.root_inner section.search .input div.search>*{flex:0 0 100%;width:auto!important}#root>div.root_inner>section.search{width:100%}#root>div.root_inner>section.search>h1{max-width:402px}#root>div.root_inner>section.search>div>div.search{width:100%}#root>div.root_inner>section.weather>div.daily>div.main-weather>div.info{flex-wrap:wrap;justify-content:center;padding:30px 24px;gap:1rem;aspect-ratio:343/286}.root_inner.dark>section.weather>div.daily>div.main-weather>div.info{background-image:url(/weather-app/images/bg-today-small.svg)}.root_inner.light>section.weather>div.daily>div.main-weather>div.info{background-image:url(/weather-app/images/bg-today-small-light.svg)}#root>div.root_inner>section.search>div{width:100%}#root>div.root_inner>section.weather>div.daily>div.main-weather>div.info>div.weather>p{font-size:calc(3em + 10vw)}#root>div.root_inner>section.weather>div.daily{align-items:center}section.weather .daily .dailyForecast{width:100%}section.weather>.hourly{padding:20px 16px}}@media screen and (max-width: 402px){#root>div.root_inner>section.weather>div.daily>div.dailyForecast>div.cards{gap:16px;width:100%;display:grid;grid-template-columns:repeat(3,80px)}}@media screen and (max-width: 374px){html{font-size:clamp(14px,2vw,16px)}header svg.logo{max-width:calc(40% + 10vw)}#root>div.root_inner>section.weather>div.daily>div.main-weather>div.info>div.weather{justify-content:center;gap:1rem}#root>div.root_inner>section.weather>div.daily>div.main-weather>div.info>div.weather{gap:0}}@media (min-width: 729px) and (max-width: 767px){section.weather>div.daily>div.cards{max-width:100%;grid-template-columns:repeat(4,minmax(120px,163.5px))}}@media screen and (max-width : 332px){section.weather .main-weather .info .weather img{max-width:60px}html{font-size:13px}}