@import "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap";.search-container{-webkit-backdrop-filter:blur(10px);border-radius:var(--border-radius);box-shadow:var(--box-shadow);background:linear-gradient(135deg,#ffffff1a,#fff0);border:1px solid #ffffff2e;width:100%;max-width:500px;margin-bottom:2rem;padding:2rem}.search-form{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.city-input .MuiOutlinedInput-root{background-color:#fff3;border-radius:10px;transition:all .3s}.city-input .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline{border-color:#ffffff80}.city-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:var(--text-color)}.city-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:var(--primary-color);box-shadow:0 0 10px var(--primary-color)}.city-input .MuiInputLabel-root{color:#ffffffb3}.city-input .MuiInputLabel-root.Mui-focused{color:var(--primary-color)}.city-input .MuiInputBase-input{color:var(--text-color)}.search-button{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:var(--text-color);border-radius:10px;padding:12px 30px;font-weight:700;box-shadow:0 4px 15px #0003;transition:all .3s!important}.search-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #0000004d}.weather-card{background:var(--card-bg-color);-webkit-backdrop-filter:blur(10px);border-radius:var(--border-radius);width:100%;max-width:800px;box-shadow:var(--box-shadow);color:var(--text-color);border:1px solid #ffffff2e;overflow:hidden}.weather-image{object-fit:cover;width:100%;height:200px}.city-name{text-shadow:1px 1px 3px #0003;margin:1rem 0;font-size:2.5rem;font-weight:700}.weather-info-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding:1.5rem;display:grid}.info-box{text-align:center;background:#0003;border-radius:10px;padding:1rem;transition:all .3s}.info-box:hover{background:#0006;transform:scale(1.05)}.info-box h3{text-transform:capitalize;color:#0f0f0fbd;margin:0 0 .5rem;font-size:1rem;font-weight:300}.info-box p{margin:0;font-size:1.5rem;font-weight:700}:root{--primary-color:#8a2be2;--secondary-color:#4a90e2;--text-color:#fff;--card-bg-color:#ffffff1a;--box-shadow:0 8px 32px 0 #1f26875e;--border-radius:15px}body,html{width:100%;height:100%;margin:0;padding:0;font-family:Roboto,sans-serif}.weather-app{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;padding:2rem;transition:background .5s ease-in-out;display:flex}.app-title{color:var(--text-color);text-shadow:2px 2px 4px #0000004d;margin-bottom:.5rem;font-size:3rem;font-weight:700}.app-subtitle{color:var(--text-color);text-shadow:1px 1px 2px #0003;margin-bottom:2rem;font-size:1.2rem;font-weight:300}.bg-clear{background:linear-gradient(135deg,#2980b9,#6dd5fa,#fff)}.bg-clouds{background:linear-gradient(135deg,#bdc3c7,#2c3e50)}.bg-rain{background:linear-gradient(135deg,#2c3e50,#3498db)}.bg-thunderstorm{background:linear-gradient(135deg,#232526,#414345)}.bg-snow{background:linear-gradient(135deg,#e6dada,#bdc3c7)}.bg-mist,.bg-fog,.bg-haze{background:linear-gradient(135deg,#757f9a,#d7dde8)}.bg-default{background:linear-gradient(135deg,#667eea,#764ba2)}