@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:200;src:url(/weather-app/assets/dm-sans-v17-latin-200-Db5rW57f.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:400;src:url(/weather-app/assets/dm-sans-v17-latin-regular-CW0RaeGs.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:500;src:url(/weather-app/assets/dm-sans-v17-latin-500-B9HHJjqV.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:600;src:url(/weather-app/assets/dm-sans-v17-latin-600-Aqo67rzb.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:700;src:url(/weather-app/assets/dm-sans-v17-latin-700-DvUfVpUG.woff2) format("woff2")}@font-face{font-display:swap;font-family:Bricolage Grotesque;font-style:normal;font-weight:700;src:url(/weather-app/assets/bricolage-grotesque-v9-latin-700-gtcctNPv.woff2) format("woff2")}:root{--clr-primary-blue-500: hsl(233 67% 56%);--clr-primary-blue-700: hsl(248 70% 36%);--clr-accent-orange-500: hsl(28 100% 52%);--clr-neutral-100: hsl(0 0% 100%);--clr-neutral-200: hsl(250 6% 84%);--clr-neutral-300: hsl(240 6% 70%);--clr-neutral-600: hsl(243, 23%, 30%);--clr-neutral-700: hsl(243 23% 24%);--clr-neutral-800: hsl(243 27% 20%);--clr-neutral-900: hsl(243 96% 9%);--clr-surface-300: var(--clr-neutral-700);--clr-surface-400: var(--clr-neutral-800);--ff-base: "DM Sans", sans-serif;--ff-accent: "Bricolage Grotesque", sans-serif;--fs-xs: .875rem ;--fs-sm: 1rem ;--fs-base: 1.125rem ;--fs-md: 1.25rem ;--fs-lg: 1.75rem ;--fs-xl: 2rem ;--fs-2xl: 3.25rem ;--fs-3xl: 6rem ;--fw-light: 200;--fw-regular: 400;--fw-medium: 500;--fw-semi-bold: 600;--fw-bold: 700;--space-3xs: .5rem;--space-2xs: .625rem;--space-xs: 1rem;--space-sm: 1.25rem;--space-md: 1.5rem;--space-lg: 2rem;--space-xl: 3rem;--space-2xl: 5rem;--space-body: clamp(1rem, .5rem + 2.5vw, 3rem);--space-xs-md: clamp(1rem, .143rem + 4.286vw, 1.5rem);--br-sm: 8px;--br-md: 12px;--br-lg: 20px}*,*:before,*:after{box-sizing:border-box}h1,.h1,h2,.h2,h3,.h3,h4,.h4{line-height:1.1}body,h1,h2,h3,p,dl,dd,figure,blockquote{margin:0}ul[role=list],ol[role=list],ul[role=listbox],ol[role=listbox]{list-style:none;padding:0}body{min-height:100vh;line-height:1.5}input,button,textarea,select{font:inherit}img,picture{max-inline-size:100%;display:block}body{font-family:var(--ff-base);font-size:var(--fs-base);font-weight:var(--fw-regular);background:var(--clr-neutral-900);color:var(--clr-neutral-100);padding:var(--space-body)}.wrapper{max-inline-size:76em;margin-inline:auto}.flow>*+*{margin-block-start:var(--flow-space, 1rem)}.flow-lg>*+*{margin-block-start:var(--space-lg)}.flex-flow{display:flex;gap:var(--gap, 1rem)}.flex-wrap{flex-wrap:wrap}.grid-flow{--column-count: 1;--column-size: 1fr;--column-template: repeat(var(--column-count, 1), var(--column-size, 1fr));display:grid;gap:var(--gap, 1rem);grid-template-columns:var(--column-template)}.grid-auto{--min-col-size: 6rem;--item-placement: auto-fit;display:grid;gap:var(--gap, 1rem);grid-template-columns:repeat(var(--item-placement),minmax(min(var(--min-col-size),100%),1fr))}.align-center{align-items:center}.justify-center{justify-content:center}.place-center{align-items:center;justify-content:center}.space-between{justify-content:space-between}.space-around{justify-content:space-around}.margin-block-xl{margin-block:var(--space-xl)}@media not (min-width:30em){.margin-center{margin-inline:auto}}@media not (max-width:78em){main.wrapper{--_gap: 2rem;display:grid;gap:var(--_gap);grid-template-areas:"title title title" "search search search" "current current hourly" "daily daily hourly"}main.wrapper>*{margin:0}.main-title{grid-area:title;padding-block-start:4rem;padding-block-end:calc(4rem - var(--_gap))}.search-container{grid-area:search;padding-block-end:calc(2rem - var(--_gap))}.current{grid-area:current}.daily{grid-area:daily;align-self:self-end}.hourly{grid-area:hourly}}.visually-hidden:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.hidden{display:none}.weather-icon{max-width:60px}.weather-icon-lg{max-width:120px}.bg-surface-400{background:var(--clr-surface-400)}.bg-surface-300{background:var(--clr-surface-300)}.text-center{text-align:center}.main-title{font-family:var(--ff-accent);font-size:var(--fs-2xl);text-wrap:balance}.clr-neutral-200{color:var(--clr-neutral-200)}.fs-base{font-size:var(--fs-base)}.fs-md{font-size:var(--fs-md)}.fs-lg{font-size:var(--fs-lg)}.fs-xl{font-size:var(--fs-xl)}.fs-3xl{font-size:var(--fs-3xl);font-style:italic;font-weight:var(--fw-semi-bold)}.fw-light{font-weight:var(--fw-light)}.fw-semi-bold{font-weight:var(--fw-semi-bold)}.fw-medium{font-weight:var(--fw-medium)}.br-md{border-radius:var(--br-md)}.br-lg{border-radius:var(--br-lg)}.error{color:var(--clr-accent-orange-500);margin-block-start:1rem}select,::picker(select){font:inherit;appearance:base-select}.dropdown{--_dropdown-bg: var(--clr-neutral-800);--gap: var(--space-2xs);background:var(--_dropdown-bg);color:inherit;border:0;border-radius:var(--br-md);padding-block:var(--space-3xs);padding-inline:var(--space-xs);cursor:pointer}.dropdown:is(:hover,:focus-visible){outline-color:var(--clr-neutral-200);outline-offset:5px}.hourly .dropdown{background:var(--clr-neutral-600);margin-inline-start:auto;max-width:fit-content}.dropdown::picker-icon{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13'%20height='8'%20fill='none'%20viewBox='0%200%2013%208'%3e%3cpath%20fill='%23fff'%20d='M6.309%207.484%201.105%202.316c-.175-.14-.175-.421%200-.597l.704-.668a.405.405%200%200%201%20.597%200l4.219%204.148%204.184-4.148c.175-.176.457-.176.597%200l.703.668c.176.176.176.457%200%20.597L6.906%207.484a.405.405%200%200%201-.597%200Z'/%3e%3c/svg%3e");transition:transform .2s ease}.dropdown:open::picker-icon{transform:rotate(180deg)}::picker(select){border:2px solid var(--clr-neutral-600);border-radius:var(--br-md);background:var(--clr-neutral-800);color:inherit;margin-block-start:var(--space-3xs);padding-inline:var(--space-3xs)}.dropdown option:is(:hover,:focus-visible){outline-color:var(--clr-neutral-200);background:var(--clr-neutral-600)}.dropdown option{padding-block:var(--space-3xs);margin-block:var(--space-3xs);border-radius:var(--br-sm)}.dropdown option::checkmark{display:none}.dropdown option:checked{background:var(--clr-neutral-700)}.dropdown option:checked:after{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='11'%20fill='none'%20viewBox='0%200%2014%2011'%3e%3cpath%20fill='%23fff'%20d='M11.895%201.047c.136-.137.355-.137.464%200l.793.766c.11.136.11.355%200%20.464L4.95%2010.48a.315.315%200%200%201-.465%200L.82%206.844c-.11-.137-.11-.356%200-.465l.793-.793c.11-.11.328-.11.465%200l2.625%202.652%207.192-7.191Z'/%3e%3c/svg%3e");margin-inline-start:auto}#units-menu:before{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='none'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='%23fff'%20d='M14.125%207.406c.031.407.031.813%200%201.188l1%20.594a.74.74%200%200%201%20.344.843c-.344%201.313-1.063%202.5-2%203.469-.25.219-.625.281-.906.125l-1-.594c-.25.188-.72.469-1.032.594v1.156a.733.733%200%200%201-.562.719A7.765%207.765%200%200%201%206%2015.5c-.313-.063-.563-.406-.563-.719v-1.156a5.54%205.54%200%200%201-1.03-.594l-1%20.594c-.282.156-.657.094-.907-.125-.938-.969-1.656-2.156-2-3.469a.74.74%200%200%201%20.344-.844l1-.593c-.032-.156-.032-.406-.032-.594%200-.156%200-.406.032-.594l-1-.562A.74.74%200%200%201%20.5%206c.344-1.313%201.063-2.5%202-3.469.25-.219.625-.281.906-.125l1%20.594c.25-.188.719-.469%201.032-.594V1.25c0-.344.218-.625.562-.719a7.766%207.766%200%200%201%203.969%200c.312.063.562.406.562.719v1.156c.313.125.781.406%201.031.594l1-.594c.282-.156.657-.094.907.125.937.969%201.656%202.156%202%203.469a.74.74%200%200%201-.344.844l-1%20.562Zm-1.656%202c.25-1.312.25-1.469%200-2.781l1.375-.781c-.188-.563-.688-1.375-1.063-1.813l-1.375.782c-.969-.844-1.125-.938-2.375-1.375V1.843C8.75%201.812%208.281%201.75%208%201.75c-.313%200-.781.063-1.063.094v1.593c-1.25.438-1.375.532-2.375%201.376L3.188%204.03c-.468.532-.812%201.157-1.062%201.813l1.375.781c-.25%201.313-.25%201.469%200%202.781l-1.375.781c.188.563.688%201.376%201.063%201.813l1.374-.781c.97.844%201.125.937%202.375%201.375v1.594c.282.03.75.093%201.063.093.281%200%20.75-.062%201.031-.094v-1.593c1.25-.438%201.375-.531%202.375-1.375l1.375.781c.375-.438.875-1.25%201.063-1.813l-1.375-.78ZM8%205c1.625%200%203%201.375%203%203%200%201.656-1.375%203-3%203a3%203%200%200%201-3-3c0-1.625%201.344-3%203-3Zm0%204.5A1.5%201.5%200%200%200%209.5%208c0-.813-.688-1.5-1.5-1.5A1.5%201.5%200%200%200%206.5%208c0%20.844.656%201.5%201.5%201.5Z'/%3e%3c/svg%3e");margin-top:5px}.search-container{width:100%;position:relative}.search-bar{background:var(--clr-neutral-800);color:inherit;border:0;padding-inline-start:calc(var(--space-xl) + 10px);padding-block:var(--space-xs);border-radius:var(--br-md);max-width:33rem;flex:1;anchor-name:--search-bar}form:before{content:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='21'%20height='21'%20fill='none'%20viewBox='0%200%2021%2021'%3e%3cpath%20fill='%23D4D3D9'%20d='M19.844%2018.82c.195.196.195.508%200%20.664l-.899.899c-.156.195-.468.195-.664%200l-4.726-4.727a.63.63%200%200%201-.117-.351v-.508c-1.446%201.21-3.282%201.953-5.313%201.953A8.119%208.119%200%200%201%200%208.625C0%204.172%203.633.5%208.125.5c4.453%200%208.125%203.672%208.125%208.125%200%202.031-.781%203.906-1.992%205.313h.508c.117%200%20.234.078.351.156l4.727%204.726ZM8.125%2014.875a6.243%206.243%200%200%200%206.25-6.25c0-3.438-2.813-6.25-6.25-6.25a6.243%206.243%200%200%200-6.25%206.25%206.219%206.219%200%200%200%206.25%206.25Z'/%3e%3c/svg%3e");position:absolute;position-anchor:--search-bar;left:calc(anchor(left) + var(--space-sm));top:anchor(top);transform:translateY(17px)}.search-bar::placeholder{color:var(--clr-neutral-200);font-size:var(--fs-md)}.button{padding-inline:var(--space-md);padding-block:var(--space-xs);border-radius:var(--br-md);background:var(--clr-primary-blue-500);border:0;color:inherit;max-width:7rem;flex:1;cursor:pointer;transition:background .3s ease}@media not (min-width:30em){.button{max-width:100%}}.button:is(:hover,:focus-visible){background:var(--clr-primary-blue-700)}.search-container .dropdown{--flow-space: .25rem;margin:0;padding-block:var(--space-3xs);padding-inline:var(--space-xs);width:100%;max-width:33rem;max-height:13.5rem;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--clr-primary-blue-500) transparent;position:absolute;position-anchor:--search-bar;top:calc(anchor(bottom) + var(--space-2xs));left:anchor(left)}.search-container .dropdown::-webkit-scrollbar{width:12px}.search-container .dropdown::-webkit-scrollbar-thumb{background-color:var(--clr-primary-blue-500)}.search-container .dropdown::-webkit-scrollbar-track{background:transparent}.search-container .dropdown li{padding-inline:var(--space-3xs);padding-block:var(--space-2xs);border-radius:var(--br-sm)}.search-container .dropdown li:is(:hover,:focus-visible){outline-color:var(--clr-neutral-200);background:var(--clr-neutral-600)}.current,.daily{--flow-space: var(--space-sm)}.current__main{--bg-url: url(/weather-app/assets/bg-today-small-DEQrvfY6.svg);background:var(--bg-url);background-repeat:no-repeat;background-size:cover;padding-inline:var(--space-md);padding-block:var(--space-xl);--gap: 0}@media not (max-width:30em){.current__main{--bg-url: url(/weather-app/assets/bg-today-large-CqYszFxp.svg);justify-content:space-between;padding-block:var(--space-2xl)}}@media not (min-width:30em){.current__main{text-align:center;flex-direction:column;text-wrap:balance}}.current__main .temperature{margin-inline-end:1rem}.current__details{--min-col-size: 8rem;--gap: var(--space-xs-md)}.current__details .detail{--flow-space: var(--space-md);padding:var(--space-sm)}.daily__day{padding-inline:var(--space-2xs);padding-block:var(--space-xs)}.daily__day .weather-icon{margin-inline:auto}.hourly{padding-inline:var(--space-xs);padding-block:var(--space-sm)}@media not (max-width:30em){.hourly{max-height:47.25rem;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:var(--clr-primary-blue-500) transparent}.hourly::-webkit-scrollbar{width:12px}.hourly::-webkit-scrollbar-thumb{background-color:var(--clr-primary-blue-500)}.hourly::-webkit-scrollbar-track{background:transparent}}.hourly__header>*{flex:1}.hourly__hour{--gap: var(--space-3xs);padding-inline:calc(var(--space-xs) / 2) var(--space-xs);padding-block:calc(var(--space-3xs) / 2)}.hourly__hour .temp{margin-inline-start:auto}.loading-state{padding:var(--space-lg)}.current.loading-state{min-height:700px}@media not (max-width:30em){.current.loading-state{min-height:480px}}.daily.loading-state{min-height:700px}@media not (max-width:30em){.daily.loading-state{min-height:220px}}