@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Montserrat,sans-serif}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(#f5eeff,#dac3f8)}#root{width:100%}.container{position:relative;margin:0 auto;z-index:1;overflow:hidden;max-width:410px;border-radius:10px;background:linear-gradient(#352163,#33143c);box-shadow:0 10px 20px #0000001a}.container:after{content:"";position:absolute;left:0;top:0;opacity:.95;z-index:-1;height:100%;width:100%;background:url(clouds.png)}.search-section{display:flex;gap:10px;padding:25px;align-items:center}.search-section .search-form{width:100%;height:54px;position:relative}.search-section .search-form span{position:absolute;color:#fff;top:50%;left:16px;pointer-events:none;transform:translateY(-50%)}.search-section .search-input{height:100%;width:100%;outline:none;color:#fff;font-size:1rem;border-radius:6px;text-transform:uppercase;padding:0 20px 0 50px;background:#ffffff0d;border:1px solid rgba(255,255,255,.25);transition:.1s ease}.search-section .search-input:focus{border-color:#a38cd9}.search-section .search-input::placeholder{color:#ddd;text-transform:none}.search-section .location-button{height:54px;width:56px;color:#fff;flex-shrink:0;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);transition:.2s ease}.search-section .location-button:hover{color:#b39fdf;border-color:#a38cd9}.search-section .location-button span{font-size:1.3rem}.weather-section :where(h2,p){color:#fff}.current-weather{display:flex;align-items:center;padding:20px 0 50px;flex-direction:column}.current-weather .weather-icon{width:140px;aspect-ratio:1}.current-weather .temperature{margin:18px 0;display:flex;font-size:3.38rem}.current-weather .temperature span{font-size:1.56rem;font-weight:400;margin:5px 0 0 2px}.current-weather .description{font-size:1.25rem;text-align:center;padding:0 10px}.hourly-forecast{padding:16px 25px;border-top:1px solid rgba(255,255,255,.25)}.hourly-forecast .weather-list{display:flex;gap:40px;list-style:none;overflow-x:auto;padding-bottom:16px;margin-bottom:-16px;scrollbar-width:thin;scrollbar-color:transparent transparent}.hourly-forecast:hover .weather-list{scrollbar-color:#c5bcdb transparent}.hourly-forecast .weather-item{display:flex;gap:7px;flex-direction:column;align-items:center}.hourly-forecast .weather-item .weather-icon{width:28px;aspect-ratio:1}.no-results{min-height:460px;display:flex;color:#fff;padding:60px 40px 40px;text-align:center;align-items:center;flex-direction:column}.no-results .title{margin:25px 0 15px}.no-results .message{line-height:23px}@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}}