@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,sans-serif}body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#c2f0fc,#a0d7e7)}#root{width:100%}.container{max-width:600px;height:650px;background:#184a73;background:linear-gradient(135deg,#184a73,#0f3057);margin:0 auto;border-radius:15px;box-shadow:0 20px 40px #0003;overflow:hidden}.search-section{display:flex;align-items:center;gap:10px;padding:20px 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:#ffffff1a;outline:none;padding:0 20px 0 50px;border-radius:6px;color:#fff;font-size:1rem;text-transform:uppercase}.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:54px;border:1px solid rgba(255,255,255,.1);background:#ffffff4d;color:#e3fdfd;cursor:pointer;border-radius:6px;flex-shrink:0;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;align-items:center;padding:4px 0 40px;flex-direction:column}.current-weather .weather-icon{width:120px;aspect-ratio:1}.current-weather .temperature{margin:18px 0;font-size:3.38rem}.current-weather .city{margin:18px 0;font-size:3.38rem;color:#fff}.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:20px;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:5px}.hourly-forecast .weather-item .weather-icon{width:28px;aspect-ratio:1}.hourly-forecast{padding:20px;border-radius:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.weather-list{display:flex;gap:20px;overflow-x:auto;scrollbar-width:thin;scroll-behavior:smooth;list-style:none;padding:0}.weather-item{border-radius:8px;padding:10px;text-align:center;box-shadow:0 2px 4px #0000001a}.weather-icon{max-width:100%;height:auto}.current-weather .weather-icon{width:120px;aspect-ratio:1;background-color:transparent}.loader{display:flex;justify-content:center;align-items:center;height:32rem}.loader .loader-icon{width:8rem;height:auto}.error-message{color:#ff6b6b;text-align:center;min-height:32rem;padding-top:10rem}