@import"https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps:wght@400;700&family=Rajdhani:wght@300;400;500;600&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Rajdhani",sans-serif;display:flex;justify-content:center;align-items:center;height:100vh;margin:0;background:#333;background-image:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)),url("https://source.unsplash.com/random/?nature");background-position:center;background-size:cover}.container{background:rgba(0,0,0,.6901960784);color:#fff;padding:2em;border-radius:25px;width:100%;max-width:430px;min-height:420px;margin:10px;border-style:double;border-color:rgba(0,0,0,.6901960784)}.container .search{width:80%;margin:10px 0 75px 0;position:relative}.container .search input{width:100%;min-height:50px;padding:10px 0 10px 10px;position:absolute;left:0;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0);border-radius:15px;color:#f5f5f5;font-size:clamp(20%,10% + 15px,105%);font-weight:500;text-transform:capitalize}.container .search input:focus{outline:3px solid #545456}.container .search button{position:absolute;right:0;top:50%;transform:translateY(-50%);height:2.8rem;width:2.8rem;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;border:none;outline:none;background:rgba(0,0,0,0);cursor:pointer}.container .weather{text-align:center;display:flex;flex-direction:column;gap:1rem;font-size:105%;text-transform:capitalize}.container .weather.loading{visibility:hidden;max-height:20px;text-align:left}.container .weather.loading::after{visibility:visible;content:"Loading...";color:#fff}.container .weather .latAndlong{font-size:13px}.container .weather .temp-icon-container{display:flex;align-items:center;justify-content:center;gap:.5rem}.container .weather .temp-icon-container .temp{order:-1}.container .weather .temp-icon-container .icon{min-height:50px;max-width:50px;order:1;margin-bottom:3px}