@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&family=Poppins:ital,wght@0,400;0,500;1,400&family=Roboto+Slab:wght@400;500;600&display=swap";.container{width:100%;max-width:600px;background:#ffffff4d;padding:2rem;border-radius:.6rem;box-shadow:0 6px 10px #0009;text-align:center}.form{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.inputBox{width:70%;height:55px;padding:0 1rem;border-radius:2rem;border:none;outline:none;font-size:1.2rem;font-weight:500;font-style:oblique;margin-right:1rem;background:#ffe7b8a4;color:#1a2f3bfd}.inputBox:focus{outline:3px solid #25edb169;border:none}.btn{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:none;cursor:pointer;background:#ffe7b8a4;color:#1a2f3bfd;transition:background-color .3s,transform .3s}.btn:active,.btn:focus{outline:5px solid #25edb169}.btn:active{transform:scale(.95)}.btn .search{font-size:1.2rem}.error{padding:1rem 0;position:relative;display:block}.error span{position:absolute;left:1rem;color:#fff}.error span i{color:red;font-size:24px}.weather{display:block}.weather .temperature{text-align:center;font-size:4rem;font-weight:600;color:#0ff}.weather .cityName{text-transform:capitalize;font-size:2rem;font-weight:400;color:#fff}.weather .details{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0 20px;margin-top:50px}.weather .details .col{display:flex;align-items:center;text-align:left;color:bisque;width:50%;margin-bottom:1rem}.weather .details .col img{width:60px;margin-right:20px}.weather .details .col .humidity,.wind{font-size:28px;margin-top:-6px}@media (max-width: 768px){.container{width:100%;padding:1rem}.inputBox{width:100%}.btn{width:50px;height:50px}}@media (max-width: 560px){.inputBox{width:80%}.weather .details .col{width:100%}.weather .details .col img{width:30px}.weather .details .col .humidity,.wind{font-size:20px}}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif;font-style:oblique}body{background:#1e292d;min-height:100vh;display:flex;justify-content:center;align-items:center}