@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{background-color:#111015}.navbar{display:flex;justify-content:space-between;align-items:center;padding:2rem 5rem}.navbar .logo a{text-decoration:none}.navbar .logo a h1{font-family:Inter,sans-serif;font-weight:700;font-size:1.875rem;color:#bbd7ec;letter-spacing:2px}.navbar .search-bar{display:flex;align-items:center;justify-content:flex-start;width:550px;height:60px;background-color:#1b1b1d;border-radius:50px;padding:1rem .5rem}.navbar .search-bar #search-btn{padding:.25rem;border:none;border-radius:50px;cursor:pointer;background-color:#bbd7ec}.navbar .search-bar input{width:100%;height:100%;border-radius:50px;padding:1rem;background-color:transparent;font-size:1rem;font-family:Inter,sans-serif;outline:none;border:none;color:#fff}.navbar .user-location{display:flex;justify-content:flex-start;align-items:center;-moz-column-gap:1rem;column-gap:1rem;width:350px;height:60px;background-color:#1b1b1d;padding:.5rem;border-radius:50px}.navbar .user-location button{border-radius:50%;padding:.25rem;background-color:#bbd7ec;border:none;outline:none;cursor:pointer}.navbar .user-location #user-city{font-family:Inter,sans-serif;font-weight:400;font-size:1rem;color:#fff}.navbar .user-location #user-country{font-weight:700;font-family:Inter,sans-serif;font-size:1rem;color:#fff}.navbar .navigation-btn{background-color:#1b1b1d;height:60px;width:60px;display:flex;justify-content:center;align-items:center;border-radius:50px;transition:.3s all ease-in-out}.navbar .navigation-btn button{padding:.5rem;border-radius:50px;border:none;outline:none;background-color:#111015;cursor:pointer}.weather-forecast{padding:1rem 5rem}.weather-forecast h2{color:#bbd7ec;font-family:Inter,sans-serif;font-size:1.875rem;font-style:normal;font-weight:500;line-height:normal}.weather-forecast .container{display:flex;justify-content:space-between;align-items:center}.weather-forecast .container .btn-group{display:flex;-moz-column-gap:1rem;column-gap:1rem;margin:1rem 0}.weather-forecast .container .btn-group button{padding:1rem 2rem;font-size:1.25rem;font-family:Inter,sans-serif;font-weight:500;border-radius:50px;background-color:#1b1b1d;outline:none;border:none;color:#fff;cursor:pointer;transition:.3s ease-in-out all}.weather-forecast .container .btn-group button:hover{background-color:#bbd7ec;font-weight:500}.weather-forecast .container .btn-group .active{background-color:#bbd7ec}.weather-forecast .container .day-time{display:flex;justify-content:center;align-items:center;-moz-column-gap:1rem;column-gap:1rem}.weather-forecast .container .day-time p{color:#bbd7ec;font-family:Inter,sans-serif;font-size:1.25rem;font-weight:700}.weather-forecast .container .day-time span{color:#fff;color:#bbd7ec;font-family:Inter,sans-serif;font-size:1.25rem;font-weight:700;width:150px}.weather-forecast .card-container{display:grid;grid-template-columns:auto auto auto;justify-content:flex-start;margin:1rem 0;-moz-column-gap:5rem;column-gap:5rem}.weather-forecast .card-container .weather-card{background-color:#1b1b1d;width:400px;height:300px;border-radius:25px;padding:1rem}.weather-forecast .card-container .weather-card .weather-info{display:flex;justify-content:space-between;align-items:center}.weather-forecast .card-container .weather-card .weather-info .weather-info-container{display:flex;flex-direction:column;align-items:flex-end;justify-content:center}.weather-forecast .card-container .weather-card .weather-info .weather-info-container p{color:#fff;font-family:Inter,sans-serif;font-size:5rem;font-weight:500;line-height:3.5rem;text-align:right}.weather-forecast .card-container .weather-card .weather-info .weather-info-container span{font-size:1rem;color:#fff;font-family:Inter,sans-serif;font-weight:500;line-height:2.5rem;text-transform:capitalize}.weather-forecast .card-container .weather-card .weather-info img{width:150px;height:135px;-o-object-fit:contain;object-fit:contain}.weather-forecast .card-container .weather-card .weather-details ul{display:grid;grid-template-columns:auto auto;align-items:center;justify-items:start;row-gap:7px;list-style:none}.weather-forecast .card-container .weather-card .weather-details ul li{color:#fff;font-family:Inter,sans-serif;font-size:1.125rem;font-weight:500;display:flex;justify-content:flex-start;align-items:center;-moz-column-gap:5px;column-gap:5px}.weather-forecast .card-container .active{background-color:#bbd7ec}.other-cities-weather{padding:1rem 5rem}.other-cities-weather h2{color:#bbd7ec;font-family:Inter,sans-serif;font-size:1.875rem;font-weight:500}.other-cities-weather .card-container{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;margin:1rem 0}.other-cities-weather .card-container .city-weather-card{background-color:#1b1b1d;width:400px;height:100px;padding:.5rem 1rem;display:flex;justify-content:space-between;align-items:center;border-radius:15px}.other-cities-weather .card-container .city-weather-card .city-country{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;row-gap:.5rem}.other-cities-weather .card-container .city-weather-card .city-country h3{color:#bbd7ec;font-family:Inter,sans-serif;font-size:1.5rem;font-weight:400}.other-cities-weather .card-container .city-weather-card .city-country p{color:#fff;font-family:Inter,sans-serif;font-size:1.875rem;font-weight:500}.other-cities-weather .card-container .city-weather-card .citi-temprature{display:flex;justify-content:center;align-items:center}.other-cities-weather .card-container .city-weather-card .citi-temprature p{font-family:Inter,sans-serif;font-size:3rem;color:#bbd7ec;font-weight:500}.other-cities-weather .card-container .city-weather-card .citi-temprature img{width:100px;height:auto;-o-object-fit:cover;object-fit:cover}@media screen and (max-width: 820px){.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}.navbar .search-bar{width:calc(100vw - 4rem);position:absolute;top:90px}.weather-forecast{padding:1rem 2rem;margin-top:3.5rem}.weather-forecast h2{font-size:1.5rem}.weather-forecast .container .btn-group button{padding:.5rem 1rem;font-size:1rem}.weather-forecast .container .day-time p{font-size:1rem}.weather-forecast .container .day-time span{font-size:1rem;width:120px}.weather-forecast .card-container{justify-content:flex-start;grid-template-columns:auto auto;margin:.5rem 0;gap:1rem}.weather-forecast .card-container :last-child{-moz-column-span:1/3;column-span:1/3}.weather-forecast .card-container .weather-card{width:345px;height:275px}.weather-forecast .card-container .weather-card .weather-info img{width:120px;height:135px}.weather-forecast .card-container .weather-card .weather-details ul li{font-size:.9rem}.other-cities-weather{padding:1rem 2rem}.other-cities-weather h2{font-size:1.5rem}.other-cities-weather .card-container{grid-template-columns:auto auto;justify-content:flex-start;gap:1rem}.other-cities-weather .card-container .city-weather-card{width:345px}.other-cities-weather .card-container .city-weather-card .city-country h3{font-size:1rem}.other-cities-weather .card-container .city-weather-card .city-country p{font-size:1.5rem}.other-cities-weather .card-container .city-weather-card .citi-temprature p{font-size:2rem}}@media screen and (max-width: 450px){.navbar{flex-direction:column;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem}.navbar .search-bar{width:calc(100% - 2rem);margin-top:3rem;order:2}.navbar .user-location{order:3;margin-top:1rem}.weather-forecast{padding:1rem 2rem;margin-top:3.5rem}.weather-forecast h2{font-size:1.5rem}.weather-forecast .container{flex-direction:column}.weather-forecast .container .btn-group button{padding:.5rem;font-size:.8rem}.weather-forecast .container .day-time p{font-size:1rem}.weather-forecast .container .day-time span{font-size:1rem;width:120px}.weather-forecast .card-container{justify-content:center;grid-template-columns:auto;margin:.5rem 0;gap:1rem}.weather-forecast .card-container :last-child{-moz-column-span:1/3;column-span:1/3}.weather-forecast .card-container .weather-card{width:350px;height:-moz-fit-content;height:fit-content}.weather-forecast .card-container .weather-card .weather-info img{width:120px;height:135px}.weather-forecast .card-container .weather-card .weather-details ul li{font-size:.9rem}.other-cities-weather{padding:1rem 2rem}.other-cities-weather h2{font-size:1.5rem}.other-cities-weather .card-container{grid-template-columns:auto;justify-content:center;gap:1rem}.other-cities-weather .card-container .city-weather-card{width:350px}.other-cities-weather .card-container .city-weather-card .city-country h3{font-size:1rem}.other-cities-weather .card-container .city-weather-card .city-country p{font-size:1.5rem}.other-cities-weather .card-container .city-weather-card .citi-temprature p{font-size:2rem}}