*{margin:0;padding:0;box-sizing:border-box;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}:root{--weather-card: 121c25;--sky-light: 213 60% 15%;--sky-medium: 213 70% 20%;--card: 213 45% 12%;--muted-foreground: 215 20% 65%;--primary: 212 100% 60%;--white: 0 0% 100%}.app{min-height:100vh;width:100%;background:linear-gradient(135deg,hsl(var(--sky-light)),hsl(var(--sky-medium)));padding:24px}.searchBar{outline:none;height:40px;flex:1;background-color:hsl(var(--card));border-radius:10px;padding:8px 40px;font-size:.9rem;color:hsl(var(--muted-foreground));border:none}.searchContainer{display:flex;align-items:center;justify-content:center;height:40px;width:100%;max-width:860px;margin:0 auto}.weatherCard{overflow:hidden;border-radius:10px;position:relative;display:flex;flex-direction:column;height:240px;padding:32px;width:100%;max-width:860px;background-color:hsl(var(--card));margin:32px auto;box-shadow:#0000001a 0 3px 8px}.weatherCard .location{color:hsl(var(--muted-foreground));display:flex;align-items:center;gap:8px;margin-bottom:16px}.location svg{width:18px;height:18px;fill:hsl(var(--muted-foreground))}.weather{display:flex;flex:1;justify-content:space-between}.weather .temperature{display:flex;flex-direction:column;gap:4px;flex:1}.weather .temperature h1{font-size:4rem;font-weight:300;color:hsl(var(--white));margin:0}.weather .temperature .description{font-size:1.1rem;font-weight:300;color:hsl(var(--muted-foreground));padding:5px 0;text-transform:capitalize}.weather .temperature .feels-like{font-size:1rem;color:hsl(var(--muted-foreground))}.weather .icon{display:flex;align-items:center;justify-content:center}.weather .icon svg{width:130px;height:130px;fill:hsl(var(--primary))}.weather-details{display:grid;grid-template-columns:repeat(4,1fr);width:100%;margin:0 auto 32px;max-width:860px;gap:12px;gap:20px}@media (max-width: 970px){.weather-details{grid-template-columns:repeat(2,1fr)}}@media (max-width: 400px){.weather-details{grid-template-columns:1fr}}.weather-detail-box{display:flex;align-items:center;height:80px;background:hsl(var(--card));border-radius:8px;box-shadow:#0000001a 0 3px 8px;padding:0 20px}.icon-weather-details{margin-right:12px;width:40px;height:40px;display:flex;justify-content:center;align-items:center;background-color:hsl(var(--primary) / .1);font-size:1rem;border-radius:5px;cursor:pointer}.icon-weather-details svg{width:24px;height:24px;color:hsl(var(--primary))}.Details{display:flex;flex-direction:column;justify-content:center;gap:4px}.label{font-size:.9rem;font-weight:400;color:hsl(var(--muted-foreground))}.value{font-size:1.2rem;font-weight:500;color:hsl(var(--white))}.forecast-list{width:100%;max-width:860px;overflow-x:auto;overflow-y:hidden;height:330px;border-radius:10px;padding:32px;margin:0 auto 32px;display:flex;flex-direction:column;justify-content:center;background-color:hsl(var(--card));box-shadow:#0000001a 0 3px 8px}.forecast-list h2{font-size:1.5rem;font-weight:600;color:hsl(var(--white));margin-bottom:16px}.forecast-box{display:flex;justify-content:flex-start;align-items:center;gap:20px;margin-top:10px}.forecast-card{margin:0 auto;overflow:hidden;position:relative;width:140px;height:188px;border-radius:10px;display:flex;flex-direction:column;justify-content:space-around;padding:10px;flex-shrink:0;background:hsl(var(--sky-light))}.forecast-card h3{text-align:center;font-size:.975rem;color:hsl(var(--white))}.forecast-card .icon{width:100%;display:flex;justify-content:center;align-items:center}.forecast-card .icon svg{width:80px;height:80px;color:hsl(var(--primary))}.forecast-card .description{text-align:center;font-size:.95rem;color:hsl(var(--muted-foreground))}.forecast-card .temperature{text-align:center;font-size:.975rem;color:hsl(var(--white))}.forecast-list::-webkit-scrollbar{height:4px}.forecast-list::-webkit-scrollbar-track{background:hsl(var(--sky-light));border-radius:4px}.forecast-list::-webkit-scrollbar-thumb{background-color:hsl(var(--primary));border-radius:4px}