@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:300;src:url(/React-Weather-App/assets/dm-sans-v16-latin-300-5PdLhTtq.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:500;src:url(/React-Weather-App/assets/dm-sans-v16-latin-500-BOEmR4rO.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:600;src:url(/React-Weather-App/assets/dm-sans-v16-latin-600-BY-DBcpC.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:italic;font-weight:600;src:url(/React-Weather-App/assets/dm-sans-v16-latin-600italic-CBc88vWs.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:700;src:url(/React-Weather-App/assets/dm-sans-v16-latin-700-COgqbzv4.woff2) format("woff2")}@font-face{font-display:swap;font-family:Bricolage Grotesque;font-style:normal;font-weight:700;src:url(/React-Weather-App/assets/bricolage-grotesque-v8-latin-700-gtcctNPv.woff2) format("woff2")}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}img{max-width:100%}body{background-color:#03012d;color:#fff;font-family:DM Sans,Arial,Helvetica,sans-serif;font-weight:500;line-height:1.2;padding-block-end:80px}h1{font-family:Bricolage Grotesque,Arial,Helvetica,sans-serif}input,button,textarea,select{font:inherit;border:none}:root{--c-neutral-900: hsl(243, 96%, 9%);--c-neutral-800: hsl(243, 27%, 20%);--c-neutral-700: hsl(243, 23%, 24%);--c-neutral-600: hsl(243, 23%, 30%);--c-neutral-300: hsl(240, 6%, 70%);--c-neutral-200: hsl(250, 6%, 84%);--c-neutral-0: hsl(0, 0%, 100%);--c-orange-500: hsl(28, 100%, 52%);--c-blue-500: hsl(233, 67%, 56%);--c-blue-700: hsl(248, 70%, 36%);--color-main-bg: var(--c-neutral-900);--color-text-light: var(--c-neutral-0);--color-text-med-light: var(--c-neutral-200);--color-panel-bg-dark: var(--c-neutral-800);--color-panel-bg-dark-hover: var(--c-neutral-700);--color-panel-bg-med: var(--c-neutral-700);--color-panel-bg-light: var(--c-neutral-600);--color-panel-border: var(--c-neutral-600);--color-button-bg: var(--c-blue-500);--color-button-bg-hover: var(--c-blue-700);--fs-96: 6rem ;--fs-52: 3.25rem ;--fs-32: 2rem ;--fs-28: 1.75rem ;--fs-20: 1.25rem ;--fs-18: 1.125rem ;--fs-16: 1rem ;--fs-14: .875rem ;--font-size-h1: var(--fs-52);--font-size-dropdown: var(--fs-14);--font-size-search: var(--fs-20);--font-size-city: var(--fs-28);--font-size-date: var(--fs-18);--font-size-temp: var(--fs-96);--font-size-panel-title: var(--fs-18);--font-size-panel-value: var(--fs-32);--font-size-forecast-title: var(--fs-20);--font-size-forecast-day: var(--fs-18);--font-size-forecast-temp: var(--fs-16);--font-size-forecast-hour: var(--fs-20)}@media(min-width:43.75rem){:root{--font-size-dropdown: var(--fs-16)}}.wrapper{display:grid;grid-template-columns:1fr calc(100% - 32px) 1fr}@media(min-width:43.75rem){.wrapper{grid-template-columns:1fr min(calc(100% - 48px),76rem) 1fr}}.wrapper>*{grid-column:2}.main{display:grid;row-gap:32px}.dashboard{display:grid;gap:32px;grid-template-areas:"current" "daily" "hourly"}@media(min-width:62.5rem){.dashboard{gap:48px 32px;grid-template-columns:repeat(3,1fr);grid-template-areas:"current current hourly" "daily daily hourly"}}.visually-hidden{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}.block{background-color:var(--color-panel-bg-dark);border:1px solid var(--color-panel-border);border-radius:12px}.dropdown{background-color:var(--color-panel-bg-dark);color:var(--color-text-light);border:0;font-size:var(--font-size-dropdown);border-radius:8px}.status-msg{text-align:center;font-size:var(--fs-18);padding:20px}.error-msg{color:var(--c-orange-500)}.header{position:sticky;top:0;z-index:10;background-color:var(--color-main-bg);padding-block-end:8px}.header .header__content{display:flex;align-items:center;justify-content:space-between;padding-block-start:16px}.header__logo{width:8.5625rem}@media(min-width:43.75rem){.header__logo{width:12.3125rem}}.header__dropdown-wrapper{position:relative;display:inline-block}.header__dropdown-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;pointer-events:none}.header__dropdown{width:auto;min-width:10ch;padding:12px 16px 12px 50px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.hero .hero__content{display:grid;justify-items:center;padding-block-start:48px}.hero__title{font-size:var(--font-size-h1);margin-block-end:48px;text-align:center;line-height:1.2;font-family:Bricolage Grotesque,Arial,Helvetica,sans-serif}@media(max-width:62.5rem){.hero__title{max-width:15ch}}.hero__search{display:grid;gap:12px 16px;width:100%;max-width:41rem}@media(min-width:43.75rem){.hero__search{grid-template-columns:1fr auto}}.hero__input-wrapper{position:relative;width:100%}.hero__search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:24px;height:24px;pointer-events:none}.hero__textbox{background-color:var(--color-panel-bg-dark);font-size:var(--font-size-search);padding:16px 20px 16px 60px;color:var(--color-text-med-light);border-radius:12px;border:none;font-family:inherit;width:100%}.hero__textbox:focus{outline:2px solid var(--color-text-med-light)}.hero__button{background-color:var(--c-blue-500);border-radius:12px;font-size:var(--font-size-search);color:var(--color-text-light);padding:16px 24px;border:none;cursor:pointer;font-family:inherit;transition:background-color .12s ease-in-out}.hero__button:hover{background-color:var(--color-button-bg-hover)}.current{grid-area:current}.current__weather{display:flex;flex-direction:column;gap:16px;margin-block-end:20px;padding:40px 24px;background-color:var(--c-blue-700);border-radius:20px;overflow:clip;position:relative}.current__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;z-index:0;pointer-events:none}.current__location,.current__info{position:relative;z-index:1}@media(min-width:43.75rem){.current__weather{flex-direction:row;justify-content:space-between;align-items:center;padding-block:83px}}.current__location{text-align:center}.current__city{font-size:var(--font-size-city);font-weight:700;margin-block-end:12px}.current__date{font-size:var(--font-size-date);color:var(--color-text-med-light)}.current__info{display:flex;align-items:center;justify-content:center;gap:20px}.current__icon{width:120px;height:auto}.current__temp{font-size:var(--font-size-temp);line-height:1;letter-spacing:-.02em;font-weight:600;font-style:italic}.current__conditions{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media(min-width:43.75rem){.current__conditions{grid-template-columns:repeat(4,1fr)}}.current__condition{padding:20px}.current__condition-title{font-size:var(--font-size-panel-title);color:var(--color-text-med-light);margin-block-end:24px}.current__condition-value{font-size:var(--font-size-panel-value);font-weight:300}.daily{grid-area:daily}.daily__title{font-size:var(--font-size-forecast-title);margin-block-end:20px}.daily__forecast{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;min-height:10.375rem}@media(min-width:43.75rem){.daily__forecast{grid-template-columns:repeat(7,1fr)}}.daily__day{display:grid;justify-items:center;gap:16px;padding:16px 10px;text-align:center}.daily__day-title{font-size:var(--font-size-forecast-day)}.daily__day-icon{width:60px;height:auto}.daily__day-temps{justify-self:stretch;display:flex;justify-content:space-between;font-size:var(--font-size-forecast-temp)}.daily__day-low{color:var(--color-text-med-light)}.hourly{grid-area:hourly;position:relative}.hourly__content{background-color:var(--color-panel-bg-dark);border-radius:20px;padding:0 16px 20px;max-height:60vh;overflow-y:auto}@media(min-width:62.5rem){.hourly__content{position:absolute;height:100%;max-height:none;overflow-y:auto}}.hourly__header{display:flex;gap:40px;justify-content:space-between;align-items:center;margin-block-end:16px;position:sticky;top:0;z-index:1;background-color:var(--color-panel-bg-dark);padding:20px 0 12px;border-radius:20px 20px 0 0}.hourly__title{font-size:var(--font-size-forecast-title);font-weight:600}.hourly__select{background-color:var(--color-panel-bg-med);width:auto;padding:8px 16px;color:var(--color-text-light);cursor:pointer}.hourly__hours{display:grid;gap:16px}.hourly__hour{display:grid;grid-template-columns:auto auto 1fr;gap:8px;align-items:center;padding:10px 16px 10px 12px;background-color:var(--color-panel-bg-med);border:1px solid var(--color-panel-border);border-radius:8px;min-height:3.75rem}.hourly__hour-icon{width:40px;height:auto}.hourly__hour-time{font-size:var(--font-size-forecast-hour)}.hourly__hour-temp{font-size:var(--font-size-forecast-temp);justify-self:end}