@import"https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Montserrat,serif}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(#c2f0fc,#a0d7e7)}#root{width:100%}.container{max-width:410px;background:linear-gradient(#184a73,#0f3057);margin:0 auto;border-radius:10px;box-shadow:0 10px 20px #0000001a;position:relative;overflow:hidden;z-index:1}.container:after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:url(bg.png);z-index:-1}.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;top:50%;transform:translateY(-50%);position:absolute;left:16px}.search-section .search-input{width:100%;height:100%;border:1px solid rgba(255,255,255,.25);background:#ffffff0d;outline:none;padding:0 20px 0 50px;border-radius:6px;color:#fff;font-size:1rem;text-transform:uppercase;transition:.1s ease}.search-section .search-input:focus{border-color:#76c7c0}.search-section .search-input::placeholder{color:#b8e0e3;text-transform:none}.search-section .location-button{height:54px;width:56px;border:1px solid rgba(255,255,255,.1);background:#ffffff4d;color:#e3fdfd;cursor:pointer;border-radius:6px;flex-shrink:0;transition:.2s ease;display:flex;align-items:center;justify-content:center}.search-section .location-button span{font-size:1.3rem}.search-section .location-button:hover{color:#76c7c0;border-color:#5da7a2}.weather-section :where(h2,p){color:#e3fdfd}.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;font-size:3.38rem;display:flex}.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,.2)}.hourly-forecast .weather-list{display:flex;gap:32px;overflow-x:auto;list-style:none;scrollbar-width:thin;padding-bottom:16px;margin-bottom:-16px;scrollbar-color:transparent transparent}.hourly-forecast:hover .weather-list{scrollbar-color:#76C7C0 transparent}.hourly-forecast .weather-item{display:flex;flex-direction:column;align-items:center;gap:7px}.hourly-forecast .weather-item .weather-icon{width:28px;aspect-ratio:1}.no-results{min-height:460px;display:flex;color:#e3fdfd;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}