@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";*{margin:0;padding:0;box-sizing:border-box;line-height:28px}body{font-family:Inter,sans-serif;font-size:16px;line-height:1.5;background-color:#ebf3fe;background-image:url(../assets/cloud-drizzle-background.svg);background-size:58%;background-repeat:no-repeat;background-position:-20vw -20vh}h3{font-size:18px;font-weight:700}header{display:flex;justify-content:center;align-items:center;flex-direction:column}header h1{margin-top:30px;display:block;color:#0065f2;font-weight:900;line-height:60px;font-size:56px}header h1 span{font-weight:600}header>p{color:#0065f2;font-weight:400;font-size:18px;line-height:28px;margin-top:24px}#app{display:flex;background-color:transparent;margin:auto;flex-direction:column;align-items:center;justify-content:center;max-width:1390px;width:100%}.content{width:100%;height:750px;margin-top:50px;gap:40px;display:flex;flex-direction:row;justify-content:space-between}.city-panel{position:relative;width:30%;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;background-color:#fff;border-radius:20px;padding:30px;gap:20px}.city-panel>a{position:absolute;bottom:0;margin-bottom:30px;color:#0065f2;font-size:18px;font-weight:700;text-decoration:none;width:100%;text-align:center}.city-panel .input{width:100%}.city-panel .input ::placeholder{color:#0065f280}.city-panel .input .search-box{width:100%}.city-panel .input .search-box .search-row{display:flex;flex-direction:row;justify-content:space-between;width:100%;gap:10px}.city-panel .input .search-box .search-row input{border-radius:10px;height:48px;border:none;background-color:#e0ecfd66;padding:12px 16px;font-size:16px;font-weight:400;flex:5;color:#0065f2e6}.city-panel .input .search-box .search-row button{background-color:#0065f2;border-radius:10px;border:none;padding:12px 20px;height:48px;color:#fff;font-size:16px;font-weight:500;flex:1;cursor:pointer}.city-panel #city-list{width:100%;display:flex;flex-direction:column;gap:10px;overflow:scroll;margin-bottom:40px}.city-panel .city{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:68px;background-color:#0065f2;border-radius:10px;padding:20px;cursor:pointer;color:#fff;font-size:18px;font-weight:700}.city-panel .city--disabled{background-color:#ebf3fe;color:#0065f2}.weather-panel{width:70%;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:center;background-color:#fff;border-radius:20px;padding:30px;gap:20px}.weather-panel>h4{margin:auto;color:#0065f2;font-size:24px;font-weight:700;line-height:28px}.weather-panel .weather-location{width:100%;display:flex;flex-direction:row;justify-content:start;gap:20px}.weather-panel .weather-location h3{font-size:22px;color:#0065f2;line-height:28px}.weather-panel .weather-location h3 span{font-weight:400}.weather-panel hr{width:100%;height:1px;background-color:#0065f266;border:none}.weather-panel .current-weather{display:flex;flex-direction:row;justify-content:space-between;gap:40px;width:100%}.weather-panel .current-weather-icon-panel{padding:20px;background-color:#ebf3fe;display:flex;justify-content:center;align-items:center;border-radius:10px;flex:1;height:375px}.weather-panel .current-weather-info-panel{display:flex;flex-direction:column;justify-content:center;align-items:start;flex:1;gap:20px}.weather-panel .current-weather-info-panel h2,.weather-panel .current-weather-info-panel h4,.weather-panel .current-weather-info-panel p{color:#0065f2}.weather-panel .current-weather-info-panel h2{font-size:40px;font-weight:700;line-height:40px}.weather-panel .current-weather-info-panel h4{font-weight:600;font-size:32px}.weather-panel .current-weather-info-panel p{font-size:24px;font-weight:400}.weather-panel .future-weather{display:flex;flex-direction:row;justify-content:space-between;gap:20px;width:100%;height:100%}.weather-panel .future-weather-card{display:flex;flex-direction:column;justify-content:space-between;align-items:center;background-color:#ebf3fe;border-radius:10px;padding:20px;flex:1;height:100%}.weather-panel .future-weather-card h5,.weather-panel .future-weather-card h6,.weather-panel .future-weather-card p{color:#0065f2}.weather-panel .future-weather-card h6{font-size:16px;font-weight:700;line-height:20px;text-align:center}.weather-panel .future-weather-card h5{font-size:22px;font-weight:700}.weather-panel .future-weather-card p{margin-top:5px;font-size:16px;font-weight:400}