body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#000000e9}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:20px}.title{font-size:3rem;color:#aac705c6;font-weight:bolder;font-family:Franklin Gothic Medium,Arial Narrow,Arial,sans-serif}.input-wrapper{display:flex;align-items:center;margin-bottom:20px}input{padding:10px;font-size:1.1rem;border:1px solid #ccc;border-radius:5px;width:300px;margin-right:10px}button{padding:10px 4px;background-color:#4c87afb9;border:none;border-radius:5px;cursor:pointer;color:#fff}.loading{font-size:1.5rem;color:#4caf4fc8}.error{color:red;font-size:1.5rem}.weather-info{background:linear-gradient(to bottom right,#4b1e85,#4b1e8503);border:2px solid rgba(75,30,133,.5);padding:7px 60px;cursor:pointer;display:flex;flex-direction:column;color:#fff;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;justify-content:space-between;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border-radius:10px;text-align:center}.location h2{font-size:2rem;margin:10px 0}.input-wrapper{display:flex;flex-direction:column;align-items:center;position:relative}.input{padding:10px;font-size:16px;width:300px;margin-bottom:10px;border-radius:5px}button{padding:7px 10px;font-size:16px;cursor:pointer;margin-bottom:5px;background-color:#007bff;color:#fff;border:none;border-radius:4px}.suggestions{position:absolute;top:50px;max-height:150px;overflow-y:auto;width:300px;z-index:1;border:1px solid #ccc;border-radius:5px;background-color:#fff;list-style-type:none;padding:0;margin:0}.suggestions li{padding:8px;cursor:pointer}.suggestions li:hover{background-color:#f1f1f1}.loading,.error,.weather-info{text-align:center;margin-top:20px}.weather-details{margin:20px 0}.weather-details img{width:100px;height:100px}.temperature h1{font-size:4rem;margin:10px 0}.temperature h3{font-size:1.5rem;margin:5px 0}.wind h3{font-size:1.5rem;margin:5px 0;display:flex;align-items:center}@media (max-width: 600px){.input-wrapper{flex-direction:column;align-items:center}.input{max-width:90%;margin-bottom:10px}.search-button,.suggestions{max-width:90%}.weather-info{padding:10px}.location h2{font-size:1.2rem}.weather-details img{width:80px;height:80px}.temperature h1{font-size:2rem}.wind h3{font-size:1rem}}@media (max-width: 768px){.input-wrapper{flex-direction:row;justify-content:center}.input{max-width:60%}.search-button{margin-left:10px}.suggestions{max-width:60%}.weather-info{padding:7px 60px}.location h2{font-size:1.5rem}.weather-details img{width:100px;height:100px}}.input{width:100%;height:40px;line-height:28px;padding:0 1rem 0 2.5rem;border:2px solid transparent;border-radius:8px;outline:none;background-color:#ffffff39;color:beige;transition:.3s ease}.input::placeholder{color:#9e9ea7}.input:focus,input:hover{outline:none;border-color:#f77f0066;background-color:#ffffff09;box-shadow:0 0 0 4px #f77f001a}