@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--background-url: url(https://img.freepik.com/free-vector/cloud-background-pastel-paper-cut-design-vector_53876-135919.jpg)}html,body{margin:0;padding:0;width:100%;height:100vh;font-family:Roboto,sans-serif}p,a,h1,h2,h3,h4,h5,h6{margin:0;padding:0}ul,ol{margin:0;padding:0;list-style:none}li{margin:0;padding:0}#main{width:100%;height:100%;display:flex;font-family:Roboto,sans-serif}#app-background{display:flex;flex:1;flex-direction:row;background-blend-mode:multiply;background-color:#00000080;background-size:cover;background-position:center;background-repeat:no-repeat;background-image:var(--background-url)}.primary-container{display:flex;flex:1;justify-content:flex-start;align-items:flex-end}.secondary-container{flex:1}@media (max-width: 768px){#app-background{flex-direction:column}}#weather-widget-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center}#weather-widget{margin-left:90px;margin-bottom:20px;display:flex;align-items:center;gap:20px;font-weight:400;color:#fff;cursor:default}#weather-widget>.temp>p{font-size:143px;letter-spacing:5px}#weather-widget>.meta>.location>p{font-size:50px;letter-spacing:0;margin-bottom:8px}#weather-widget>.meta>.date>p{font-size:18px;letter-spacing:0;font-weight:300}#weather-widget>.icon>i{font-size:75px}#get-weather-by-location-feature{margin-bottom:50px;color:#ffffffb3;transition:ease-out 1s}#get-weather-by-location-feature:hover{text-decoration:underline;cursor:pointer}.secondary-container{max-width:526px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:5px solid #FFFFFF24;display:flex;overflow:auto}.weather-details-wrapper{display:flex;flex-direction:column;width:100%;margin:40px 50px 0}.search-city-weather{border-bottom:1px solid white;display:flex;flex-direction:row;justify-content:space-between;margin-bottom:35px}.search-city-input,.search-city-button{height:50px;background-color:transparent;border:none;color:#fff;font-size:20px;transition:ease-in-out .3s}.search-city-input{width:100%;font-weight:400;padding-left:5px}.search-city-input:focus{outline:none;border:none}.search-city-input::placeholder{color:#fff;color:#ffffff80}.search-city-button{width:50px;cursor:pointer}.search-city-button:hover{color:#ffffff80}.user-location{font-size:14px;color:#fff}.weather-details-title,.forecast-title{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:40px}.weather-details-content,.weather-details-forecast-list{padding-bottom:80px;border-bottom:1px solid white;margin-bottom:40px}.weather-details-title>p,.weather-details-description>p,.forecast-title>p{font-size:18px;color:#fff}.forecast-title>p{font-size:24px}.weather-details-title>p{font-size:24px}.weather-details-description>p{font-weight:700}.weather-details-list,.forecast-details-list{display:flex;flex-direction:column;row-gap:30px}.weather-details-list>li,.forecast-details-list>li{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.forecast-details-list>li{max-width:354px}.weather-details-data{display:flex;flex-direction:row;align-items:center;gap:20px}.weather-details-list>li>p,.weather-details-data>p{font-size:18px;color:#fff;font-weight:lighter}.weather-details-data>i{font-size:24px;color:#fff}.forecast-icon-time-description{display:flex;flex-direction:row;align-items:center;gap:30px}.forecast-icon-time-description>i{color:#fff;font-size:35px}.forecast-time-description{display:flex;flex-direction:column;align-items:center;gap:5px}.forecast-time-description>p{font-size:18px;color:#fff}.forecast-description{font-weight:lighter}.forecast-temperature{font-size:24px;color:#fff}@media (max-width: 1024px){#weather-widget{margin-left:50px;margin-bottom:20px}#weather-widget>.temp>p{font-size:100px}#weather-widget>.meta>.location>p{font-size:40px}#weather-widget>.meta>.date>p{font-size:14px}#weather-widget>.icon>i{font-size:65px}.secondary-container{max-width:426px}}@media (max-width: 1024px){.primary-container{justify-content:center}#weather-widget{margin-left:0}#weather-widget>.temp>p{font-size:120px}.secondary-container{max-width:100%;border-top:5px solid #FFFFFF24;border-left:none}.weather-details-wrapper{margin:40px 100px 0}.forecast-details-list>li{max-width:100%}}@media (max-width: 425px){.primary-container{align-items:center}#weather-widget{gap:10px}#weather-widget>.temp>p{font-size:74px}.weather-details-wrapper{margin:40px 30px 0}#weather-widget>.meta>.location>p{font-size:40px;margin-bottom:4px}#weather-widget>.meta>.date>p{font-size:14px}#weather-widget>.icon>i{font-size:45px}}