@import"https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";@import"https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap";*{padding:0;margin:0;border:0}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}:focus,:active{outline:none}a:focus,a:active{outline:none}nav,footer,header,aside{display:block}html,body{height:100%;width:100%;font-size:100%;line-height:1;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%}input,button,textarea{font-family:inherit}input::-ms-clear{display:none}button{cursor:pointer}button::-moz-focus-inner{padding:0;border:0}a,a:visited,a:hover{text-decoration:none}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit}:root{font-family:DM Sans,Bricolage Grotesque,sans-serif;line-height:1.5;font-size:18px;color-scheme:light dark;color:#ffffffde;background-color:#03012d;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{max-width:100%;min-height:100%}button{width:120px;border-radius:10px;border:1px solid transparent;padding:10px;font-size:18px;font-weight:700;font-family:Bricolage Grotesque}.wrapper{min-height:100%;width:100%;overflow:hidden}.container{width:1400px;margin:0 auto;padding:0 15px;min-height:100%}.header__inner{margin-top:35px;display:flex;justify-content:space-between}.header__units{position:relative;display:inline-block}.header__button{padding-left:35px;padding-right:35px;text-align:left;position:relative;background-color:#272541}.header__button:before{position:absolute;content:"";background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='none'%20viewBox='0%200%2016%2016'%3e%3cpath%20fill='%23fff'%20d='M14.125%207.406c.031.407.031.813%200%201.188l1%20.594a.74.74%200%200%201%20.344.843c-.344%201.313-1.063%202.5-2%203.469-.25.219-.625.281-.906.125l-1-.594c-.25.188-.72.469-1.032.594v1.156a.733.733%200%200%201-.562.719A7.765%207.765%200%200%201%206%2015.5c-.313-.063-.563-.406-.563-.719v-1.156a5.54%205.54%200%200%201-1.03-.594l-1%20.594c-.282.156-.657.094-.907-.125-.938-.969-1.656-2.156-2-3.469a.74.74%200%200%201%20.344-.844l1-.593c-.032-.156-.032-.406-.032-.594%200-.156%200-.406.032-.594l-1-.562A.74.74%200%200%201%20.5%206c.344-1.313%201.063-2.5%202-3.469.25-.219.625-.281.906-.125l1%20.594c.25-.188.719-.469%201.032-.594V1.25c0-.344.218-.625.562-.719a7.766%207.766%200%200%201%203.969%200c.312.063.562.406.562.719v1.156c.313.125.781.406%201.031.594l1-.594c.282-.156.657-.094.907.125.937.969%201.656%202.156%202%203.469a.74.74%200%200%201-.344.844l-1%20.562Zm-1.656%202c.25-1.312.25-1.469%200-2.781l1.375-.781c-.188-.563-.688-1.375-1.063-1.813l-1.375.782c-.969-.844-1.125-.938-2.375-1.375V1.843C8.75%201.812%208.281%201.75%208%201.75c-.313%200-.781.063-1.063.094v1.593c-1.25.438-1.375.532-2.375%201.376L3.188%204.03c-.468.532-.812%201.157-1.062%201.813l1.375.781c-.25%201.313-.25%201.469%200%202.781l-1.375.781c.188.563.688%201.376%201.063%201.813l1.374-.781c.97.844%201.125.937%202.375%201.375v1.594c.282.03.75.093%201.063.093.281%200%20.75-.062%201.031-.094v-1.593c1.25-.438%201.375-.531%202.375-1.375l1.375.781c.375-.438.875-1.25%201.063-1.813l-1.375-.78ZM8%205c1.625%200%203%201.375%203%203%200%201.656-1.375%203-3%203a3%203%200%200%201-3-3c0-1.625%201.344-3%203-3Zm0%204.5A1.5%201.5%200%200%200%209.5%208c0-.813-.688-1.5-1.5-1.5A1.5%201.5%200%200%200%206.5%208c0%20.844.656%201.5%201.5%201.5Z'/%3e%3c/svg%3e") no-repeat;width:16px;height:16px;top:21px;left:10px;transform:translateY(-50%)}.header__button:after{position:absolute;content:"";background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13'%20height='8'%20fill='none'%20viewBox='0%200%2013%208'%3e%3cpath%20fill='%23fff'%20d='M6.309%207.484%201.105%202.316c-.175-.14-.175-.421%200-.597l.704-.668a.405.405%200%200%201%20.597%200l4.219%204.148%204.184-4.148c.175-.176.457-.176.597%200l.703.668c.176.176.176.457%200%20.597L6.906%207.484a.405.405%200%200%201-.597%200Z'/%3e%3c/svg%3e") 0 0 no-repeat;width:13px;height:18px;top:27px;right:12px;transform:translateY(-50%);transition:all .3s}.header__button.rotated:after{transform:rotate(-180deg);top:7px}.units__dropdown{position:absolute;top:100%;right:0;margin-top:10px;background-color:#272541;border-radius:15px;padding:25px;min-width:320px;z-index:1000;box-shadow:0 10px 25px #0000004d}.units__dropdown__header{font-size:20px;font-family:Bricolage Grotesque;font-weight:700;color:#fff;margin-bottom:25px;padding-bottom:15px;border-bottom:1px solid hsl(243,23%,30%)}.units__dropdown__section{margin-bottom:25px}.units__dropdown__section:last-child{margin-bottom:0}.units__dropdown__title{font-size:18px;font-family:Bricolage Grotesque;font-weight:600;color:#d5d4d9;margin-bottom:15px}.units__dropdown__options{display:flex;flex-direction:column;gap:12px}.units__dropdown__option{display:flex;align-items:center;cursor:pointer;padding:8px 12px;border-radius:8px;transition:background-color .2s}.units__dropdown__option:hover{background-color:#312f4b}.units__dropdown__option input[type=radio]{margin:0 12px 0 0;width:20px;height:20px;accent-color:hsl(233,67%,56%);cursor:pointer}.units__dropdown__option__text{font-size:18px;font-family:DM Sans;color:#fff;cursor:pointer}.units__dropdown__option input[type=radio]{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:2px solid hsl(250,6%,84%);border-radius:50%;margin-right:12px;position:relative;cursor:pointer}.units__dropdown__option input[type=radio]:checked{border-color:#4455da}.units__dropdown__option input[type=radio]:checked:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:10px;height:10px;background-color:#4455da;border-radius:50%}.searching__inner{margin-top:50px;display:flex;flex-direction:column;align-items:center}.searching__header{font-size:36px;font-family:Bricolage Grotesque;font-weight:700;margin-bottom:30px}.searching__field{display:flex;gap:10px}.searching__wrapper{height:30px;position:relative}.searching__input{min-width:500px;height:45px;border-radius:10px;background-color:#272541;font-size:18px;color:#fff;padding-left:50px;position:relative}.recent-cities{position:absolute;top:50px;left:0;right:0;background:#272541;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin-top:4px;z-index:100;overflow:hidden}.recent-cities__header{padding:12px 16px;font-size:12px;color:#666;border-bottom:1px solid #eee;background-color:#f9f9f9}.recent-cities__item{padding:12px 16px;cursor:pointer;transition:background-color .2s;font-size:24px}.recent-cities__item:last-child{border-bottom:none}.recent-cities__item:hover{background-color:#312f4b}.suggestions{position:absolute;top:50px;left:0;right:0;background:#272541;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin-top:4px;z-index:100;overflow:hidden}.suggestions__item{padding:12px 16px;cursor:pointer;transition:background-color .2s;font-size:24px}.suggestions__item:last-child{border-bottom:none}.suggestions__item:hover{background-color:#312f4b}.searching__field{position:relative;display:flex;gap:12px}.error-message{color:#dc3545;margin-top:20px;font-size:30px;min-height:100vh}.loading-container{display:flex;justify-content:center;align-items:center;padding:2rem}.loading-spinner{text-align:center;padding:3rem;max-width:500px;width:100%}.spinner{animation:spin 1s linear infinite;margin:0 auto 1.5rem}.spinner img{width:50px}.loading-text{color:#aeaeb7;font-size:30px;font-weight:500;margin:0;font-family:Bricolage Grotesque}.loading-text:after{content:".";animation:dots 1.5s steps(5,end) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}80%,to{content:""}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.searching__wrapper:before{position:absolute;content:"";background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='21'%20height='21'%20fill='none'%20viewBox='0%200%2021%2021'%3e%3cpath%20fill='%23D4D3D9'%20d='M19.844%2018.82c.195.196.195.508%200%20.664l-.899.899c-.156.195-.468.195-.664%200l-4.726-4.727a.63.63%200%200%201-.117-.351v-.508c-1.446%201.21-3.282%201.953-5.313%201.953A8.119%208.119%200%200%201%200%208.625C0%204.172%203.633.5%208.125.5c4.453%200%208.125%203.672%208.125%208.125%200%202.031-.781%203.906-1.992%205.313h.508c.117%200%20.234.078.351.156l4.727%204.726ZM8.125%2014.875a6.243%206.243%200%200%200%206.25-6.25c0-3.438-2.813-6.25-6.25-6.25a6.243%206.243%200%200%200-6.25%206.25%206.219%206.219%200%200%200%206.25%206.25Z'/%3e%3c/svg%3e") 0 0 no-repeat;width:21px;height:21px;top:10px;left:16px;z-index:1}.searching__input::placeholder{color:#d5d4d9;position:relative}.searching__button{background-color:#4455da}.weather__inner{display:flex;margin-top:40px;justify-content:space-between}.empty__inner{display:flex;justify-content:center;margin-top:20px;min-height:100vh}.empty__message{font-size:40px;font-family:Bricolage Grotesque}.weather__main__info{background:url(/weather-app/assets/bg-today-large-CqYszFxp.svg) 0 0 no-repeat;background-size:cover;min-width:850px;min-height:286px;display:flex;align-items:center;justify-content:space-between;padding-left:30px;padding-right:30px;margin-bottom:30px;border-radius:25px}.weather__main__info__citydata{font-size:32px;font-family:Bricolage Grotesque;font-weight:600}.weather__data{font-size:18px;color:#d5d4d9}.weather__icon{width:100px;height:100px;margin-right:30px}.weather__main__info__temperature{font-size:96px;font-family:Bricolage Grotesque;font-weight:700}.weather__main__forecast{margin-bottom:40px}.forecast__list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;padding:0}.forecast__item{background-color:#272541;border-radius:15px;padding:20px;text-align:center}.item__feel,.item__humidity,.item__wind,.item__precipitation{font-size:23px;color:#d5d4d9;margin-bottom:20px;font-family:DM Sans}.item__feel__value,.item__humidity__value,.item__wind__value,.item__precipitation__value{font-size:32px;font-family:Bricolage Grotesque;font-weight:700}.daily__forecast__text{display:block;font-size:22px;font-family:Bricolage Grotesque;font-weight:600;margin-bottom:20px}.weather__daily__forecast{display:flex;justify-content:space-between;gap:20px;list-style:none;padding:0;margin:0}.daily__forecast__item{background-color:#272541;border-radius:15px;padding:20px 10px;text-align:center;flex:1;margin-bottom:20px}.daily__forecast__day{font-size:18px;font-family:Bricolage Grotesque;font-weight:600;margin-bottom:15px;display:block}.daily__forecast__temp{margin-top:10px;display:flex;justify-content:space-between}.daily__forecast__icon{height:70px}.temp__high{font-size:20px;font-family:Bricolage Grotesque;font-weight:700}.temp__low{font-size:20px;font-family:Bricolage Grotesque;color:#d5d4d9}.weather__hour{background-color:#272541;border-radius:25px;padding:30px;min-width:480px;min-height:100%;display:flex;flex-direction:column;margin-bottom:20px}.hourly__forecast__wrapper{width:100%}.hourly__forecast__header{display:flex;justify-content:center;align-items:center;margin-bottom:30px}.hourly__forecast__title{font-size:22px;font-family:Bricolage Grotesque;font-weight:600;color:#fff;margin:0}.hourly__forecast__day__btn{background-color:#4455da;color:#fff;border:none;border-radius:10px;padding:12px 20px;font-size:16px;font-family:Bricolage Grotesque;font-weight:600;cursor:pointer;min-width:140px;text-align:center;transition:background-color .25s}.hourly__forecast__day__btn:hover{background-color:#2a3ed5}.hourly__forecast__scrollable{max-height:555px;overflow-y:auto;padding-right:10px}.hourly__forecast__scrollable::-webkit-scrollbar{width:6px}.hourly__forecast__scrollable::-webkit-scrollbar-track{background:#312f4b;border-radius:3px}.hourly__forecast__scrollable::-webkit-scrollbar-thumb{background:#4455da;border-radius:3px}.hourly__forecast__list{display:flex;flex-direction:column;gap:20px}.hourly__forecast__item{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid hsl(243,23%,30%)}.hourly__forecast__time__wrapper{display:flex;align-items:center;gap:15px}.hourly__forecast__time{font-size:18px;font-family:DM Sans;color:#d5d4d9;min-width:50px}.hourly__forecast__icon{width:60px;height:60px;object-fit:contain}.hourly__forecast__temp{font-size:24px;font-family:Bricolage Grotesque;font-weight:700;color:#fff}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}@media(prefers-color-scheme:light){.units__dropdown{background-color:#f9f9f9;box-shadow:0 10px 25px #0000001a}.units__dropdown__header{color:#213547;border-bottom:1px solid #e0e0e0}.units__dropdown__title{color:#666}.units__dropdown__option:hover{background-color:#f0f0f0}.units__dropdown__option__text{color:#213547}.units__dropdown__option input[type=radio]{border-color:#999}.units__dropdown__option input[type=radio]:checked{border-color:#4455da}}@media(max-width:1400px){.container{width:100%;padding:0 50px}.weather__main__info{min-width:auto;width:100%}}@media(max-width:1366px){.weather__inner{gap:20px}.weather__main{min-width:700px}.weather__hour{min-width:min(450px,90vw)}.weather__daily__forecast{gap:10px}}@media(max-width:1280px){.weather__hour{min-width:400px}}@media(max-width:1200px){.weather__inner{flex-direction:column;gap:30px}.weather__main__info{min-height:250px;padding:0 25px}.weather__hour{min-width:320px}.searching__input{min-width:400px}}@media(max-width:992px){.container{padding:0 15px}.weather__main__info__temperature{align-self:center}.weather__main__info__citydata{font-size:28px}.weather__data{font-size:16px}.forecast__list{grid-template-columns:repeat(2,1fr);gap:15px}.weather__daily__forecast{display:grid;grid-template-columns:repeat(3,1fr)}.daily__forecast__item{flex:0 0 calc(25% - 10px);margin-bottom:10px;padding:15px 10px}.searching__header{font-size:32px;text-align:center}.searching__input{min-width:350px}.units__dropdown{min-width:280px}}@media(max-width:768px){.header__inner{flex-direction:row;align-items:center;gap:20px;margin-top:20px}.header__units{width:auto;display:block}.suggestions{overflow-y:scroll;max-height:300px}.searching__field{flex-direction:column;align-items:center;width:100%;max-width:500px;gap:30px}.searching__input{width:100%;max-width:none;flex-shrink:0}.searching__button{width:350px;max-width:none;flex-shrink:0}.weather__main{min-width:0px}.weather__main__info{padding:20px 25px;min-width:100%}.forecast__item{padding:15px}.item__feel,.item__humidity,.item__wind,.item__precipitation{font-size:20px;margin-bottom:15px}.item__feel__value,.item__humidity__value,.item__wind__value,.item__precipitation__value{font-size:28px}.daily__forecast__item{flex:0 0 calc(33.333% - 10px)}.daily__forecast__text{font-size:20px}.hourly__forecast__header{flex-direction:row;align-items:center;gap:15px}.hourly__forecast__day__btn{align-self:auto;text-align:center;min-width:120px}.weather__icon{margin-right:0}}@media(max-width:580px){.searching__field{flex-direction:column;align-items:center;gap:25px}.searching__header{font-size:58px;margin-bottom:20px}.searching__wrapper:before{top:12px;left:15px}.weather__main__info{padding:15px 20px;flex-direction:column;gap:15px}.weather__main__info__citydata{display:flex;flex-direction:column;font-size:30px;align-items:center;gap:10px;margin-top:20px}.weather__data{font-size:18px}.weather__main__info__temperature{font-size:96px;margin-top:-20px;display:flex;gap:30px}.weather__icon{margin-right:0}.weather__inner{margin-top:20px;gap:20px}.forecast__list{gap:10px}.forecast__item{padding:12px}.item__feel,.item__humidity,.item__wind,.item__precipitation{font-size:18px;margin-bottom:12px}.item__feel__value,.item__humidity__value,.item__wind__value,.item__precipitation__value{font-size:24px}.weather__daily__forecast{gap:8px}.daily__forecast__item{flex:0 0 calc(50% - 8px);padding:15px 8px}.daily__forecast__day{font-size:16px}.temp__high,.temp__low,.daily__forecast__text{font-size:18px}.weather__hour{padding:20px}.hourly__forecast__title{font-size:20px}.hourly__forecast__day__btn{align-self:stretch;min-width:auto}.hourly__forecast__item{padding-bottom:15px;gap:10px}.hourly__forecast__scrollable{max-height:400px}.units__dropdown{right:0;left:-160px;min-width:100px}.empty__message{font-size:24px}.error-message{font-size:20px}}@media(max-width:360px){.searching__button{width:300px}.searching__input,.weather__hour{min-width:300px}.header__inner{flex-direction:column}.searching__inner{margin-top:20px}.units__dropdown{right:-100px;left:-100px}}@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.header__button:before,.header__button:after,.searching__wrapper:before{background-size:contain}}@media(prefers-color-scheme:dark){:root{color:#ffffffde;background-color:#03012d}}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}.weather__main__info{background-color:#fff;color:#213547}}