*{padding:0;margin:0;box-sizing:border-box}:root{--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%);--neutral-0-light: hsla(0, 0%, 100%, .8);--orange-500: hsl(28, 100%, 52%);--blue-500: hsl(233, 67%, 56%);--blue-700: hsl(248, 70%, 36%);--font-family-primary: "DM Sans", sans-serif;--font-family-secondary: "Bricolage Grotesque", sans-serif;--font-weight-light: 300;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-size-body: 18px;--border-radius-sm: .5rem;--border-radius-md: .75rem;--border-radius-lg: 1.25rem;--focus-box-shadow: 0 0 0 3px var(--neutral-900), 0 0 0 5px var(--neutral-0)}.textpreset1{font-size:6rem;font-weight:var(--font-weight-semibold);line-height:100%;font-style:italic;letter-spacing:-2px}.textpreset2{font-size:3.25rem;font-family:var(--font-family-secondary);font-weight:var(--font-weight-bold);line-height:120%}.textpreset3{font-size:2rem;font-weight:var(--font-weight-light);line-height:100%}.textpreset4{font-size:1.75rem;font-weight:var(--font-weight-bold);line-height:120%}.textpreset5{font-size:1.25rem;font-weight:var(--font-weight-semibold);line-height:120%}.textpreset5medium{font-size:1.25rem;font-weight:var(--font-weight-medium);line-height:120%}.textpreset6{font-size:1.125rem;font-weight:var(--font-weight-medium);line-height:120%}.textpreset7{font-size:1rem;font-weight:var(--font-weight-medium);line-height:120%}.textpreset8{font-size:.875rem;font-weight:var(--font-weight-medium);line-height:120%}body{font-family:var(--font-family-primary);font-size:var(--font-size-body);color:var(--neutral-0);background-color:var(--neutral-900)}main{padding:clamp(3rem,2.5541rem + 1.9025vw,4rem) 0}button{border:none;color:inherit;cursor:pointer}input{padding:1rem 2rem;border-radius:var(--border-radius-md);border:none;font:inherit;color:inherit;max-width:100%}img{max-width:100%}.main-container{display:grid;grid-template-columns:1fr;gap:clamp(2rem,.2857rem + 3.5714vw,3rem)}.container{width:90%;max-width:1216px;margin:0 auto}.flex-row{display:flex;justify-content:space-between;align-items:center}.card{border-radius:var(--border-radius-md);background-color:var(--neutral-800);border:1px solid var(--neutral-600);padding:1.25rem}.section-title{margin-bottom:1.25rem}header{padding:clamp(1rem,.1082rem + 3.805vw,3rem) 0 0}.logo{flex-grow:0;height:clamp(1.75rem,1.0344rem + 3.0534vw,2.5rem)}.logo svg{height:100%}.dropdown-button{background-color:var(--neutral-800);border-radius:var(--border-radius-sm);padding:.5em 1em;display:flex;align-items:center;gap:.5em}.dropdown-button:hover,.dropdown-button:focus{background-color:var(--neutral-700)}.dropdown-button:focus{box-shadow:var(--focus-box-shadow)}.hourly-header .dropdown-button{background-color:var(--neutral-700)}.dropdown-button:after{content:"";position:absolute;top:100%;right:0;width:100%;height:.625rem;background:transparent;z-index:1}.dropdown{position:relative;z-index:1000}.dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + .625rem);padding:.5rem;min-width:13.375rem}.dropdown-menu.active{display:block}.dropdown-search{position:absolute;top:calc(100% + .625rem);left:0;width:100%;background-color:var(--neutral-800);border:1px solid var(--neutral-700);border-radius:var(--border-radius-md);padding:.5rem;display:none;flex-direction:column;gap:.25rem;z-index:1000}.dropdown-search.visible{display:flex}.search-item{padding:.625rem .5rem;cursor:pointer;border-radius:var(--border-radius-sm);border:1px solid transparent}.search-item:hover{background-color:var(--neutral-700);border-color:var(--neutral-600)}.switch-units-button,.units-button,.day-button{background:transparent;border:none;padding:.625rem .5rem;text-align:start;border-radius:.5rem}.switch-units-button{width:100%}.switch-units-button:focus{box-shadow:var(--focus-box-shadow)}.switch-units-button:hover,.units-button:hover{background-color:var(--neutral-700)}.units-button.selected{background-color:var(--neutral-700);position:relative}.units-button.selected:after{content:"";position:absolute;right:.5rem;background: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");background-repeat:no-repeat;background-position:center;display:inline-block;width:17px;height:17px}.dropdown-section{border-bottom:1px solid var(--neutral-600);padding:.25rem 0;display:flex;flex-direction:column;gap:.25rem}.dropdown-section:last-child{border-bottom:none}.dropdown-section-title{color:var(--neutral-300);margin:.25rem 0}.day-button{width:100%}.dropdown-option.selected .day-button,.day-button:hover{background-color:var(--neutral-700)}h1{text-align:center;margin-bottom:clamp(3rem,1.2857rem + 3.5714vw,4rem)}.search-bar{display:flex;flex-direction:column;justify-content:center;gap:.75rem}.search-bar .input-container{flex-grow:1;position:relative;display:flex}.search-bar input{flex-grow:1;background-color:var(--neutral-800);padding-left:4rem;cursor:pointer}.search-bar input::placeholder{color:var(--neutral-200)}.search-bar input:hover{background-color:var(--neutral-700)}.search-bar input:focus,.search-bar input:active{background-color:(var(--neutral-700));box-shadow:var(--focus-box-shadow);outline:none;border:none}.search-bar .search-icon{position:absolute;left:2rem;top:50%;transform:translateY(-50%);pointer-events:none}.search-bar .favorites-icon{position:absolute;right:2rem;top:50%;transform:translateY(-50%);cursor:pointer}.search-button{background-color:var(--blue-500);border-radius:.75rem;padding:1rem 1.5rem}.search-button:hover{background-color:var(--blue-700)}.search-button:focus{box-shadow:0 0 0 3px var(--neutral-900),0 0 0 5px var(--blue-500)}.weather-info{background-image:url(/assets/mobile-hero-bg-BRQDu1IH.svg);background-size:cover;background-repeat:no-repeat;background-color:var(--neutral-800);color:var(--neutral-0);min-height:18rem;border-radius:var(--border-radius-lg);padding:1.5rem;text-align:center;display:grid;grid-template-columns:1fr 1fr;place-items:center;margin-bottom:clamp(1.25rem,-.0357rem + 2.6786vw,2rem)}.weather-info.loading{background-image:none;display:block;place-content:center}.loading-container{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.loading-container svg{overflow:visible}.loading-container .circle1,.loading-container .circle2,.loading-container .circle3{animation-duration:.75s;animation-iteration-count:infinite;animation-direction:alternate;animation-timing-function:ease-in-out}.loading-container .circle1,.loading-container .circle3{animation-name:bottom-to-top}.loading-container .circle2{animation-name:top-to-bottom}.text{grid-column:1 / -1}.date{color:var(--neutral-0-light)}.weather-icon{max-height:7.5rem;max-width:7.5rem}.weather-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:clamp(1rem,.7771rem + .9512vw,1.5rem)}.weather-details .card{display:flex;flex-direction:column;gap:1.5rem}.weather-info{position:relative}.save-location-button{font:inherit;font-size:1rem;background-color:transparent;color:inherit;border-radius:.75rem;padding:1rem 1.5rem;position:absolute;left:0;right:0;bottom:.25rem}.save-location-button:hover{color:var(--orange-500)}.forecast-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:1rem;text-align:center}.forecast-cards .card{flex-grow:1;padding:1rem .625rem}.hourly-forecast-card{position:relative;border:none;scrollbar-color:var(--neutral-700) var(--neutral-800);scrollbar-width:thin;padding-top:0;max-height:28rem;overflow:scroll;overflow-x:hidden}.hourly-header{position:sticky;top:0;padding-top:1.25rem;padding-bottom:1rem;background-color:inherit}.hourly-header .section-title{margin-bottom:0}.hourly-cards{display:flex;flex-direction:column;gap:1rem}.hour-card{padding:.5625rem 1rem .5625rem .75rem;background-color:var(--neutral-700);min-height:3.75rem}.hour-card .weather-icon{width:auto;height:2.5rem}.hour-card .weather-icon img{height:100%}.hour-card span.temp{margin-left:auto}.no-results p{text-align:center}.api-error .container{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5rem}.api-error .error-img{height:3.125rem;width:2.625rem}.api-error h1{margin-bottom:0}.api-error p{text-align:center;color:var(--neutral-200);max-width:50ch}.api-error .retry-img{height:1rem;width:1rem}body.light{--neutral-900: hsl(0, 0%, 98%);--neutral-800: hsl(235, 32%, 92%);--neutral-700: hsl(233, 11%, 84%);--neutral-600: hsl(233, 23%, 74%);--neutral-300: hsl(243, 23%, 24%);--neutral-200: hsl(243, 27%, 20%);--neutral-0: hsl(243, 96%, 9%)}body.light .logo path.text,body.light .dropdown-button svg path,body.light .search-icon path{fill:var(--neutral-0)}body.light .search-button,body.light .weather-info{color:var(--neutral-900)}.dark-mode-toggle{background-color:transparent;max-width:3rem;height:auto;margin-left:auto;margin-right:2rem}@media(min-width:48rem){.dropdown-button:hover+.dropdown-menu,.dropdown-menu:hover{display:block}.search-bar{flex-direction:row;gap:1rem}.search-bar .input-container{max-width:32.875rem}.forecast-cards{display:flex;justify-content:space-between}.weather-info{grid-template-columns:1fr auto auto;justify-items:start;text-align:start;background-image:url(/assets/desktop-hero-bg-D7g1xsLP.svg)}.text{grid-column:1}.save-location-button{right:auto}}@media(min-width:64rem){.main-container{grid-template-columns:2fr 1fr;grid-template-rows:auto auto 1fr;width:90%;max-width:1216px;margin:0 auto}main .container{width:100%;margin:0}.hero,.no-results,.api-error{grid-column:1 / -1}.current-weather,.daily-forecast{grid-column:1}.hourly-forecast{grid-column:2;grid-row:2 / span 2;height:100%}.hourly-forecast .container{height:100%}.daily-forecast .container{display:flex;flex-direction:column;height:100%}.daily-forecast .forecast-cards{flex-grow:1}.forecast-cards>.card{height:100%;flex-grow:1}.hourly-forecast-card{max-height:53.5rem;overflow:scroll;overflow-x:hidden}body.raining .weather-background{width:100vw;height:100vh;position:relative;overflow:hidden}body.raining .weather-background:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56"><line x1="0" y1="0" x2="5" y2="10" stroke="rgba(255,255,255,0.7)" stroke-width="1.5"/></svg>') repeat;animation:rain 1s linear infinite;opacity:.7;z-index:-1}}@keyframes top-to-bottom{0%{transform:translateY(0)}to{transform:translateY(50%)}}@keyframes bottom-to-top{0%{transform:translateY(0)}to{transform:translateY(-25%)}}@keyframes rain{0%{background-position:0 0}to{background-position:500px 500px}}