@import "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Open Sans,sans-serif}.app{background-color:#c6d5d7;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex}.weather{background-image:linear-gradient(45deg,#40ecf8,#0c2a68);border-radius:40px;flex-direction:column;place-self:center;align-items:center;padding:40px;display:flex;box-shadow:0 4px 8px #0000001a}.search-bar{align-items:center;gap:12px;display:flex}.search-bar input{color:#333;background-color:#d9d9d9;border:none;border-radius:20px;outline:none;height:50px;padding-left:25px}.search-bar button{cursor:pointer;background-color:#d9d9d9;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:50px;height:50px;display:flex}.search-bar button:hover,.search-bar button:active{background-color:#012465}.search-bar button img{width:20px;height:20px}.weather-info{text-align:center;margin-top:30px}.condition{color:#fff;font-size:24px;line-height:1}.temperature{color:#fff;margin-top:5px;font-size:48px}.location{color:#fff;margin-top:5px;font-size:18px}.weather-icons{justify-content:center;align-items:center;width:200px;height:200px;margin:20px auto;display:flex}.weather-icons img{object-fit:contain;width:100%;height:100%}.weather-data{color:#fff;justify-content:space-between;width:100%;margin-top:30px;display:flex}.weather-data .col{align-items:flex-start;gap:12px;font-size:16px;display:flex}.weather-data .col img{width:40px;margin-top:10px}.weather-data .col span{color:#fff;padding-top:19px;font-size:14px;display:block}