main{height:100vh}body{font-family:Arial,sans-serif;background-color:#1e1e2e;text-align:center;height:100vh}.app{max-width:400px;margin:20px auto;padding:20px;background:#2a2a3a;box-shadow:0 0 10px #0000001a;border-radius:8px}.search input{padding:12px;width:40%;border:1px solid #ccc;border-radius:20px}.search button{padding:10px;margin-left:5px;cursor:pointer;border:none;border-radius:50%;transition:.3s ease background}.search button:hover{background-color:#3ddc97;color:#fff}.weather-info{margin-top:20px;color:#fff}.weather-info>p{font-size:42px;margin:20px}.weather-info h2{font-size:42px}.weather-info img{width:100px;height:100px}.toggle-btn{margin-top:10px;padding:10px 14px;background:#ffbf00;color:#fff;border:none;cursor:pointer;border-radius:5px;font-size:14px;transition:.3s ease background}.toggle-btn:hover{background:#3ddc97}.error{color:red;margin-top:10px}.loading-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;display:flex;justify-content:center;align-items:center;flex-direction:column;color:#fff;font-size:20px;z-index:1000}.loading-modal p{margin-top:10px;font-size:18px}.loading-modal svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}footer{color:#fff;background-color:#2a2a3a;text-align:center;padding:10px}