@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("data:image/svg+xml,%3csvg%20width='235'%20height='235'%20viewBox='0%200%20235%20235'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M162.64%20195.833C175.76%20195.931%20188.392%20191.035%20198.085%20182.223C230.104%20154.219%20212.969%2098.0146%20170.767%2092.7271C155.687%201.27292%2023.7937%2035.9354%2055.0291%20122.983'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M71.2833%20126.998C66.0938%20124.354%2060.3167%20122.983%2054.5396%20123.081C8.91043%20126.313%209.00835%20192.7%2054.5396%20195.931'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M154.904%2096.8396C159.996%2094.2938%20165.479%2092.9229%20171.158%2092.825'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M97.6229%20195.833L78.0396%20215.417'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M136.79%20195.833L117.206%20215.417'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M136.79%20156.667L117.206%20176.25'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M97.6229%20156.667L78.0396%20176.25'%20stroke='%23B2D3FF'%20stroke-width='10'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");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}