.header,.weather{width:100%}.header{height:220px;padding:20px;background-repeat:no-repeat;background-size:cover;background-position:50%;display:flex;flex-direction:column-reverse;align-items:flex-end;justify-content:flex-end}@media screen and (max-width:768px){.header{height:150px;padding:5px}}.header__title{font-size:50px;align-self:center;color:#fff;font-weight:400;letter-spacing:20px;z-index:3}@media screen and (max-width:768px){.header__title{font-size:30px;letter-spacing:5px}}.header__link-logo{z-index:2}.header__logo{width:80px}@media screen and (max-width:768px){.header__logo{width:50px}}.header__background{position:absolute;top:0;left:0;width:100%;height:220px;background-color:#000;opacity:.3;z-index:1}@media screen and (max-width:768px){.header__background{height:150px}}.city-weather{text-decoration:none}.city-weather__block{height:150px;width:100%;box-shadow:0 7px 10px grey;display:flex;justify-content:center;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}@media screen and (max-width:768px){.city-weather__block{height:100px}}.city-weather__block:hover{background-color:#ccc}.city-weather__container{height:100%;width:500px;color:#000;padding:20px;display:flex;justify-content:center;align-items:center}@media screen and (max-width:768px){.city-weather__container{padding:10px}}.city-weather__header{font-size:20px;width:35%}@media screen and (max-width:768px){.city-weather__header{font-size:18px}}.city-weather__body{width:65%;display:flex;align-items:center;justify-content:center}.city-weather__body *{margin-right:15px}@media screen and (max-width:768px){.city-weather__body *{margin-right:10px}}.city-weather__weather-icon{width:30%}@media screen and (max-width:768px){.city-weather__weather-icon{width:50px}}.city-weather__temperature{width:30%;color:#1484df;font-size:30px}@media screen and (max-width:768px){.city-weather__temperature{font-size:25px}}.city-weather__weather-main{width:40%}.home{width:100%}.home__current-location-title{background-color:#000;color:#fff;height:50px;display:flex;align-items:center;justify-content:center}.home__current-location-block{width:100%}.home__h2{background-color:#000;color:#fff;height:50px}.city,.home__h2{display:flex;align-items:center;justify-content:center}.city{width:100%;max-width:1366px;flex-direction:column;padding:40px}@media screen and (max-width:768px){.city{padding:20px 10px}}.city-weather-details{display:flex;align-items:center;text-align:center;justify-content:space-between;border-bottom:2px solid rgba(0,0,0,.445)}.city-weather-details *{padding:5px}.city-weather-details p{margin-bottom:0}.city-weather-details__icon{width:50px;height:50px}.city-weather-details__datetime{text-align:left;width:90px}@media screen and (min-width:1367px){.city-weather-details__datetime{min-width:170px}}@media screen and (min-width:1367px){.city-weather-details{width:80%}}@media screen and (max-width:1366px){.city-weather-details{width:70%}}@media screen and (max-width:992px){.city-weather-details{width:90%}}@media screen and (max-width:768px){.city-weather-details{width:100%;overflow-x:auto}}.city-weather-details:last-child{border:none}.description,.humidity,.pressure,.temperature,.wind-deg,.wind-speed{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:75px;width:90px;white-space:nowrap}.description__name,.humidity__name,.pressure__name,.temperature__name,.wind-deg__name,.wind-speed__name{color:#1484df}.description{width:105px}.wind-deg__value{font-size:18px}.main{width:100%;justify-content:center}.main,.menu{display:flex}.menu{position:fixed;left:0;top:0;width:500px;height:100vh;z-index:99;align-items:flex-start;-webkit-transition:left .3s ease-in-out;transition:left .3s ease-in-out;-webkit-transform-origin:left;transform-origin:left}@media screen and (max-width:768px){.menu{width:100%;height:100%;background-color:#303030}}.menu__block{width:100%;height:100%;background-color:#303030;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);padding:30px;overflow:auto}@media screen and (max-width:768px){.menu__block{box-shadow:none}}.menu__open-btn{height:50px;padding:10px;background-color:#303030;border:none;outline:none}.menu__open-btn:hover{cursor:pointer}.menu__btn-line{background-color:#fff;width:30px;height:5px;margin-bottom:5px}.menu__btn-line:last-child{margin-bottom:0}.menu_hidden{left:-450px}@media screen and (max-width:768px){.menu_hidden{left:calc(-100% + 50px);background-color:transparent}}.search-form{width:100%;text-align:center;margin-bottom:30px}.search-input__input{background-color:#fff;border:none;padding:14px;font-size:1em;outline:none}.search-input__input,.suggestion{width:100%;height:40px;font-family:inherit;color:#000}.suggestion{display:flex;align-items:center;font-size:.9em;border-top:1px solid #000}.suggestion__city{width:70%;height:100%;background-color:#fff;border:none;display:flex;justify-content:space-between;padding:0 14px;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.suggestion__city:hover{opacity:.6}.suggestion__add-to-favorite{width:15%;height:100%;background-color:green;border:none;color:#fff;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.suggestion__add-to-favorite:hover{cursor:pointer;opacity:.6}.suggestion__close{width:15%;height:100%;background-color:#d80000;border:none;color:#fff;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.suggestion__close:hover{cursor:pointer;opacity:.6}.suggestion__country{color:grey}.fa-star,.fa-times{font-size:1.5em}.favorite-city{margin-top:20px;width:100%;height:40px;display:flex;align-items:center}.favorite-city__btn-city{height:100%;width:85%;padding:0 10px;line-height:40px;color:#000;background-color:#fff;font-family:inherit;font-size:.9em;outline:none;text-decoration:none;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.favorite-city__btn-city:hover{opacity:.6}.favorite-city__btn-remove{border:none;color:#fff;height:100%;width:15%;background-color:#d80000;font-size:1em;outline:none;padding-bottom:3px;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.favorite-city__btn-remove:hover{cursor:pointer;opacity:.6}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/*# sourceMappingURL=main.b1e62ce7.chunk.css.map */