@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap";.city-input{width:fit-content;display:flex;column-gap:13px;align-items:center;position:relative;border-bottom:3px solid rgba(255,255,255,.8)}.city-input__input{border:none;background:none;outline:none;font-size:48px;font-weight:700;text-align:center;width:230px}.city-input__btn{border:none;background:none;outline:none;cursor:pointer}.current-date__wrapper{position:absolute;width:100%;left:0;bottom:-100%;display:flex;justify-content:space-between;font-size:16px;text-align:center}@media (max-width: 600px){.current-date__wrapper{bottom:-45px}}.container{min-height:610px;padding:25px 75px;border-radius:40px;border:5px solid #FFF;background:rgba(255,255,255,.19);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);display:flex;flex-direction:column;align-items:center}@media (max-width: 600px){.container{width:unset;border:none;background:none;padding:10px}}.app{width:100vw;min-height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(117deg,#FCDDBC -2.01%,#B8D8BA 102.5%)}.select-city,.error{margin-top:100px;display:flex;align-items:center}.select-city img,.error img{width:40px}@media (max-width: 500px){.select-city{text-align:right}}.current-weather{display:flex;flex-direction:column;align-items:center;position:relative}.current-weather__icon{height:121px}.current-weather__temperature{margin-top:10px;font-size:64px;font-weight:400}.current-weather__max-min{display:flex;column-gap:40px}.current-weather__max-min h3{font-size:40px;font-weight:300}.current-weather__max-min h3 img{height:30px}.current-weather__max-min h3:last-child img{transform:rotate(180deg)}.current-weather__conditions{margin-top:10px;font-size:50px;font-weight:400;max-width:270px;text-align:center}.next-weather-icon{position:absolute;top:50%;transform:translateY(-50%);right:-75px}.display-current-weather{display:grid;grid-template-columns:200px auto 200px;justify-content:center;align-items:center;padding-top:30px;padding-bottom:16px}@media (max-width: 900px){.display-current-weather{grid-template-columns:auto}}.additional-info{width:fit-content;position:relative}.additional-info__wrapper{padding:13px 22px;border-radius:20px;border:2px solid #FFF;display:grid;grid-template:auto auto/auto auto;gap:8px 29px;transition:.4s opacity}.additional-info__item{display:flex;flex-direction:column;align-items:center}.additional-info__icon{height:33px}.additional-info__text{font-size:14px;font-weight:300;max-width:38px;text-align:center}.additional-info__eye{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.1s opacity;cursor:pointer}.additional-info__eye:hover+.additional-info__lock{box-shadow:0 0 20px #fffc}.additional-info__lock{position:absolute;top:-10px;right:-10px;width:20px;transition:.3s opacity}.next-weather{display:flex;flex-direction:column;align-items:center;justify-self:end}.next-weather__icon{width:78px}.next-weather__temperature{font-size:40px;font-style:normal;font-weight:400}.next-weather__divider{margin-top:2px;margin-bottom:4px;width:75px;border:1px solid rgba(255,255,255,.8)}.next-weather__time{text-align:center;font-size:24px;font-style:normal;font-weight:400}.next-weather .temperature:after{top:0}.spinner{width:150px;height:150px;margin:auto;animation:spin 6s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.forecast{padding-top:7px;display:flex;justify-content:center;align-items:center;column-gap:20px;flex-wrap:wrap;border-top:3px solid rgba(255,255,255,.6)}.forecast-item{display:flex;flex-direction:column;align-items:center;justify-content:space-between}.forecast-item__day{font-size:24px;font-style:normal;font-weight:300}.forecast-item__icon{width:53px}.forecast-item__temp{margin-top:8px;font-size:16px;font-style:normal;font-weight:300}@media (max-width: 500px){.forecast-item__day{font-size:20px}.forecast-item__icon{width:40px}.forecast-item__temp{font-size:14px}}*{box-sizing:border-box;padding:0;margin:0;font-family:Inter,sans-serif;color:#65555c}.temperature{position:relative}.temperature:after{content:"";display:block;width:8px;height:8px;border:2px solid #65555C;border-radius:100%;position:absolute;top:5px;right:-9px}.temperature-small:after{width:4px;height:4px;border-width:1px;top:2px;right:-6px}