@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap");*{box-sizing:border-box;margin:0;padding:0}*,body{font-family:Merriweather Sans}body{align-items:center;background-color:#f5f5f5;display:flex;height:100vh;justify-content:center}.main_card{align-items:stretch;background-color:#e0e7f5;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,.1);display:flex;flex-direction:column;height:400px;justify-content:flex-start;overflow:hidden;padding:20px;position:relative;text-align:center;width:250px}.wav{background:#d3e0f2;border-radius:50%;bottom:0;height:150px;opacity:.7;position:absolute;width:120%}.wav.-one{animation:wave 4s ease-in-out infinite;bottom:40px}.wav.-two{animation:wave 3s ease-in-out infinite;bottom:20px}.wav.-three{animation:wave 2s ease-in-out infinite;bottom:0}@keyframes wave{0%{transform:translateX(-30%) translateY(50%)}50%{transform:translateX(30%) translateY(50%)}to{transform:translateX(-30%) translateY(50%)}}.icon{color:#f1c40f;font-size:60px}.icon,.info{margin-top:30px}.location{color:#2c3e50;font-size:18px;font-weight:700}.data_time{color:#7f8c8d;font-size:12px;margin:5px 0}.temp{color:#34495e;font-size:48px;font-weight:700}.min_max_temp{color:#7f8c8d;font-size:14px}.fa-solid{animation:wave 4s cubic-bezier(.5,.38,.34,.35) infinite;bottom:10px;position:relative}.fa-sun{color:#f1c40f}.fa-regular{animation:zoomInOut 3s ease-in-out infinite;font-size:60px}@keyframes zoomInOut{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.search input{background-color:#e0e7f5;border:none;border-radius:50px;box-shadow:0 4px 6px rgba(0,0,0,.1);color:#2c3e50;font-size:16px;outline:none;padding:10px 20px;width:300px}.search input::placeholder{color:#7f8c8d}.all{align-items:center;display:flex;flex-direction:column;gap:6vh}.heading{color:#2c3e50;font-size:5em;font-weight:700;overflow:hidden;position:relative}.rain{animation:fall .5s linear infinite;background:hsla(0,0%,100%,.8);height:100px;left:50%;position:absolute;top:0;width:2px}@keyframes fall{0%{opacity:0;transform:translateY(-100%)}50%{opacity:1}to{opacity:0;transform:translateY(100%)}}@keyframes rain{0%{top:-100%}to{top:100%}}