@import"https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Montserrat:wght@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(#1f2430,#2d3344)}#root{width:100%}.container{position:relative;overflow:hidden;margin:0 auto;z-index:1;max-width:410px;border-radius:10px;background:#1a1f2d;box-shadow:0 10px 20px #0000001a}.container:after{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:url(../clouds.png)}.search-section{display:flex;align-items:center;gap:10px;padding:25px}.search-section .search-form{height:54px;width:100%;position:relative}.search-section .search-form span{color:#fff;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.search-section .search-input{width:100%;height:100%;outline:none;color:#fff;font-size:1rem;text-transform:uppercase;border-radius:6px;padding:0 20px 0 50px;background:#1a1f2d;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;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;cursor:pointer;border-radius:6px;background:#1a1f2d;border:1px solid rgba(255,255,255,.25);transition:.2s ease}.search-section .location-button span{font-size:1.3rem}.search-section .location-button:hover{color:#b39fdf;border-color:#a38cd9}.search-section .location-button:active{color:#855bdf;border-color:#a38cd9}.search-section .search-input:focus,.search-section .location-button:hover{border-color:#4dabf7;box-shadow:0 0 6px #4dabf780}.search-section .location-button:hover{transform:scale(1.05)}.search-section .search-input,.search-section .location-button{transition:all .25s ease-in-out}.weather-section :where(h2,p){color:#fff}.weather-section .current-weather{display:flex;flex-direction:column;align-items:center;padding:20px 0 50px}.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}.hourly-forecast{padding:16px 25px;border-top:1px solid rgba(255,255,255,.25)}.hourly-forecast .weather-list{display:flex;gap:32px;overflow-x:auto;overflow-y:hidden;list-style:none;padding-bottom:16px;margin-bottom:-16px;scrollbar-width:thin;scrollbar-color:transparent transparent;scroll-behavior:smooth}.hourly-forecast:hover .weather-list{scrollbar-color:#265073 transparent}.hourly-forecast .weather-list::-webkit-scrollbar{height:8px}.hourly-forecast .weather-list::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}.hourly-forecast:hover .weather-list::-webkit-scrollbar-thumb{background:#4dabf7}.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{color:#fff;display:flex;text-align:center;min-height:460px;padding:60px 40px 40px;flex-direction:column;align-items:center}.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}}