@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins}button,input{font-family:inherit}.weather-app{height:100vh}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.layout{min-height:100vh;max-height:100%}.loader{display:flex;justify-content:center;align-items:center;font-size:50px;color:#fff;margin-top:100px}:root{--font-color--white: #fff}.header{width:100%;display:flex;justify-content:center;gap:38px;padding-top:40px}@media (max-width: 1200px){.header{gap:20px}}.header__form{width:45%}@media (max-width: 744px){.header__form{width:60%}}.search__input-container{display:flex;height:56px;border-radius:100px;color:#fff;overflow:hidden}@media (max-width: 1200px){.search__input-container{height:40px}}.search__input{border:none;width:80%;background:linear-gradient(to right,#fffc,#99999980);border-radius:100px 0 0 100px;padding-left:20px;font-size:16px}@media (max-width: 1200px){.search__input{font-size:14px}}@media (max-width: 744px){.search__input{font-size:10px}}.search__input:focus{outline-color:#000}.search__button{background:linear-gradient(to right,#3a3a3a99,#a0a0a066);color:#262626;font-size:18px;font-weight:400;border:none;cursor:pointer;width:20%;transition:background-color .2s ease}@media (max-width: 1200px){.search__button{font-size:14px}}@media (max-width: 744px){.search__button{font-size:10px}}.search__button:hover{background-color:#3a3a3a99}.search__city-coords{display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;color:#fff;width:8%;height:56px;border:none;border-radius:100px;background:linear-gradient(to right,#ffffff80,#0090ff80);cursor:pointer;transition:background-color .2s ease}@media (max-width: 1200px){.search__city-coords{height:40px;font-size:16px;width:9%}}@media (max-width: 744px){.search__city-coords{font-size:10px;width:20%}}@media (max-width: 1200px){.search__city-coords__icon{width:14px;height:14px}}@media (max-width: 744px){.search__city-coords__icon{width:10px;height:10px}}.search__city-coords:hover{background-color:#0090ffcc}.weather-info{display:flex;flex-direction:column;align-items:center}.weather-info__icon{width:80px;height:80px}@media (max-width: 1200px){.weather-info__icon{width:60px;height:60px}}@media (max-width: 744px){.weather-info__icon{width:40px;height:40px}}.weather-info__description{color:var(--font-color--white);font-size:30px}@media (max-width: 1200px){.weather-info__description{font-size:20px}}@media (max-width: 744px){.weather-info__description{font-size:16px}}.weather-info__country{color:var(--font-color--white);font-size:48px;font-weight:500}@media (max-width: 1200px){.weather-info__country{font-size:38px}}@media (max-width: 744px){.weather-info__country{font-size:20px}}.weather-info__city{color:var(--font-color--white);font-size:56px;font-weight:500}@media (max-width: 1200px){.weather-info__city{font-size:42px}}@media (max-width: 744px){.weather-info__city{font-size:24px}}.weather-info__temp{display:flex;align-items:center;gap:5px;color:var(--font-color--white);font-size:56px;font-weight:400;position:relative}@media (max-width: 1200px){.weather-info__temp{font-size:42px}}@media (max-width: 744px){.weather-info__temp{font-size:24px}}.info__button-temp{background:linear-gradient(to bottom,#3178fd33,#84acf54d);color:var(--font-color--white);width:50px;height:27px;border:none;border-radius:100px;transition:background-color .2s ease;cursor:pointer;position:absolute;transform:translate(220px) translateY(5px)}@media (max-width: 1200px){.info__button-temp{transform:translate(170px) translateY(5px)}}@media (max-width: 744px){.info__button-temp{transform:translate(110px) translateY(5px)}}.weather-history{display:flex;width:100%;justify-content:center;align-items:center;margin-top:40px}.weather-history__list{display:flex;gap:20px;overflow-x:auto;scrollbar-width:auto;width:50%}@media (max-width: 1200px){.weather-history__list{gap:15px}}@media (max-width: 1200px){.weather-history__list{gap:10px}}.weather-history__item{padding:5px 18px;display:flex;flex-direction:column;justify-content:center;background-color:#ffffffbf;width:120px;height:117px;border-radius:25px;position:relative;cursor:pointer}@media (max-width: 1200px){.weather-history__item{font-size:14px}}@media (max-width: 744px){.weather-history__item{width:50%;height:90px;font-size:12px}}.weather-history__item:hover{background-color:#e1e1e1d0}.weather-history__item:active{background-color:#9b9b9bd0}.weather-history__item-temp{display:flex;align-items:center;justify-content:space-between}.weather-history__item-icon{width:40px;height:40px}@media (max-width: 1200px){.weather-history__item-icon{width:30px;height:30px}}@media (max-width: 744px){.weather-history__item-icon{width:20px;height:20px}}.weather-history__item-delete{position:absolute;bottom:95px;right:0;color:#fff}@media (max-width: 744px){.weather-history__item-delete{bottom:70px}}.weather-history__item-delete:hover{color:#9b9b9bd0}.hourly-forecast__info{width:50%;height:calc(100% + 50px);color:#fff;border-radius:0 0 15px 15px}@media (max-width: 1200px){.hourly-forecast__info{width:80%}}.hourly-forecast__info-additional{margin:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;padding-inline:20px;gap:20px}.hourly-forecast__info-additional__block{display:flex;flex-direction:column;width:30%;min-height:155px;border-radius:10px}@media (max-width: 744px){.hourly-forecast__info-additional__block{width:45%}}.hourly-forecast__info-additional__block-label{display:flex;gap:4px;margin:10px 0 0 10px;font-size:12px}.hourly-forecast__info-additional__block-value{margin-left:10px;font-size:24px}.hourly-forecast__info-additional__block-subtext{font-size:12px;margin:auto 0 10px 10px}.wind__info{display:flex;flex-direction:column;font-size:12px;width:30%;min-height:50px;border-radius:10px}@media (max-width: 744px){.wind__info{width:45%}}.wind__info-label{display:flex;align-items:center;margin:10px 0 0 10px;gap:3px}.wind__info-subtitle{margin:0 0 10px 10px}.wind-compas{align-self:center;position:relative;width:100px;height:100px;border:1px dotted rgba(255,255,255,.2);border-radius:50%;display:flex;justify-content:center;align-items:center;background:radial-gradient(circle at center,#ffffff1f,#ffffff0a);box-shadow:inset 0 0 8px #fff3}.wind-compas__arrow{height:45%;width:2px;background-color:#000;border-radius:2px;transition:transform .5s ease}.wind-compas__arrow:after{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid black}.wind-compas__north{position:absolute;top:4px;left:50%;transform:translate(-50%)}.wind-compas__east{position:absolute;right:4px;top:50%;transform:translateY(-50%)}.wind-compas__south{position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.wind-compas__west{position:absolute;left:4px;top:50%;transform:translateY(-50%)}.forecast-hourly{display:flex;justify-content:center;align-items:center;flex-direction:column}.forecast-hourly__wrapper{display:flex;overflow-x:auto;scrollbar-width:auto;width:50%;margin-top:50px;border-radius:15px 15px 0 0}@media (max-width: 1200px){.forecast-hourly__wrapper{width:80%}}.forecast-hourly__item{padding:8px 14px;display:flex;flex-direction:column;justify-content:center;align-items:center;width:79px;height:136px;font-size:18px;font-weight:400;cursor:pointer}.forecast-hourly__item:hover{background-color:#cbcbcb45}.forecast-hourly__item-active{font-size:18px;font-weight:400;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 14px;width:79px}.forecast-hourly__item-icon{width:30px;height:30px}.forecast-hourly__item-rain{display:flex;align-items:center;font-size:10px}.forecast-hourly__item-temp{display:flex;align-items:center;text-align:center;justify-content:center;font-size:16px;width:48px}