@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";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.app{min-height:100vh;display:grid;background:#e2d4ff}.weather{display:flex;flex-direction:column;align-items:center;padding:40px;border-radius:20px;width:350px;margin:50px auto;color:#fff;transition:all .5s ease}.weather.day{background:linear-gradient(135deg,#6dd5ed,#2193b0)}.weather.night{background:linear-gradient(135deg,#2c3e50,#4ca1af)}.weather.clear{background:linear-gradient(135deg,#6dd5ed,#2193b0)}.weather.clouds{background:linear-gradient(135deg,#757f9a,#d7dde8)}.weather.rain{background:linear-gradient(135deg,#4e54c8,#8f94fb)}.weather.snow{background:linear-gradient(135deg,#e0eafc,#cfdef3)}.weather.thunderstorm{background:linear-gradient(135deg,#373b44,#4286f4)}.weather.mist{background:linear-gradient(135deg,#606c88,#3f4c6b)}.search-bar{display:flex;width:100%;margin-bottom:30px}.search-bar input{flex:1;padding:12px 20px;border-radius:30px 0 0 30px;border:none;font-size:16px;outline:none}.search-bar i{background:#fff;color:#333;padding:12px;border-radius:0 30px 30px 0;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center}.weather-card{display:flex;flex-direction:column;align-items:center}.weather-icon{width:150px;margin:20px 0}.temp{font-size:70px;font-weight:700;margin:0}.location{font-size:28px;margin-bottom:20px}.weather-data{display:flex;justify-content:space-between;width:100%;gap:20px}.weather-data .col{display:flex;align-items:center;gap:10px}.weather-data .col i{font-size:28px}.weather-data .col div p{margin:0;font-size:18px;font-weight:500}.weather-data .col div span{font-size:14px;color:#fff}