@font-face{font-family:"Lato";src:url(/weather-app/static/media/Lato-Regular.faacec1c.ttf) format("truetype");font-style:normal;font-weight:400}:root{--border-radius:8px;--color-text:#fff;--color-background-sun:#498cec;--color-background-rain:#7290b9;--color-select-background:#fff;--color-translucent-text:hsla(0,0%,100%,0.4);--color-translucent-border:hsla(0,0%,100%,0.4);--color-translucent-background:hsla(0,0%,100%,0.2)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Lato",sans-serif}.weather-app{display:flex;flex-direction:column;place-content:space-between;width:100%;min-height:100vh;overflow:hidden;color:#fff;color:var(--color-text);background-color:#498cec;background-color:var(--color-background-sun)}.weather-app.rain{background-color:#7290b9;background-color:var(--color-background-rain)}header{place-content:space-between}header,main{display:flex}main{align-items:center;justify-content:center;flex-direction:column}@media (max-width:550px){header{padding:19px 19px 0}footer{display:grid;grid-template-columns:1fr 1fr;grid-row-gap:35px;padding:0 24px 48px}}@media (min-width:550px) and (max-width:900px){*{font-size:6px}header{padding:75px 50px 0}header .sub-left-header{position:absolute}footer{display:flex;place-content:space-between;padding:0 50px 120px}}@media (min-width:900px){header{padding:75px 100px 0}footer{display:flex;place-content:space-between;padding:0 100px 120px}}.city-name{font-weight:400}.sub-left-header{display:flex}.sub-left-header>span{line-height:20px;color:var(--color-translucent-text);display:flex;align-items:center;margin-top:9px;margin-right:30px;cursor:pointer}.sub-left-header>span img{width:15px;height:21px;margin-right:11px}@media (max-width:550px){.city-name{font-size:30px}.sub-left-header{position:absolute;width:100vw}.sub-left-header>span{font-size:15px}}@media (min-width:550px) and (max-width:900px){.city-name{font-size:30px}.sub-left-header{position:absolute}.sub-left-header>span{font-size:15px}}@media (min-width:900px){.city-name{font-size:50px}.sub-left-header>span{font-size:18px}}.left-header{position:relative;width:100%}form{display:flex;place-content:space-between;align-items:center;background-color:var(--color-select-background);border-radius:var(--border-radius)}form input{width:90%;color:#000}form button,form input{border:none;outline:none}form button{font-family:"Lato";color:var(--color-background-sun);background-color:var(--color-select-background);cursor:pointer}.cities-list{position:absolute;overflow:auto;display:flex;flex-direction:column;left:0;background-color:#fff;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.cities-list>span{color:#000;cursor:pointer}.cities-list>span:hover{background-color:rgba(50,50,50,.19607843137254902)}@media (max-width:550px){.left-header,form{height:53px}form{position:absolute;width:calc(100vw - 36px);padding:18px}.cities-list{width:100%;max-height:115px;top:40px}.cities-list>span{font-size:12px;padding:12px}form button,form input{font-size:15px}}@media (min-width:500px) and (max-width:900px){.left-header,form{height:97px}form{position:absolute;width:calc(100vw - 38px);padding:32px}.cities-list{width:100%;max-height:126px;top:85px}.cities-list>span{font-size:20px;padding:20px}form button,form input{font-size:30px}}@media (min-width:900px){.left-header,form{height:97px}form{width:579px;padding:32px}.cities-list{width:579px;max-height:126px;top:85px}.cities-list>span{font-size:20px;padding:20px}form button,form input{font-size:30px}}.unit{display:flex;overflow:hidden;width:77px;height:29px;border:1px solid var(--color-translucent-border);border-radius:var(--border-radius)}.unit:before{content:"°";position:absolute}.unit:before,.unit button{font-size:18px;color:var(--color-translucent-text)}.unit button{display:flex;align-items:center;justify-content:center;width:50%;font-family:"Lato";background-color:var(--color-background);outline:none;border:none;cursor:pointer;transition:background-color .5s,color .5s}.rain .unit button{background-color:#7290b9}.unit.celsius button:first-child,.unit.fahrenheit button:last-child{color:var(--color-text);background-color:var(--color-translucent-background)}@media (max-width:550px){.unit:before{right:105px}}@media (min-width:550px) and (max-width:900px){.unit:before{right:105px}}@media (min-width:900px){.unit:before{right:185px}}.weather{display:flex;align-items:center;justify-content:center}@media (max-width:550px){.weather{font-size:120px}.weather img{width:140px}.weather-description{font-size:18px}}@media (min-width:500px) and (max-width:900px){.weather{font-size:150px}.weather img{width:170px}.weather-description{font-size:20px}}@media (min-width:900px){.weather{font-size:180px}.weather img{width:200px}.weather-description{font-size:25px}}.weather-detail{display:flex;flex-direction:column}.detail-name{color:var(--color-translucent-text)}@media (max-width:500px){.weather-detail .detail-name{font-size:15px;padding-bottom:2px}.weather-detail .detail{font-size:18px}}@media (min-width:500px) and (max-width:900px){.weather-detail .detail-name{padding-bottom:5px;font-size:15px}.weather-detail .detail{font-size:18px}}@media (min-width:900px){.weather-detail .detail-name{padding-bottom:10px;font-size:18px}.weather-detail .detail{font-size:25px}}
/*# sourceMappingURL=main.a2b0a4a5.chunk.css.map */