body{font-family:Segoe UI,Arial,sans-serif;background:linear-gradient(to right,#eef2f3,#d9e4f5);margin:0;color:#333}.container{max-width:900px;margin:auto;padding:20px}header{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 4px 10px #0000000d}header h1{font-size:1.5rem;color:#2c3e50}nav button{margin-left:10px;padding:8px 14px;background:#3498db;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background .3s,transform .2s}nav button:hover{background:#2980b9;transform:translateY(-2px)}.search-box{margin-top:20px}.search-box input{padding:8px;margin-right:5px;border:1px solid #ccc;border-radius:5px;outline:none;transition:box-shadow .3s}.search-box input:focus{box-shadow:0 0 6px #3498db80}.search-box button{padding:8px 14px;background:#27ae60;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background .3s,transform .2s}.search-box button:hover{background:#1e8449;transform:translateY(-2px)}.weather-card,.login-box{background:#fff;padding:15px;margin-top:20px;border-radius:8px;box-shadow:0 4px 15px #0000000d;transition:transform .3s}.weather-card:hover,.login-box:hover{transform:translateY(-5px)}.map{width:100%;height:300px;margin-top:15px;border-radius:8px;overflow:hidden;border:1px solid #ddd}.forecast{margin-top:20px}.forecast ul{list-style:none;padding:0}.forecast li{padding:10px;background:#fff;margin-bottom:8px;border-radius:5px;box-shadow:0 2px 8px #0000000d;transition:transform .2s}.forecast li:hover{transform:scale(1.02)}.login-box{width:350px;padding:40px;background:#fff;border-radius:12px;box-shadow:0 8px 20px #0003;margin:100px auto;text-align:center;font-family:Arial,sans-serif}.login-box h2{margin-bottom:30px;color:#333;font-size:28px}.login-box input{width:100%;padding:12px 15px;margin:12px 0;border:1px solid #ccc;border-radius:8px;outline:none;font-size:16px;transition:.3s}.login-box input:focus{border-color:#007bff;box-shadow:0 0 5px #007bff80}.login-box button{width:100%;padding:12px 0;margin-top:20px;border:none;border-radius:8px;background:#007bff;color:#fff;font-size:18px;cursor:pointer;transition:.3s}.login-box button:hover{background:#0056b3}.login-box input::placeholder{color:#aaa}