@import "https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap";:root{--main-background-color:rgba(112,112,112,.1);--text-light-color:#f5f4f4;--text-dark-color:#707070;--text-black-color:#202020;--border-line-color:#f2f2f2;--icon-color:#545454;--indicator-color:#393939;--input-background-active-color:#dadada;--input-background-color:rgba(245,244,244,.4);--progress-background-middle-color:rgba(84,84,84,.4);--progress-background-center-color:rgba(138,138,138,.4);--progress-background-color:rgba(218,218,218,.4);--progress-background-full-color:#dadada;--footer-background-color:rgba(139,139,139,.1);--slider-link-color:#a6a6a6;--min-step:8px;--radius:8px;--cubic:.4,0,.2,1;--offset:0;--percent-humidity:65%;--percent-pressure:75%;--percent-visibility:25%;--mobile-1:343px;--mobile-2:608px;--tablet-1:720px;--tablet-2:838px;--desktop-1:960px;--desktop-2:1120px;--mobile-padding:16px;--tablet-padding:24px;--desktop-padding:32px}:hover,:focus{outline:none}h1,h2,h3,h4,h5,h6,p,time{cursor:default;margin:0}ul{margin:0;padding:0;list-style:none}a{cursor:pointer;line-height:0;text-decoration:none}a:visited{color:inherit}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}button{font:inherit;color:inherit;cursor:pointer;font-variant-numeric:lining-nums;background-color:rgba(0,0,0,0);border:none;padding:0}input{line-height:inherit;font-variant-numeric:lining-nums}img{max-width:fit-content;height:auto;display:block}address{font-style:normal}.icon{stroke:currentColor;fill:currentColor}.visually-hidden{white-space:nowrap;width:1px;height:1px;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);opacity:0;border:0;margin:-1px;padding:0;position:absolute;overflow:hidden}body{padding:var(--mobile-padding);min-height:100vh;width:100%;color:var(--text-light-color);letter-spacing:0;font-variant-numeric:lining-nums;background-image:url(background-main@1x.251c2ee5.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;font-family:Raleway,"sans-serif";font-size:14px;font-weight:400;line-height:1.14;display:flex}@media screen and (min-width:768px){body{padding:var(--tablet-padding);font-size:20px;line-height:1.2}}@media screen and (min-width:1024px){body{padding:var(--desktop-padding)}}@media screen and (min-width:1280px){body{padding:32px 80px}}@media (min-device-pixel-ratio:2),(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi),(min-resolution:2x){body{background-image:url(background-main@2x.30fd2dc5.jpg)}}@media (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3),(min-resolution:288dpi),(min-resolution:3x){body{background-image:url(background-main@3x.b208da75.jpg)}}.container{width:100%;max-width:var(--mobile-2);border-radius:var(--radius);-webkit-backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);background-color:var(--main-background-color);flex-direction:column;align-items:center;display:flex}@media screen and (min-width:640px){.container{max-width:var(--tablet-1)}}@media screen and (min-width:768px){.container{max-width:var(--tablet-2)}}@media screen and (min-width:886px){.container{max-width:var(--desktop-1)}}@media screen and (min-width:1024px){.container{max-width:var(--desktop-2)}}.header{padding:var(--mobile-padding);width:100%;align-items:center;gap:16px;display:flex}@media screen and (min-width:640px){.header{gap:135px}}@media screen and (min-width:768px){.header{padding:var(--tablet-padding)}}@media screen and (min-width:1024px){.header{padding:var(--desktop-padding);justify-content:space-between}}.logo{padding:9px 0;display:inline-block}@media screen and (min-width:768px){.logo{padding:12px 0}}@media screen and (min-width:1024px){.logo{padding:8px 0}}.search-form{width:100%;border-radius:var(--radius);background-color:var(--input-background-color);transition:color 250ms cubic-bezier(var(--cubic)),background-color 250ms cubic-bezier(var(--cubic)),box-shadow 250ms cubic-bezier(var(--cubic)),opacity 250ms cubic-bezier(var(--cubic));justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;display:flex;position:relative}@media screen and (min-width:768px){.search-form{gap:16px;padding:12px 16px}}@media screen and (min-width:1024px){.search-form{max-width:505px}}.search-form:hover,.search-form:focus-within{background-color:var(--input-background-active-color)}.search-form__input{width:100%;color:var(--text-black-color);background:0 0;border:none;outline:none;margin:0;padding:0}.search-form__input::-ms-input-placeholder{color:var(--text-dark-color)}.search-form__input::placeholder{color:var(--text-dark-color)}.search-form__button{min-width:16px;height:16px;transition:color 250ms cubic-bezier(var(--cubic)),background-color 250ms cubic-bezier(var(--cubic)),box-shadow 250ms cubic-bezier(var(--cubic)),opacity 250ms cubic-bezier(var(--cubic));justify-content:center;align-items:center;display:flex}@media screen and (min-width:768px){.search-form__button{min-width:24px;height:24px}}.search-form__icon{width:100%;color:var(--icon-color);transition:color 250ms cubic-bezier(var(--cubic)),background-color 250ms cubic-bezier(var(--cubic)),box-shadow 250ms cubic-bezier(var(--cubic)),opacity 250ms cubic-bezier(var(--cubic));display:block}@media screen and (min-width:768px){.search-form__icon{width:18px;height:18px}}.js-cross .search-form__icon:hover{color:var(--text-black-color)}.search-form__list{max-height:300px;background-color:var(--input-background-active-color);border-radius:var(--radius);z-index:10;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 4px 6px rgba(0,0,0,.1)}.search-form__item{cursor:pointer;color:var(--text-dark-color);padding:12px 16px}.search-form__item:hover,.search-form__item:focus{background-color:var(--input-background-color);color:var(--text-black-color)}.main-content{width:100%}.weather-section{padding:var(--mobile-padding);gap:var(--desktop-padding);flex-direction:column;justify-content:center;align-items:center;display:flex}@media screen and (min-width:768px){.weather-section{padding:var(--tablet-padding);gap:calc(var(--tablet-padding)*2)}}@media screen and (min-width:1024px){.weather-section{padding:var(--desktop-padding);align-items:flex-start;gap:var(--mobile-padding);flex-direction:row}}.city-info{width:100%;padding:0 calc(var(--mobile-padding)/2);gap:var(--mobile-padding);text-align:center;flex-direction:column;flex:1;display:flex}@media screen and (min-width:768px){.city-info{gap:var(--tablet-padding)}}@media screen and (min-width:1024px){.city-info{padding:calc(var(--mobile-padding)/2);gap:calc(var(--tablet-padding)*2)}}@media screen and (min-width:1280px){.city-info{gap:calc(var(--desktop-padding)*2)}}.city-info__main{gap:calc(var(--mobile-padding)/4);flex-direction:column;display:flex}@media screen and (min-width:768px){.city-info__main{gap:calc(var(--tablet-padding)/4)}}@media screen and (min-width:1024px){.city-info__main{gap:calc(var(--desktop-padding)/4)}}.city-info__city:first-letter,.city-info__text:first-letter,.city-info__timedate:first-letter{text-transform:uppercase}.city-info__city{font-size:16px;font-weight:700;line-height:1.25;display:inline-block}@media screen and (min-width:768px){.city-info__city{font-size:24px;line-height:1.33333}}.city-info__text{display:inline-block}.city-info__temperature{font-size:56px;font-weight:700;line-height:1}@media screen and (min-width:768px){.city-info__temperature{font-size:112px}}.city-info__weather{justify-content:center;align-items:center;gap:var(--min-step);display:flex}.city-info__weather-tumbnail{width:16px;height:16px}@media screen and (min-width:768px){.city-info__weather-tumbnail{width:24px;height:24px}}.more-info{gap:calc(var(--mobile-padding)/2);grid-template-columns:repeat(2,1fr);display:grid}@media screen and (min-width:375px){.more-info{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:768px){.more-info{gap:calc(var(--tablet-padding)/2)}}@media screen and (min-width:1024px){.more-info{gap:calc(var(--desktop-padding)/2)}}.card{width:98px;height:148px;padding:calc(var(--tablet-padding)/2);border-radius:var(--radius);background:var(--input-background-color);justify-content:flex-start;align-items:center;gap:calc(var(--tablet-padding)/2);transition:background-color 250ms cubic-bezier(var(--cubic));flex-direction:column;display:flex}@media (hover:hover) and (pointer:fine){.card:hover{background-color:var(--input-background-active-color)}}@media screen and (min-width:640px){.card{width:128px;height:148px;gap:var(--tablet-padding)}}@media screen and (min-width:768px){.card{width:158px;height:196px;gap:var(--mobile-padding);padding:16px}}.upper-card,.card__information{justify-content:flex-start;align-items:center;gap:calc(var(--tablet-padding)/2);flex-direction:column;display:flex}@media screen and (min-width:768px){.upper-card,.card__information{gap:calc(var(--desktop-padding)/2)}}.card__title{color:var(--text-black-color);font-size:12px;font-weight:700;line-height:1.33}@media screen and (min-width:768px){.card__title{font-size:16px;line-height:1.25}}@media screen and (min-width:768px){.card__thumb{width:var(--desktop-padding)}}.card__indicator{color:var(--text-black-color);font-size:22px;line-height:1}@media screen and (min-width:768px){.card__indicator{font-size:32px}}.card__value-span{display:inline-block}.card__bottom{width:100%;justify-content:flex-start;align-items:center;gap:calc(var(--tablet-padding)/4);flex-direction:column;display:flex}@media screen and (min-width:768px){.card__bottom{gap:calc(var(--desktop-padding)/4)}}.card__progress-bar{-webkit-mask:radial-gradient( circle at calc((var(--percent)*.96) + 3px),black 0px,black 3px,transparent 3px,transparent 5px,black 5px,black 5px );-webkit-mask:radial-gradient( circle at calc((var(--percent)*.96) + 3px),black 0px,black 3px,transparent 3px,transparent 5px,black 5px,black 5px );mask:radial-gradient( circle at calc((var(--percent)*.96) + 3px),black 0px,black 3px,transparent 3px,transparent 5px,black 5px,black 5px );width:100%;height:6px;background-color:var(--progress-background-color);transition:background-color 250ms cubic-bezier(var(--cubic));border-radius:3px;position:relative;overflow:hidden}.card:hover .card__progress-bar{background-color:var(--progress-background-center-color)}@media screen and (min-width:768px){.card__progress-bar{-webkit-mask:radial-gradient( circle at calc((var(--percent)*.94) + 4px),black 0px,black 4px,transparent 4px,transparent 6px,black 6px,black 6px );-webkit-mask:radial-gradient( circle at calc((var(--percent)*.94) + 4px),black 0px,black 4px,transparent 4px,transparent 6px,black 6px,black 6px );mask:radial-gradient( circle at calc((var(--percent)*.94) + 4px),black 0px,black 4px,transparent 4px,transparent 6px,black 6px,black 6px );height:8px;border-radius:4px}}.card__progress-bar>.card__progress-bar--inner{left:calc(var(--percent)*.96)}@media screen and (min-width:768px){.card__progress-bar>.card__progress-bar--inner{left:calc(var(--percent)*.94)}}.card__progress-bar.pressure{--percent:var(--percent-pressure)}.card__progress-bar.humidity{--percent:var(--percent-humidity)}.card__progress-bar.visibility{--percent:var(--percent-visibility)}.card__progress-bar--inner{width:6px;height:6px;background-color:var(--text-light-color);transition:left 250ms cubic-bezier(var(--cubic));transition:background-color 250ms cubic-bezier(var(--cubic));border-radius:50%;position:absolute}.card:hover .card__progress-bar--inner{background-color:var(--text-dark-color)}@media screen and (min-width:768px){.card__progress-bar--inner{width:8px;height:8px}}.card__bottom--status{width:100%;color:var(--indicator-color);text-align:center;text-transform:capitalize;font-size:12px;line-height:1.33333}.card__bottom--status-percents{width:100%;justify-content:space-between;align-items:center;display:flex}.card__bottom--status.percents{width:auto}.slider-section{justify-content:flex-start;align-items:flex-start;gap:var(--mobile-padding);padding:var(--mobile-padding);width:100%;flex-direction:column;display:flex}@media screen and (min-width:768px){.slider-section{gap:var(--tablet-padding);padding:var(--tablet-padding)}}@media screen and (min-width:1024px){.slider-section{gap:var(--desktop-padding);padding:var(--desktop-padding)}}.slider-heading{width:100%;justify-content:flex-start;align-items:baseline;gap:var(--mobile-padding);display:flex}@media screen and (min-width:768px){.slider-heading{gap:var(--tablet-padding)}}@media screen and (min-width:1024px){.slider-heading{gap:var(--desktop-padding)}}.slider-heading__title{text-align:center;color:#f5f4f4;font-size:16px;font-weight:700;line-height:1.25}@media screen and (min-width:768px){.slider-heading__title{font-size:24px;line-height:1.33333}}.slider-heading__menu{justify-content:flex-start;align-items:center;gap:var(--mobile-padding);display:flex}@media screen and (min-width:768px){.slider-heading__menu{gap:var(--tablet-padding)}}@media screen and (min-width:1024px){.slider-heading__menu{gap:var(--desktop-padding)}}.slider-heading__link{text-align:center;color:var(--slider-link-color);transition:color 250ms cubic-bezier(var(--cubic)),border-color 250ms cubic-bezier(var(--cubic));border-bottom:2px solid rgba(0,0,0,0);font-size:12px;font-weight:700;line-height:1.33333}@media screen and (min-width:768px){.slider-heading__link{font-size:16px;line-height:1.5}}.slider-heading__link.active{color:var(--text-light-color);border-color:var(--text-light-color)}.slider-heading__link:not(.active):hover{border-color:var(--slider-link-color)}.slider-wrapper{width:100%;justify-content:center;align-items:center;gap:var(--mobile-padding);color:var(--icon-color);flex-direction:row;display:flex}@media screen and (min-width:768px){.slider-wrapper{gap:var(--tablet-padding)}}@media screen and (min-width:1024px){.slider-wrapper{gap:var(--desktop-padding)}}.slider{width:100%;overflow:hidden}.have-right .slider{-webkit-mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--mobile-padding)),transparent 100% );-webkit-mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--mobile-padding)),transparent 100% );mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--mobile-padding)),transparent 100% )}@media screen and (min-width:768px){.have-right .slider{-webkit-mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--tablet-padding)),transparent 100% );-webkit-mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--tablet-padding)),transparent 100% );mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--tablet-padding)),transparent 100% )}}@media screen and (min-width:1024px){.have-right .slider{-webkit-mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--desktop-padding)),transparent 100% );-webkit-mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--desktop-padding)),transparent 100% );mask-image:linear-gradient( to right,black 0%,black calc(100% - var(--desktop-padding)),transparent 100% )}}.have-left .slider{-webkit-mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--mobile-padding)),transparent 100% );-webkit-mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--mobile-padding)),transparent 100% );mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--mobile-padding)),transparent 100% )}@media screen and (min-width:768px){.have-left .slider{-webkit-mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--tablet-padding)),transparent 100% );-webkit-mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--tablet-padding)),transparent 100% );mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--tablet-padding)),transparent 100% )}}@media screen and (min-width:1024px){.have-left .slider{-webkit-mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--desktop-padding)),transparent 100% );-webkit-mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--desktop-padding)),transparent 100% );mask-image:linear-gradient( to left,black 0%,black calc(100% - var(--desktop-padding)),transparent 100% )}}.have-right.have-left .slider{-webkit-mask:linear-gradient( to right,transparent 0px,black calc(var(--mobile-padding) + 1px),black calc(100% - var(--mobile-padding)),transparent 100% );-webkit-mask:linear-gradient( to right,transparent 0px,black calc(var(--mobile-padding) + 1px),black calc(100% - var(--mobile-padding)),transparent 100% );mask:linear-gradient( to right,transparent 0px,black calc(var(--mobile-padding) + 1px),black calc(100% - var(--mobile-padding)),transparent 100% )}@media screen and (min-width:768px){.have-right.have-left .slider{-webkit-mask:linear-gradient( to right,transparent 0px,black calc(var(--tablet-padding) + 1px),black calc(100% - var(--tablet-padding)),transparent 100% );-webkit-mask:linear-gradient( to right,transparent 0px,black calc(var(--tablet-padding) + 1px),black calc(100% - var(--tablet-padding)),transparent 100% );mask:linear-gradient( to right,transparent 0px,black calc(var(--tablet-padding) + 1px),black calc(100% - var(--tablet-padding)),transparent 100% )}}@media screen and (min-width:1024px){.have-right.have-left .slider{-webkit-mask:linear-gradient( to right,transparent 0px,black calc(var(--desktop-padding) + 1px),black calc(100% - var(--desktop-padding)),transparent 100% );-webkit-mask:linear-gradient( to right,transparent 0px,black calc(var(--desktop-padding) + 1px),black calc(100% - var(--desktop-padding)),transparent 100% );mask:linear-gradient( to right,transparent 0px,black calc(var(--desktop-padding) + 1px),black calc(100% - var(--desktop-padding)),transparent 100% )}}.slider__strip{justify-content:flex-start;align-items:center;gap:calc(var(--mobile-padding)/2);transform:translateX(var(--offset));transition:transform 250ms cubic-bezier(var(--cubic));flex-flow:row;display:flex}@media screen and (min-width:768px){.slider__strip{gap:calc(var(--tablet-padding)/2)}}@media screen and (min-width:1024px){.slider__strip{gap:calc(var(--desktop-padding)/2)}}.slider__button{min-width:40px;height:32px;cursor:pointer;background-color:var(--input-background-color);transition:background-color 250ms cubic-bezier(var(--cubic));border-radius:8px;justify-content:center;align-items:center;display:flex}@media screen and (min-width:768px){.slider__button{min-width:56px;height:48px}}.slider__button:disabled{cursor:not-allowed;opacity:.5}.slider__button:hover:enabled{background-color:var(--input-background-active-color)}.slider__item{width:100%;height:100%;background-color:var(--input-background-color);justify-content:center;align-items:center;gap:calc(var(--tablet-padding)/2);transition:background-color 250ms cubic-bezier(var(--cubic));border-radius:8px;flex-direction:column;padding:12px;display:flex}@media (hover:hover) and (pointer:fine){.slider__item:hover{background-color:var(--input-background-active-color)}}@media screen and (min-width:640px){.slider__item{flex-direction:row}}@media screen and (min-width:768px){.slider__item{gap:calc(var(--desktop-padding)/2);flex-direction:column}}@media screen and (min-width:886px){.slider__item{flex-direction:row}}.slider__date-time,.slider__temperature{text-wrap:nowrap;color:#202020;font-size:12px;font-weight:400;line-height:1.33333;display:inline-block}@media screen and (min-width:768px){.slider__date-time,.slider__temperature{font-size:16px;line-height:1.25}}@media screen and (min-width:768px){.slider__icon{width:32px;height:32px}}.footer{width:100%;text-align:center;border-radius:8px;flex-direction:column;gap:24px;padding:16px;display:flex}@media screen and (min-width:768px){.footer{padding:24px}}@media screen and (min-width:1024px){.footer{padding:32px}}.footer__copyright{text-align:center;color:var(--text-light-color);font-size:12px;font-weight:400;line-height:1.33333;display:inline-block}@media screen and (min-width:768px){.footer__copyright{font-size:16px;line-height:1.25}}.footer__link{-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-decoration:underline;display:inline-block}
/*# sourceMappingURL=index.7c02e65e.css.map */