@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";body{display:flex;height:100vh;width:100vw;justify-content:center;align-items:center;background-color:#fff2c6;padding:0;margin:0}body.dark{background-color:#0f172a;transition:all 1s ease-in-out}.app-container{width:350px;aspect-ratio:3/4;background:linear-gradient(45deg,#ffb742,#ffb640 0%,#fff6a1);box-shadow:0 0 10px #494936;transform:scale(1.3);border-radius:20px;font-family:Poppins;display:flex;align-items:center;flex-direction:column;transition:all 1s ease-in-out}.app-container.dark{background:linear-gradient(160deg,#0f172a,#1e3a8a,#0ea5e9);transition:all 1s ease-in-out;box-shadow:0 0 20px #0ea5e966;color:#cad5f3}.searchBar{display:flex;justify-content:center;margin-top:9%}.search-img{width:12px;text-align:center}.search-img.dark{transition:all 1s ease-in-out;filter:invert()}.search{padding:5px 10px;border-radius:10px 4px 4px 10px;border:2px solid rgba(137,141,85,.527);box-shadow:1px -1px 5px #000000e8;background-color:#ffffffb4;color:#000}.search.dark{box-shadow:1px -1px 5px #0ea5e94d;background-color:#0f172ab3;transition:all 1s ease-in-out;color:#e2e8f0}.search:focus{outline:none;border:2px solid rgba(0,0,0,.644)}.search.dark:focus{transition:all 1s ease-in-out;outline:none;border:2px solid #38bdf8}.search.dark::placeholder{transition:all 1s ease-in-out;color:#94a3b8}.search-button{width:50px;border-radius:4px 10px 10px 4px;cursor:pointer;border:2px solid rgba(128,85,141,.527);transition:all 1s ease-in-out;box-shadow:1px -1px 5px #0a000c;background-color:#ffffffb4}.search-button.dark{transition:all 1s ease-in-out;border:2px solid rgba(148,163,184,.4);box-shadow:1px -1px 5px #0ea5e966;background-color:#0f172acc;color:#e2e8f0}.weather-icon{width:60%;margin-top:10%;opacity:0;transition:all 1s ease-in-out;filter:drop-shadow(2px 2px 5px rgba(159,161,42,.788));animation:fadein 1s ease-out forwards}.weather-icon.dark{transition:all 1s ease-in-out;filter:drop-shadow(2px 2px 5px rgba(56,189,248,.7))}.weather-deatails{width:90%;filter:drop-shadow(0px 0px 10px rgba(0,0,0,.747))}.temp{display:flex;justify-content:center;margin:2% 0 0;opacity:0;animation:fadein 1s ease-out 1s forwards}.climate{display:flex;align-items:center;margin:2% 0 0 2%;opacity:0;animation:fadein 1s ease-out 1.5s forwards}.loc{display:flex;justify-content:center;align-items:center;opacity:0;margin:0;animation:fadein 1s ease-out 2s forwards}.time{font-size:1rem;margin:0 0 0 10px}.humidity-windspeed{display:flex;justify-content:space-between;opacity:0;margin:2% 0 0;animation:fadein 1s ease-out 2.5s forwards}.humidity,.windspeed{margin:0;display:flex;align-items:center}.temp-climate{display:flex;justify-content:center}.windImg{width:40px;margin-left:10px}.humidityImg{width:40px;margin-right:10px}@keyframes fadein{0%{opacity:0;transform:translateY(5%)}to{opacity:1;transform:translateY(0)}}