@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap";*{color:#fff;margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.weather.Item .time,.weather.Item .temperature{color:#fff!important}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(#f5eeff,#dac3f8)}.hourlyForecast .weatherItem .weatherIcon{width:28px;aspect-ratio:1}.p{color:#fff}.container:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:url(/assets/clouds-Chdq7Nmn.png);z-index:-1;opacity:.7}.hourlyForecast .weatherList{display:flex;list-style:none;gap:32px;overflow-x:auto;scrollbar-width:thin;padding-bottom:16px;margin-bottom:-16px;scrollbar-color:transparent transparent}.hourlyForecast:hover .weatherList{scrollbar-color:#c5bcdb transparent}.hourlyForecast{padding:16px 25px;border-top:1px solid rgba(255,255,255,.25)}.container{max-width:410px;overflow:hidden;margin:0 auto;z-index:1;position:relative;isolation:isolate;border-radius:10px;background:linear-gradient(#352163,#33143c);box-shadow:0 10px 20px #0000001a}#root{width:100%}.searchSection{display:flex;align-items:center;gap:10px;padding:25px}.weatherSection :where(h2,p){color:#fff}.searchSection .searchInput{width:100%;height:100%;border:1px solid rgba(255,255,255,.25);background:#ffffff40;outline:none;color:#fff;text-transform:uppercase;border-radius:6px;padding:0 20px 0 50px;font-size:1rem;transition:o.1s ease}.searchSection .locationButton{height:54px;width:56px;flex-shrink:0;cursor:pointer;border-radius:6px;background:#ffffff40;border:1px solid rgba(255,255,255,.25);transition:.2s ease;justify-content:center}.searchSection .locationButton span{font-size:1.3rem}.searchSection .locationButton :hover{color:#b39fdf;border-color:#a38cd9}.searchSection .searchInput:focus{border-color:#a38cd9}.searchSection .searchInput ::placeholder{color:#fff;text-transform:none}.weatherList{display:flex;align-items:center;flex-direction:row}.weather.Item{display:flex}.searchSection .searchForm span{color:#fff;position:absolute;top:50%;transform:translateY(-50);left:16px}.searchSection .searchForm{height:54px;width:100%;position:relative}.weatherSection .currentWeather{display:flex;flex-direction:column;align-items:center;padding:20px 0 50px}.currentWeather .weatherIcon{width:140px;aspect-ratio:1}.currentWeather .temperature{margin:18px 0;font-size:3.38rem;display:flex}.currentWeather .temperature span{font-size:1.56rem;font-weight:400px;margin:5px 0 0 2px}.currentWeather .description{font-size:1.25rem}.hourlyForecast .weatherItem{display:flex;gap:7px;flex-direction:column;align-items:center}.searchForm .material-symbols-rounded{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#555}.no-results{display:flex;min-height:460px;padding:60px 40px;align-items:center;flex-direction:column}.no-results .title{margin:25px 0 15px}@media (max-width: 624px){body,.search-section{padding:20px}.hourly-forecast{padding:16px 20px}.hourly-forecast .weather-list{gap:24px}.no-results{padding:30px;min-height:458px}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}