*{margin:0;padding:0;box-sizing:border-box}body{display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Arial,sans-serif;background:url(/react-weather-app/weather.jpg) no-repeat center center/cover;position:relative;padding:20px;overflow:hidden;text-align:center}body:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;filter:blur(8px);z-index:-1}.weather-container{display:flex;flex-direction:column;align-items:center;padding:40px;width:400px;border-radius:15px;text-align:left;background:#ffffff26;box-shadow:0 0 20px #00000080;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.title{text-align:center;font-size:28px;font-weight:700}#weather-form{display:flex;flex-direction:column;row-gap:10px;width:100%;margin-top:10px}#city{width:100%;padding:12px;border-radius:8px;outline:none;border-bottom:2px solid rgba(255,255,255,.4);border:transparent;font-weight:700;color:#fff;background:#ffffff1a}#city::placeholder{color:#fff9}#city:focus{border:2px solid #007bff;transform:scale(1.02)}button{padding:12px;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:700;transition:transform .3s ease,background .3s ease;color:#fff;background:linear-gradient(45deg,#007bff,#00c6ff)}button:hover{transform:scale(1.1);background:linear-gradient(45deg,#0056b3,#0096ff)}.weather-details{margin-top:20px}.weather-location{text-align:center;font-size:18px;font-weight:700;margin-bottom:10px}.weather-stats,.weather-conditions{text-align:left;padding-left:15px;font-size:14px}.conditions-heading{text-align:center;margin-top:15px;font-size:18px;font-weight:700}@media screen and (max-width: 768px){.weather-container{width:90%;padding:30px;margin:auto}#city,button{font-size:14px}}