*{padding:0;margin:0;border:0}*,*:before,*:after{box-sizing:border-box}:focus,:active{outline:none}a:focus,a:active{outline:none}a:visited{color:none}nav,footer,header,aside{display:block}html,body{height:100%;width:100%;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.04em;font-family:Arial,Helvetica,sans-serif}input,button,textarea{font-family:inherit;font-size:inherit;outline:none}button{cursor:pointer;font-size:inherit}button::-moz-focus-inner{padding:0;border:0}a,a:visited{text-decoration:none;color:inherit;display:block}a:hover{text-decoration:none}ul li{list-style:none}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:400}:root{--color-bg: #f8fafc;--color-surface: #ffffff;--color-primary: #0f172b;--color-secondary: #717182;--color-card-dark: #030213;--color-border: #e2e8f0;--font-main: Arial, Helvetica, sans-serif;--main-title-mob: 28px;--main-title-tab: 32px;--main-title-desk: 36px;--section-title-mob: 22px;--section-title-tab: 24px;--section-title-desk: 26px;--h3-size-mob: 18px;--h3-size-tab: 20px;--h3-size-desk: 22px;--text-size: 16px;--text-small: 14px;--text-big: 18px;--text-biggest: 22px;--btn-size: 18px;--section-padding-mob: 25px;--section-padding-desk: 32px;--container-padding-mob: 20px;--container-padding-tab: 32px;--gap-cards: 20px;--gap-cards-mob: 15px;--card-padding: 20px;--card-padding-mob: 18px;--input-padding: 24px 34px;--input-padding-mob: 18px 28px;--btn-padding-mob: 8px 20px;--btn-padding: 10px 24px;--radius-main: 15px;--radius-small: 10px;--shadow-card: 0 10px 15px rgba(15, 23, 43, .08);--border-light: .7px solid #e2e8f0;--transition-main: all .25s}html{scroll-behavior:smooth}html,body{min-height:100%;line-height:1;font-size:16px;font-family:Arial,Helvetica,sans-serif;background-color:var(--color-bg);color:#0f172b;margin:0 auto;overflow-x:hidden}.section{padding:25px 0}.container{padding:0 20px;position:relative;max-width:375px;height:100%;margin:0 auto}.section-title{font-size:var(--section-title-mob);color:var(--color-secondary);text-align:start;margin-bottom:20px;letter-spacing:.05em;text-transform:uppercase}.primary-btn{border-radius:var(--radius-small);color:var(--color-surface);font-size:var(--btn-size);background-color:var(--color-card-dark)}.header{padding-top:40px;padding-bottom:20px;border-bottom:.7px solid var(--color-border)}.header__content{display:flex;align-items:center;justify-content:space-between}.header__title{font-size:var(--main-title-mob);font-weight:700;letter-spacing:-.9px}.header__svg{width:35px;height:32px;fill:#2563eb;stroke:none}.header__content{display:flex;flex-direction:column;gap:14px}.header__back-link-desk{color:var(--color-surface);display:flex;align-items:center;justify-content:center;font-size:var(--text-big);padding:var(--btn-padding);font-weight:600;transition:all .25s}.header__back-link-desk:hover{background-color:#0b0830}.header__back-link-desk span{color:var(--color-surface)}.header__back-link-desk svg{fill:var(--color-surface)}.header__logo{display:flex;align-items:center;gap:12px}.header__back-link-mob{color:var(--color-surface);display:flex;align-items:center;justify-content:center;gap:14px;width:100%;font-size:var(--text-big);padding:var(--btn-padding);font-weight:600;transition:all .25s}.header__back-link-mob:hover{background-color:#0b0830}.header__back-link-mob span{color:var(--color-surface)}.header__back-link-mob svg{fill:var(--color-surface)}.popular-cities__list{display:flex;align-items:center;flex-direction:column;flex-wrap:wrap;gap:var(--gap-cards-mob)}.popular-cities__item{min-width:145px;width:100%}.popular-cities__item-link{border-radius:var(--radius-main);padding:var(--card-padding-mob);background-color:var(--color-card-dark);color:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:10px;transition:var(--transition-main)}.popular-cities__item-link:hover{transform:scale(1.04)}.popular-cities__item-title{color:#fff;font-size:var(--h3-size-mob);font-weight:500}.popular-cities__item-content{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:18px}.popular-cities__item-icon{display:flex;align-items:center;color:#fff;gap:12px;font-size:var(--text-smoll);font-weight:500}.popular-cities__svg{stroke:#fff;fill:#fff}.popular-cities__item-text{text-align:center;color:#fff;font-size:var(--text-size);font-weight:600}.our-cities__container{display:flex;align-items:center;flex-direction:column;gap:30px}.our-cities__bar{background-color:var(--color-surface);padding:var(--card-padding);border-radius:var(--radius-main);box-shadow:var(--shadow-card);border:var(--border-light);display:flex;flex-direction:column;gap:20px;width:100%}.our-cities__title{font-size:var(--h3-size-mob);font-weight:600;display:flex;align-items:center;gap:10px}.our-cities__svg{width:20px;height:20px}.our-cities__bar-content{display:flex;flex-direction:column;gap:16px}.our-cities__bar-sorts{display:flex;flex-direction:column;gap:14px;border-bottom:var(--border-light);padding-bottom:16px}.our-cities__bar-sorts-title{font-size:var(--text-size);color:var(--color-secondary);text-align:start;letter-spacing:.01em;text-transform:uppercase}.our-cities__bar-sorts-btns{display:flex;flex-direction:column;justify-content:center;gap:8px;width:100%}.our-cities__bar-sorts-btn{background-color:inherit;font-weight:500;color:var(--color-secondary);border-radius:var(--radius-small);font-size:var(--text-small);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;text-align:start;transition:var(--transition-main)}.our-cities__bar-sorts-cont{display:flex;align-items:center;gap:8px;text-align:start}.our-cities__bar-sorts-btn.active{background-color:var(--color-card-dark);color:var(--color-surface);fill:var(--color-surface)}.our-cities__bar-sorts-btn.active svg{fill:var(--color-surface)}.our-cities__bar-sorts-btn:hover{background-color:#e0e0e0}.our-cities__bar-sorts-btn svg{stroke:none;fill:var(--color-secondary);transition:all .25s}.our-cities__bar-sorts-svg{stroke:none;fill:var(--color-secondary);justify-self:end;transition:all .25s}.our-cities__bar-sorts-btn:hover svg{fill:var(--color-primary)}.our-cities__bar-clear{display:flex;flex-direction:column;gap:14px}.our-cities__bar-clear-title{font-size:var(--text-size);color:var(--color-secondary);text-align:start;letter-spacing:.01em;text-transform:uppercase}.our-cities__clear-btn{padding:var(--btn-padding);color:var(--color-primary);background-color:var(--color-surface);border:.7px solid rgb(218,64,64);color:#da4040;text-align:start;transition:var(--transition-main)}.our-cities__clear-btn:hover{background-color:#ffe0e0}.our-cities__content{width:100%;display:flex;flex-direction:column;align-items:center}.our-cities__form{width:100%;position:relative;margin-bottom:20px}.our-cities__form-input{width:100%;background-color:var(--color-surface);padding:var(--input-padding-mob);border-radius:var(--radius-main);box-shadow:var(--shadow-card);border:var(--border-light);font-size:var(--text-size);padding-right:110px;transition:var(--transition-main)}.our-cities__form-input:hover,.our-cities__form-input:focus{box-shadow:0 18px 12px #0c122214}.our-cities__form-btn{position:absolute;display:flex;top:10px;right:10px;gap:7px;align-items:center;justify-content:center;font-size:var(--text-size);padding:var(--btn-padding-mob);transition:var(--transition-main)}.our-cities__form-btn svg{stroke:var(--color-surface);fill:var(--color-surface)}.our-cities__form-btn:hover{background-color:#363a41}.our-cities__refresh-btn{align-self:center;justify-self:center;margin-bottom:0;text-align:center;font-size:var(--text-size);padding:var(--btn-padding-mob);opacity:0;visibility:hidden;pointer-events:none;transition:var(--transition-main)}.active-btn{opacity:1;visibility:visible;pointer-events:auto;margin-bottom:16px}.our-cities__refresh-btn:hover{background-color:#363a41}.our-cities__list{display:flex;flex-wrap:wrap;width:100%;gap:15px;justify-content:center;align-items:center}.our-cities__item{flex-basis:100%;background-color:var(--color-surface);padding:var(--card-padding-mob);border-radius:var(--radius-main);box-shadow:var(--shadow-card);border:var(--border-light);display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:16px;transition:var(--transition-main)}.our-cities__item:hover{transform:scale(1.02)}.our-cities__item-link{display:flex;flex-direction:column;width:100%;gap:14px}.our-cities__item-up{border-radius:var(--radius-main);margin:-15px -15px 0;position:relative}.our-cities__item-up img{border-top-left-radius:var(--radius-main);object-fit:cover;border-top-right-radius:var(--radius-main);width:100%}.our-cities__item-name{position:absolute;font-weight:600;font-size:var(--text-big);bottom:7px;left:5px;background-color:var(--color-card-dark);color:var(--color-surface);padding:8px 18px;border-radius:100px}.our-cities__item-content{display:flex;width:100%;align-items:center;justify-content:space-between}.our-cities__item-temp{font-weight:600;font-size:var(--h3-size-mob)}.our-cities__item-weather{display:flex;align-items:center;gap:8px;font-size:var(--text-size);font-weight:500}.our-cities__item-weather svg{stroke:none}.our-cities__item-down{display:flex;align-items:center;gap:8px}.our-cities__item-down-info{background-color:#e7e6e6;padding:4px 6px;font-size:var(--text-small);border-radius:100px}.our-cities__item-down-info svg{stroke:none}.our-cities__item-down-humid{fill:#2563eb}.our-cities__item-btn{background-color:inherit;padding:8px;border-radius:10px;transition:var(--transition-main)}.our-cities__item-btn:hover{background-color:#e0e0e0}.alternative{width:100%;text-align:center;padding:100px 20px;font-size:var(--text-big);border:2px dashed #e2e8f0;border-radius:var(--radius-main);color:var(--color-secondary);text-transform:uppercase;letter-spacing:.05em}.loader{background:none repeat scroll 0 0 inherit;height:100%;width:100%;position:absolute;left:20px;top:20px;z-index:9999}.loader .loader_inner{animation:animate 1.5s linear infinite;clip:rect(0,80px,80px,40px);height:80px;width:80px;position:absolute;left:calc(50% - 40px);top:calc(50% - 40px)}@keyframes animate{0%{transform:rotate(0)}to{transform:rotate(220deg)}}.loader .loader_inner:after{animation:animate2 1.5s ease-in-out infinite;clip:rect(0,80px,80px,40px);content:"";border-radius:50%;height:80px;width:80px;position:absolute}@keyframes animate2{0%{box-shadow:inset #b3dfd8 0 0 0 17px;transform:rotate(-140deg)}50%{box-shadow:inset #b3dfd8 0 0 0 2px}to{box-shadow:inset #b3dfd8 0 0 0 17px;transform:rotate(140deg)}}.our-cities__loader{background:none repeat scroll 0 0 inherit;height:100%;width:100%;position:fixed;bottom:0;left:0;right:0;top:200px;z-index:9999}.our-cities__loader .our-cities__loader_inner{animation:animate 1.5s linear infinite;clip:rect(0,80px,80px,40px);height:80px;width:80px;position:absolute;left:calc(50% - 40px);top:calc(50% - 40px)}.our-cities__loader .our-cities__loader_inner:after{animation:animate2 1.5s ease-in-out infinite;clip:rect(0,80px,80px,40px);content:"";border-radius:50%;height:80px;width:80px;position:absolute}.hidden{display:none}.city-details__wrapper{display:flex;align-items:center;flex-direction:column;width:100%;gap:25px}.city-details__hero{display:flex;align-items:flex-start;justify-content:space-between;position:relative;width:100%;background-color:var(--color-surface);padding:75px 25px;border-radius:var(--radius-main);box-shadow:var(--shadow-card);border:var(--border-light);overflow:hidden}.city-details__hero-info{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:60px}.city-details__hero-up{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:22px}.city-details__hero-name{font-weight:600;font-size:22px}.city-details__hero-temp{font-size:48px;font-weight:900;letter-spacing:-.9px}.city-details__hero-text{font-weight:500;font-size:var(--text-big)}.city-details__weather{display:flex;align-items:center;gap:20px}.city-details__weather span{font-weight:500;font-size:24px}.city-details__weather svg{stroke:none;width:40px;height:40px}.city-details__coords{position:absolute;bottom:-4px;right:25px;display:flex;align-items:center;gap:20px;font-size:30px;opacity:.5;color:#2563eb;text-align:start;font-weight:400;letter-spacing:.15em;text-transform:uppercase}.city-details__list{display:flex;align-items:center;flex-wrap:wrap;gap:15px}.city-details__item{flex-basis:100%;background-color:var(--color-surface);padding:var(--card-padding);border-radius:var(--radius-main);box-shadow:var(--shadow-card);border:var(--border-light);display:flex;align-items:center;gap:20px}.city-details__item-svg{padding:10px;border-radius:100px;background-color:#e7e7e7}.city-details__item-svg svg{width:20px;height:20px}.city-details__item-info{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.city-details__item-name{opacity:.7;font-weight:400;font-size:var(--text-size)}.city-details__item-text{font-weight:600;font-size:var(--h3-size-mob)}.city-details__item-wind-svg{fill:#717182}.city-details__item-temp-svg{fill:#fb2c36}.city-details__item-pressure-svg{fill:#ad46ff}.city-details__item-sun-svg{fill:#ffa602}.header__back-link-mob{display:flex}.header__back-link-desk{display:none}.header__content{display:flex;flex-direction:column}.city-forcast__list{background-color:var(--color-surface);padding:var(--card-padding);border-radius:var(--radius-main);box-shadow:var(--shadow-card);border:var(--border-light)}.city-forcast__item{display:flex;align-items:center;justify-content:space-between;border-bottom:var(--border-light);padding:var(--card-padding-mob);border-radius:var(--radius-main);transition:all .25s}.city-forcast__item:hover{background-color:#ebebeb}.city-forcast__item:last-child{border-bottom:none}.city-forcast__title{padding:4px 6px;border-radius:100px;background-color:#e7e7e7;font-weight:600;font-size:var(--h3-size-mob)}.city-forcast__weather{display:flex;align-items:center;gap:10px}.city-forcast__weather span{display:none}.city-forcast__weather-svg{width:35px;height:35px}.city-forcast__temps{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-big);font-weight:600;max-width:70px;width:100%}.city-forcast__temps span{color:#2563eb}@media screen and (min-width: 768px){.container{margin:0 auto;padding:0 32px;max-width:768px}.section-title{font-size:var(--section-title-tab);margin-bottom:22px}}@media screen and (min-width: 1280px){.section{padding:50px 0}.container{margin:0 auto;max-width:1280px}.section-title{font-size:var(--section-title-desk);margin-bottom:24px}}@media screen and (min-width: 768px){.header__title{font-size:var(--main-title-tab)}}@media screen and (min-width: 1280px){.header{padding-top:60px;padding-bottom:30px}.header__title{font-size:var(--main-title-desk)}}@media screen and (min-width: 768px){.popular-cities__list{flex-direction:row;gap:var(--gap-cards)}.popular-cities__item{width:auto}.popular-cities__item-link{flex-direction:column;justify-content:center;align-items:center;gap:10px}.popular-cities__item-content{flex-direction:column;gap:8px}.popular-cities__item-link{padding:var(--card-padding);gap:12px}.popular-cities__item-title{font-size:var(--h3-size-tab)}.popular-cities__item-content{gap:10px}.popular-cities__item-icon{gap:15px}}@media screen and (min-width: 1280px){.popular-cities__item-title{font-size:var(--h3-size-desk)}.popular-cities__item-icon{font-size:var(--text-size)}.popular-cities__item-text{text-align:center;font-size:var(--text-big)}}@media screen and (min-width: 768px){.our-cities__container{gap:35px}.our-cities__bar{gap:22px}.our-cities__title{font-size:var(--h3-size-tab)}.our-cities__svg{width:30px;height:30px}.our-cities__bar-content{display:flex;flex-direction:column;gap:18px}.our-cities__bar-sorts{gap:16px;padding-bottom:18px}.our-cities__bar-sorts-title{font-size:var(--text-big)}.our-cities__bar-sorts-btns{gap:10px}.our-cities__bar-sorts-btn{font-size:var(--text-size);padding:10px 18px}.our-cities__bar-clear{display:flex;flex-direction:column;gap:16px}.our-cities__bar-clear-title{font-size:var(--text-big)}}@media screen and (min-width: 1280px){.our-cities__container{flex-direction:row;align-items:flex-start;gap:50px}.our-cities__bar{padding:var(--card-padding);display:flex;flex-direction:column;gap:24px;max-width:300px}.our-cities__title{font-size:var(--h3-size-desk);display:flex;align-items:center;gap:12px}.our-cities__svg{width:30px;height:30px}.our-cities__bar-content{display:flex;flex-direction:column;gap:20px}.our-cities__bar-sorts{display:flex;flex-direction:column;gap:18px;padding-bottom:20px}.our-cities__bar-sorts-title{font-size:var(--text-big);letter-spacing:.01em}.our-cities__bar-sorts-btns{display:flex;flex-direction:column;justify-content:center;gap:12px}.our-cities__bar-sorts-btn{padding:10px 18px;display:flex;align-items:center;justify-content:space-between;text-align:start}.our-cities__bar-sorts-cont{display:flex;align-items:center;gap:8px;text-align:start}.our-cities__bar-clear{display:flex;flex-direction:column;gap:18px}.our-cities__bar-clear-title{font-size:var(--text-big);letter-spacing:.01em}.our-cities__clear-btn{padding:var(--btn-padding)}}@media screen and (min-width: 768px){.our-cities__form{margin-bottom:22px}.our-cities__form-input{padding:var(--input-padding);font-size:var(--text-big);padding-right:134px}.our-cities__form-btn{top:14px;right:12px;gap:8px;font-size:var(--text-big);padding:var(--btn-padding)}.our-cities__refresh-btn{font-size:var(--text-big);padding:var(--btn-padding)}.active-btn{margin-bottom:20px}.our-cities__list{display:flex;flex-wrap:wrap;width:100%;gap:20px;justify-content:center;align-items:center}.our-cities__item{flex-basis:calc((100% - 20px)/2);background-color:var(--color-surface);padding:var(--card-padding);gap:18px}.our-cities__item-link{gap:16px}.our-cities__item-up{margin:-20px -20px 0}.our-cities__item-temp{font-size:var(--h3-size-tab)}.our-cities__item-down{gap:10px}.our-cities__item-down-info{padding:5px 8px;font-size:var(--text-size)}}@media screen and (min-width: 1280px){.our-cities__form{margin-bottom:24px}.our-cities__item{flex-basis:calc((100% - 40px) / 3);gap:20px}.our-cities__item-link{gap:18px}.our-cities__item-name{padding:8px 18px}.our-cities__item-weather{font-size:var(--text-big)}.our-cities__item-down{gap:10px}}@media screen and (min-width: 768px){.header__content{display:flex;flex-direction:row}.header__back-link-mob{display:none}.header__back-link-desk{display:flex}}@media screen and (min-width: 768px){.city-details__wrapper{display:flex;align-items:center;flex-direction:column;width:100%;gap:35px}.city-details__hero{padding:85px 30px}.city-details__hero-info{gap:80px}.city-details__hero-up{gap:24px}.city-details__hero-name{font-size:24px}.city-details__hero-temp{font-size:56px}.city-details__hero-text{font-size:20px}.city-details__weather{gap:25px}.city-details__weather span{font-size:28px}.city-details__weather svg{stroke:none;width:55px;height:55px}.city-details__coords{position:absolute;bottom:-4px;right:30px;gap:20px;font-size:36px}.city-details__list{gap:20px}.city-details__item{flex-basis:calc((100% - 20px)/2);gap:20px}.city-details__item-svg svg{width:25px;height:25px}.city-details__item-name{font-size:var(--text-big)}.city-details__item-text{font-size:var(--h3-size-tab)}}@media screen and (min-width: 1280px){.city-details__wrapper{gap:50px}.city-details__hero{padding:100px 50px}.city-details__hero-info{gap:100px}.city-details__hero-up{gap:28px}.city-details__hero-name{font-size:40px}.city-details__hero-temp{font-size:64px}.city-details__hero-text{font-size:var(--text-biggest)}.city-details__weather{gap:30px}.city-details__weather span{font-size:50px}.city-details__weather svg{width:75px;height:75px}.city-details__coords{right:50px;gap:30px;font-size:36px}.city-details__list{gap:20px}.city-details__item{flex-basis:calc((100% - 60px)/4);gap:14px}.city-details__item-name{font-size:var(--text-big)}.city-details__item-text{font-size:var(--h3-size-desk)}}@media screen and (min-width: 768px){.city-forcast__title{padding:5px 8px;font-size:var(--h3-size-tab)}.city-forcast__weather{display:flex;align-items:center;gap:12px}.city-forcast__weather span{font-size:var(--text-big);display:flex}.city-forcast__weather-svg{width:45px;height:45px}.city-forcast__temps{font-size:var(--text-big);max-width:100px}}@media screen and (min-width: 1280px){.city-forcast__title{font-size:var(--h3-size-desk)}.city-forcast__weather{display:flex;align-items:center;gap:15px}.city-forcast__weather span{font-size:var(--text-biggest);display:flex}.city-forcast__weather-svg{width:45px;height:45px}.city-forcast__temps{font-size:var(--text-biggest);max-width:100px}}.footer__bg{width:100%;object-fit:cover;height:100%}