@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&family=Shizuru&display=swap);*{box-sizing:border-box;font-family:Roboto,sans-serif;margin:0;padding:0}body{-webkit-backdrop-filter:hue-rotate(305deg) blur(5px) brightness(1.3);backdrop-filter:hue-rotate(305deg) blur(5px) brightness(1.3);background-image:url(/static/media/foggy.30c40a917f949c43f26b.jpeg);background-position:top;background-size:cover}.App{align-items:center;display:flex;height:100vh;justify-content:center;width:100%}@media screen and (max-width:900px){.App{background:#5c5c5c;height:auto}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weatherBox{background-position:50%;background-size:cover;display:flex;height:80vh;position:relative;width:75%}@media screen and (max-width:900px){.weatherBox{background-position:top;background-size:cover;height:100vh;width:100%}}.weatherBox .sign{color:#fff;font-family:Open Sans,sans-serif;font-size:.9em;font-weight:700;left:4em;position:absolute;top:3em}@media screen and (max-width:900px){.weatherBox .sign{color:#202020;left:auto;right:1em;top:.5em}}.weatherBox .rightInfo{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:rgba(26,32,30,.671);height:100%;overflow:overlay;position:absolute;right:0;width:40%}@media screen and (max-width:900px){.weatherBox .rightInfo{bottom:0;height:60%;width:100%}}.weatherBox .rightInfo .searchBox{align-items:flex-end;display:flex;height:5em;justify-content:space-between;width:100%}@media screen and (max-width:500px){.weatherBox .rightInfo .searchBox{height:3.5em}}.weatherBox .rightInfo .searchBox .inputBox{align-items:flex-end;display:flex;font-size:2em}.weatherBox .rightInfo .searchBox .inputBox input{background:transparent;border:none;border-bottom:.1px solid hsla(0,0%,100%,.247);color:#fff;font-size:.52em;font-weight:300;margin-left:30%;outline:none;padding:8px 2px;width:150px}.weatherBox .rightInfo .searchBox .searchIconBox{align-items:center;background:#579092;display:flex;height:5em;justify-content:center;width:5em}@media screen and (max-width:500px){.weatherBox .rightInfo .searchBox .searchIconBox{height:3.5em;width:3.5em}}.weatherBox .rightInfo .searchBox .searchIconBox button{background:transparent;border:none;cursor:pointer;height:100%;outline:none;transition:.4s;width:100%}.weatherBox .rightInfo .searchBox .searchIconBox button:hover{background:#4e8386}.weatherBox .rightInfo .searchBox .searchIconBox button img{width:25px}.weatherBox .rightInfo .moreInfo{color:#fff;display:flex;flex-direction:column;height:calc(100% - 5em);width:100%}.weatherBox .rightInfo .moreInfo .moreInfoTop{display:flex;flex:4 1;flex-direction:column;padding:10px 10%}.weatherBox .rightInfo .moreInfo .moreInfoTop>li{align-items:center;cursor:pointer;display:flex;font-weight:200;padding:.9em 0;transition:.4s}.weatherBox .rightInfo .moreInfo .moreInfoTop>li:hover{color:#6dbdb6}.weatherBox .rightInfo .moreInfo .moreInfoTop>li:last-child{border-bottom:.1px solid hsla(0,0%,100%,.247)}.weatherBox .rightInfo .moreInfo .moreInfoBottom{display:flex;flex:6 1;flex-direction:column;padding:.9em 10%}.weatherBox .rightInfo .moreInfo .moreInfoBottom div{align-items:flex-start;display:flex;height:45px;width:100%}.weatherBox .rightInfo .moreInfo .moreInfoBottom ul{display:flex;flex-direction:column;font-weight:200}.weatherBox .rightInfo .moreInfo .moreInfoBottom ul>li{align-items:center;display:flex;flex:1 1;justify-content:space-between;padding:.9em 0}.weatherBox .rightInfo .moreInfo .moreInfoBottom ul>li:last-child{border-bottom:.1px solid hsla(0,0%,100%,.247)}.weatherBox .rightInfo .moreInfo .moreInfoBottom ul>li p:last-child{font-weight:400}.weatherBox .mainTemp{align-items:center;bottom:0;color:#fff;display:flex;height:14em;left:0;padding-left:3.5em;position:absolute;width:100%}@media screen and (max-width:900px){.weatherBox .mainTemp{color:#202020;height:8em;padding-left:.5em;top:0}}.weatherBox .mainTemp .mainTempH1{font-size:6em;font-weight:400;letter-spacing:-4px;margin-right:5px}@media screen and (max-width:500px){.weatherBox .mainTemp .mainTempH1{font-size:5em}}.weatherBox .mainTemp .cityName h1{font-size:2.5em;font-weight:400;margin-top:5px}@media screen and (max-width:500px){.weatherBox .mainTemp .cityName h1{font-size:2em}}.weatherBox .mainTemp .cityName h1 span{font-size:.4em;font-weight:300;margin-left:2px}.weatherBox .mainTemp .cityName p{font-size:.8em;font-weight:300;line-height:.7;margin-left:3px}
/*# sourceMappingURL=main.13ca3d6e.css.map*/