body,html{box-sizing:border-box;margin:0;padding:0}.weatherArea{display:flex;width:auto}.about{background-color:#0f044c;color:#fff;height:70vh;padding:50px 10px;width:100wh}.about h1,.about h3{text-align:center}.nopages{align-items:center;background-color:#0f044c;color:#fff;display:flex;flex-direction:column;height:85vh;justify-content:center;width:100%}.nopages h1{font-size:50px;margin:0 0 10px;text-align:center}.nopages p{font-size:36px;margin:0;text-align:center}@media screen and (max-width:800px){.about h1{font-size:22px;padding:0 10px}.about h3{font-size:12px;padding:0 20px}}@media screen and (max-width:450px){.about h1{font-size:20px;padding:0 10px}.about h3{font-size:10px;padding:0 20px}}.footerbar{align-items:center;background-color:#141e61;bottom:0;display:flex;height:50px;justify-content:center;position:relative;width:100wh}.footerbar p{color:#eee;font-size:16px;text-align:center}nav{align-items:center;background-color:#141e61;height:60px;justify-content:right;padding:0 200px 0 0;width:100wh}nav,nav ul{display:flex}nav ul{list-style:none}nav ul li{padding:0 10px}nav ul li a{color:#eee;font-size:20px;text-decoration:none}@media screen and (max-width:800px){nav{justify-content:center;padding:0 50px}}@media screen and (max-width:450px){nav{justify-content:center;padding:0}nav ul li a{font-size:12px}}.weatherbg{align-items:center;background-color:#000;display:flex;flex-wrap:wrap;height:80vh;justify-content:center;width:100%}.weatherbg .weatherbox{background-color:#0f044c;border-radius:15px;box-sizing:border-box;display:flex;height:auto;position:relative;width:auto}.weatherbg .weatherbox .arrow{border-color:#0000 #0000 #0000 #fff;border-style:solid;border-width:8px 10px;position:absolute;right:20px;top:220px}.weatherbg .weatherbox .left{display:flex;flex-direction:column;width:550px}.weatherbg .weatherbox .left .top-in-left{display:flex;flex:1 1 75%;width:100%}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop{color:#eee;flex:1 1 40%;padding:60px 0 0 70px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .temperature{font-size:70px;margin:0;padding:0}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .city{font-size:20px;margin:0;padding:5px 0 5px 10px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .date{font-size:16px;margin:0;padding:0 0 5px 10px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .precipitation{font-size:16px;margin:0;padding:0 0 0 10px}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop{align-items:center;display:flex;flex:1 1 60%;flex-direction:column;justify-content:center}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox{height:180px;width:180px}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .cloud-in-weather{transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather{opacity:.9;transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .rain-in-weather{transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather{opacity:.9;transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .suncloud-in-weather{transform:scale(1.4) translate(-10px,40px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .sun-in-weather{transform:scale(1.6) translate(-10px,90px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thunderrain-in-weather{transform:scale(1.5) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundersun-in-weather{transform:scale(1.6) translate(-20px,30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moon-in-weather{transform:scale(1.5) translate(-10px,10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .mooncloud-in-weather,.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moonrain-in-weather{transform:scale(1.2) translateY(-20px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundermoon-in-weather{opacity:.9;transform:scale(1.2) translateY(-20px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .overview{color:#eee;font-size:12px;transform:translateY(-20px)}.weatherbg .weatherbox .left .bottom-in-left{flex:1 1 25%;width:100%}.weatherbg .weatherbox .left .bottom-in-left .tip{color:#eee;font-size:16px;margin:0;padding:0 80px}.weatherbg .weatherbox .right{border-left:8px solid #f0f0e4;box-sizing:border-box;overflow:hidden;transition-duration:2s;width:10px}.weatherbg .weatherbox .right label{cursor:pointer;height:100%;position:relative;width:100%}.weatherbg .weatherbox .right label input{display:none}.weatherbg .weatherbox .right label input:checked~.bottombox,.weatherbg .weatherbox .right label input:checked~.topbox{opacity:0;transition-duration:2s}.weatherbg .weatherbox .right label input:checked~.wholebox,.weatherbg .weatherbox .right label input:not(:checked)~.bottombox,.weatherbg .weatherbox .right label input:not(:checked)~.topbox{opacity:1;transition-duration:2s}.weatherbg .weatherbox .right label input:not(:checked)~.wholebox{opacity:0;transition-duration:2s}.weatherbg .weatherbox .right label .wholebox{box-sizing:border-box;height:440px;left:0;opacity:0;position:absolute;top:0;width:100%}.weatherbg .weatherbox .right label .wholebox h6{color:#fff;left:50px;margin:0;opacity:0;padding:0;position:absolute;top:50px;transition-duration:3s;white-space:nowrap}.weatherbg .weatherbox .right label .topbox{box-sizing:border-box;height:auto;position:relative;width:100%}.weatherbg .weatherbox .right label .topbox h6{color:#fff;left:50px;margin:0;opacity:0;padding:0;position:absolute;top:50px;transition-duration:3s;white-space:nowrap}.weatherbg .weatherbox .right label .bottombox{height:auto;position:relative;width:auto}.weatherbg .weatherbox .right label .bottombox h6{color:#fff;left:50px;margin:0;opacity:0;padding:0;position:absolute;top:5px;transition-duration:3s;white-space:nowrap}.weatherbg .weatherbox .right:hover{border-left:8px solid #f0f0e400;transition-duration:2s;width:600px}.weatherbg .weatherbox .right:hover .topbox h6,.weatherbg .weatherbox .right:hover .topbox svg circle{opacity:1}.weatherbg .weatherbox .right:hover .topbox svg circle:first-child{transition-delay:.2s}.weatherbg .weatherbox .right:hover .topbox svg circle:nth-child(3){transition-delay:.4s}.weatherbg .weatherbox .right:hover .topbox svg circle:nth-child(5){transition-delay:.6s}.weatherbg .weatherbox .right:hover .topbox svg circle:nth-child(7){transition-delay:.8s}.weatherbg .weatherbox .right:hover .topbox svg circle:nth-child(9){transition-delay:1s}.weatherbg .weatherbox .right:hover .topbox svg circle:nth-child(11){transition-delay:1.2s}.weatherbg .weatherbox .right:hover .topbox svg circle:nth-child(13){transition-delay:1.4s}.weatherbg .weatherbox .right:hover .topbox svg text{opacity:1}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(2){transition-delay:.2s}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(4){transition-delay:.4s}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(6){transition-delay:.6s}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(8){transition-delay:.8s}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(10){transition-delay:1s}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(12){transition-delay:1.2s}.weatherbg .weatherbox .right:hover .topbox svg text:nth-child(14){transition-delay:1.4s}.weatherbg .weatherbox .right:hover .topbox svg polyline{opacity:1;transition-duration:4s}.weatherbg .weatherbox .right:hover .bottombox .dayweather,.weatherbg .weatherbox .right:hover .bottombox h6{opacity:1}.weatherbg .weatherbox .right:hover .bottombox .dayweather:first-child{transition-delay:.2s}.weatherbg .weatherbox .right:hover .bottombox .dayweather:nth-child(2){transition-delay:.4s}.weatherbg .weatherbox .right:hover .bottombox .dayweather:nth-child(3){transition-delay:.6s}.weatherbg .weatherbox .right:hover .bottombox .dayweather:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:hover .bottombox .dayweather:nth-child(5){transition-delay:1s}.weatherbg .weatherbox .right:hover .bottombox .dayweather:nth-child(6){transition-delay:1.2s}.weatherbg .weatherbox .right:hover .bottombox .dayweather:nth-child(7){transition-delay:1.4s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex,.weatherbg .weatherbox .right:hover .wholebox h6{opacity:1}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:first-child{transition-delay:.2s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:nth-child(2){transition-delay:.4s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:nth-child(3){transition-delay:.6s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:nth-child(5){transition-delay:1s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:nth-child(6){transition-delay:1.2s}.weatherbg .weatherbox .right:hover .wholebox .dayuvindex:nth-child(7){transition-delay:1.4s}.weatherbg .weatherbox .right:hover .wholebox td{opacity:1}.weatherbg .weatherbox .right:hover .wholebox td:first-child{transition-delay:.2s}.weatherbg .weatherbox .right:hover .wholebox td:nth-child(2){transition-delay:.4s}.weatherbg .weatherbox .right:hover .wholebox td:nth-child(3){transition-delay:.6s}.weatherbg .weatherbox .right:hover .wholebox td:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:hover .wholebox td:nth-child(5){transition-delay:1s}.weatherbg .weatherbox .right:hover~.arrow{animation:arrowgo 3s forwards}.weatherbg .weatherbox .right:not(:hover){transition-duration:4s}.weatherbg .weatherbox .right:not(:hover) .topbox h6{opacity:0;transition-duration:5s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle{opacity:0}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(13){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(11){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(9){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(7){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(5){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(3){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:first-child{transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text{opacity:0}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(14){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(12){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(10){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(8){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(6){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(4){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(2){transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg polyline{opacity:0;transition-duration:4s}.weatherbg .weatherbox .right:not(:hover) .bottombox h6{opacity:0;transition-duration:5s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather{opacity:0}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(7){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(6){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(5){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(3){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(2){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:first-child{transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox h6{opacity:0;transition-duration:5s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex{opacity:0}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(7){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(6){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(5){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(3){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(2){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:first-child{transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox td{opacity:0}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(5){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(4){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(3){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(2){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:first-child{transition-delay:1s}.weatherbg .weatherbox .right:not(:hover)~.arrow{animation:arrowback 5s forwards}@media screen and (max-width:1180px){.weatherbg .weatherbox{height:400px}.weatherbg .weatherbox .arrow{top:200px}.weatherbg .weatherbox .left{width:400px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop{padding:60px 0 0 40px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .temperature{font-size:56px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .city{font-size:18px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .date,.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .precipitation{font-size:14px}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox{transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather{opacity:.9;transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .rain-in-weather{transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather{opacity:.9;transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .suncloud-in-weather{transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .sun-in-weather{transform:scale(1.4) translateY(70px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thunderrain-in-weather{transform:scale(1.3) translateY(10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundersun-in-weather{transform:scale(1.4) translate(-10px,10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moon-in-weather{transform:scale(1.3) translate(0)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .mooncloud-in-weather,.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moonrain-in-weather{transform:scale(1) translateY(-50px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundermoon-in-weather{opacity:.9;transform:scale(1) translateY(-50px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .overview{transform:translateY(-50px)}.weatherbg .weatherbox .left .bottom-in-left .tip{font-size:12px;padding:0 40px}.weatherbg .weatherbox .right:hover{width:400px}}@media screen and (max-width:800px){.weatherbg{height:100%;padding:50px 0 100px}.weatherbg .weatherbox{flex-direction:column;height:auto;width:360px}.weatherbg .weatherbox .arrow{display:none}.weatherbg .weatherbox .left{height:400px;width:360px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop{padding:60px 0 0 40px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .temperature{font-size:56px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .city{font-size:18px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .date,.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .precipitation{font-size:14px}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox{transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather{opacity:.9;transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .rain-in-weather{transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather{opacity:.9;transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .suncloud-in-weather{transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .sun-in-weather{transform:scale(1.4) translateY(70px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thunderrain-in-weather{transform:scale(1.3) translateY(10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundersun-in-weather{transform:scale(1.4) translate(-10px,10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moon-in-weather{transform:scale(1.3) translate(0)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .mooncloud-in-weather,.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moonrain-in-weather{transform:scale(1) translateY(-50px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundermoon-in-weather{opacity:.9;transform:scale(1) translateY(-50px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .overview{transform:translateY(-50px)}.weatherbg .weatherbox .left .bottom-in-left .tip{font-size:12px;padding:0 40px}.weatherbg .weatherbox .right{border-left:none;height:400px;width:360px}.weatherbg .weatherbox .right .bottombox h6,.weatherbg .weatherbox .right .topbox h6,.weatherbg .weatherbox .right .wholebox,.weatherbg .weatherbox .right .wholebox h6{opacity:1}.weatherbg .weatherbox .right:not(:hover){transition-duration:4s}.weatherbg .weatherbox .right:not(:hover) .topbox h6{opacity:1;transition-duration:5s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle{opacity:1}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(13){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(11){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(9){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(7){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(5){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:nth-child(3){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg circle:first-child{transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text{opacity:1}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(14){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(12){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(10){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(8){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(6){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(4){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .topbox svg text:nth-child(2){transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .topbox svg polyline{opacity:1;transition-duration:4s}.weatherbg .weatherbox .right:not(:hover) .bottombox h6{opacity:1;transition-duration:5s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather{opacity:1}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(7){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(6){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(5){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(3){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:nth-child(2){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .bottombox .dayweather:first-child{transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox h6{opacity:1;transition-duration:5s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex{opacity:1}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(7){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(6){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(5){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(4){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(3){transition-delay:1s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:nth-child(2){transition-delay:1.2s}.weatherbg .weatherbox .right:not(:hover) .wholebox .dayuvindex:first-child{transition-delay:1.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox td{opacity:1}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(5){transition-delay:.2s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(4){transition-delay:.4s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(3){transition-delay:.6s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:nth-child(2){transition-delay:.8s}.weatherbg .weatherbox .right:not(:hover) .wholebox td:first-child{transition-delay:1s}}@media screen and (max-width:450px){.weatherbg .weatherbox{width:300px}.weatherbg .weatherbox .left{height:400px;width:300px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop{padding:60px 0 0 30px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .temperature{font-size:42px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .city{font-size:16px}.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .date,.weatherbg .weatherbox .left .top-in-left .left-in-lefttop .precipitation{font-size:12px}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .cloud-in-weather{transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather{opacity:.9;transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightcloud-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .rain-in-weather{transform:scale(1) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather{opacity:.9;transform:scale(.9) translateY(0)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .nightrain-in-weather .circle{background:#bebebe}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .suncloud-in-weather{transform:scale(1.2) translateY(30px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .sun-in-weather{transform:scale(1.4) translateY(70px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thunderrain-in-weather{transform:scale(1.3) translateY(10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundersun-in-weather{transform:scale(1.4) translate(-10px,10px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moon-in-weather{transform:scale(1.3) translate(0)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .mooncloud-in-weather{transform:scale(.9) translateY(-60px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .moonrain-in-weather{transform:scale(1) translateY(-50px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .iconbox .thundermoon-in-weather{opacity:.9;transform:scale(1) translateY(-50px)}.weatherbg .weatherbox .left .top-in-left .right-in-lefttop .overview{font-size:8px;transform:translateY(-60px)}.weatherbg .weatherbox .left .bottom-in-left .tip{font-size:12px;padding:0 40px}.weatherbg .weatherbox .right{border-left:none;height:400px;width:300px}.weatherbg .weatherbox .right label .bottombox h6,.weatherbg .weatherbox .right label .topbox h6{font-size:10px;left:15px;opacity:1}.weatherbg .weatherbox .right label .wholebox{opacity:1}.weatherbg .weatherbox .right label .wholebox h6{font-size:10px;left:15px;opacity:1}}@keyframes arrowgo{to{opacity:.5;transform:rotate(180deg)}}@keyframes arrowback{0%{opacity:.5;transform:rotate(180deg)}to{opacity:1;transform:rotate(0deg)}}.optbg{background-color:#000;color:#eee;padding:20px;text-align:center}.optbg label{font-size:20px;margin-right:10px}.optbg select{background-color:#000;border:none;border-radius:5px;color:#fff;font-size:19px;outline:none;padding:0 5px}@media screen and (max-width:500px){.optbg label{font-size:16px}.optbg select{font-size:15px}}.cloudbox{height:100px;left:50%;position:relative;right:50%;transform:translateX(-50%);width:100px}.cloudbox .circle{animation:cloudrift 4s infinite}.cloudbox .circle1{background-color:#fff;border-radius:20px;height:40px;position:absolute;top:40%;width:90px}.cloudbox .circle2{height:50px;left:10%;top:20%;width:50px}.cloudbox .circle2,.cloudbox .circle3{background-color:#fff;border-radius:50%;position:absolute}.cloudbox .circle3{height:40px;left:40%;top:30%;width:40px}@keyframes cloudrift{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.rainbox{height:100px;left:50%;position:relative;transform:translateX(-50%);width:100px}.rainbox .rain{animation:raindrop 1s infinite;background-color:#fff;background-color:#adabab;height:10px;position:absolute;width:2px;z-index:-3}.rainbox .rain1{animation-delay:-.1s;bottom:25%;left:35%}.rainbox .rain2{animation-delay:-.4s;bottom:25%;left:45%}.rainbox .rain3{animation-delay:-.7s;bottom:25%;left:55%}@keyframes raindrop{0%{transform:translateY(0)}to{opacity:0;transform:translateY(40px)}}.suncloudbox{height:100px;left:50%;position:relative;transform:translateX(-50%);width:100px}.suncloudbox .suncloudcircle{fill:#ffd633;stroke-width:20px;stroke-dasharray:.5%;stroke:#e8ec8bcc;animation:light 5s infinite;animation-delay:.2s;transition-duration:.5s}.suncloudbox .cloud-in-sun{left:10px;position:absolute;top:10px;transform:scale(.8)}.sunbox{height:100px;left:50%;position:relative;top:50%;transform:translate(-50%,-50%);width:100px}.sunbox .suncircle{fill:#ffd633;stroke-width:20px;stroke-dasharray:.5%;stroke:#e8ec8bcc;animation:light 5s infinite;animation-delay:.2s;transition-duration:.5s}@keyframes light{0%{fill:#ffd633;stroke-width:18px;stroke-dasharray:.5%;stroke:#e8ec8bcc}25%{fill:#f5ff33;stroke-width:20px;stroke-dasharray:.5%;stroke:#f1f4b4cc}50%{fill:#ffd633;stroke-width:18px;stroke-dasharray:.5%;stroke:#e8ec8bcc}75%{fill:#f5ff33;stroke-width:20px;stroke-dasharray:.5%;stroke:#f1f4b4cc}to{fill:#ffd633;stroke-width:18px;stroke-dasharray:.5%;stroke:#e8ec8bcc}}.thunderbox{height:100px;left:50%;position:relative;transform:translateX(-50%);width:100px}.thunderbox .thunderlight{fill:#cfc690;stroke:#f3db3d;stroke-width:3px;animation:thunder .5s ease-in-out infinite;animation:pop 1s ease-in-out infinite}@keyframes thunder{0%{fill:#cfc690;stroke:#f3db3d;stroke-width:3px}20%{fill:#ded6a7;stroke:#f3db3d;stroke-width:1px}40%{fill:#cfc690;stroke:#f3db3d;stroke-width:3px}75%{fill:#ded6a7;stroke:#f3db3d;stroke-width:1px}to{fill:#cfc690;stroke:#f3db3d;stroke-width:3px}}@keyframes pop{0%{transform:translateX(-5px)}10%{transform:translateX(5px)}20%{transform:translateX(-5px)}30%{transform:translateX(5px)}40%{transform:translateX(0)}to{opacity:0;transform:translateX(0)}}.thundercloudbox{height:100px;left:50%;position:relative;transform:translateX(-50%);width:100px}.thundercloudbox .thunder-in-cloud{animation:thunderdrift 4s infinite;position:absolute;top:20px}.thundercloudbox .cloud-in-thunder{position:absolute;transform:scale(.8) translateY(-5px);z-index:-3}.thunderrainbox{height:100px;left:50%;position:relative;transform:translateX(-50%);width:100px}.thunderrainbox .rain-in-thunder{opacity:.8;position:absolute;transform:scale(.8) translateY(-5px)}.thunderrainbox .thunder-in-rain{animation:thunderdrift 4s infinite;position:absolute;top:20px;z-index:-3}@keyframes thunderdrift{0%{transform:scale(.6) translateY(0)}50%{transform:scale(.6) translateY(-20px)}to{transform:scale(.6) translateY(0)}}.weekbox{align-items:center;display:flex;flex-wrap:wrap;height:200px;justify-content:center;width:600px}.weekbox .dayweather{opacity:0;transition:.5s;width:calc(14.28571% - 5px)}.weekbox .dayweather h3{color:#fff;font-size:12px;text-align:center}.weekbox .dayweather .sun-in-weekweather,.weekbox .dayweather .suncloud-in-weekweather,.weekbox .dayweather .thunderrain-in-weekweather{transform:scale(.5)}.weekbox .dayweather .cloud-in-weekweather,.weekbox .dayweather .rain-in-weekweather{transform:scale(.4)}.weekbox .dayweather .thundersun-in-weekweather{transform:scale(.6)}@media screen and (max-width:1180px){.weekbox{height:200px;width:400px}}@media screen and (max-width:800px){.weekbox{width:350px}}@media screen and (max-width:450px){.weekbox{width:290px}.weekbox .dayweather h3{color:#fff;font-size:6px;text-align:center}.weekbox .dayweather .sun-in-weekweather,.weekbox .dayweather .suncloud-in-weekweather,.weekbox .dayweather .thunderrain-in-weekweather{transform:scale(.3)}.weekbox .dayweather .cloud-in-weekweather,.weekbox .dayweather .rain-in-weekweather{transform:scale(.25)}.weekbox .dayweather .thundersun-in-weekweather{transform:scale(.4)}}.thundersunbox{height:100px;left:50%;position:relative;transform:translateX(-50%);width:100px}.thundersunbox .sun-in-thundersun{opacity:.9;position:absolute;top:50px;transform:scale(.9)}.thundersunbox .thunderrain-in-thundersun{left:20px;position:absolute;top:10px;transform:scale(.8)}.temperaturebox{box-sizing:border-box;cursor:pointer;height:auto;width:100%}.temperaturebox svg{height:240px;width:600px}.temperaturebox svg circle{fill:#fff;opacity:0;transition:.5s}.temperaturebox svg text{fill:#fff;font-size:16px;opacity:0}.temperaturebox svg polyline{stroke:#fff;fill:none;opacity:0}@media screen and (max-width:1180px){.temperaturebox svg{height:200px;width:400px}}@media screen and (max-width:800px){.temperaturebox svg{height:200px;width:350px}.temperaturebox svg text{font-size:14px}}@media screen and (max-width:450px){.temperaturebox svg{width:290px}.temperaturebox svg text{font-size:12px}}.uvindexbox .outer{fill:#fff0;stroke:#fff;stroke-width:5px;stroke-dasharray:.1 22;stroke-linecap:round;z-index:-3}.uvindexbox .inner{fill:#fff}.weekuvindexbox{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:70px;height:100%;justify-content:flex-end;position:relative;width:580px}.weekuvindexbox .indextop{align-items:center;display:flex;height:auto;justify-content:center;width:100%}.weekuvindexbox .indextop .dayuvindex{display:flex;flex-direction:column;height:auto;opacity:0;transition:.5s;width:calc(14.28571% - 5px)}.weekuvindexbox .indextop .dayuvindex h3{color:#fff;font-size:12px;text-align:center}.weekuvindexbox .indextop .dayuvindex .low svg .inner{fill:#a7cc22}.weekuvindexbox .indextop .dayuvindex .low svg .outer{stroke:#a7cc22}.weekuvindexbox .indextop .dayuvindex .moderate svg .inner{fill:#ffa503}.weekuvindexbox .indextop .dayuvindex .moderate svg .outer{stroke:#ffa503}.weekuvindexbox .indextop .dayuvindex .high svg .inner{fill:#f29801}.weekuvindexbox .indextop .dayuvindex .high svg .outer{stroke:#f29801}.weekuvindexbox .indextop .dayuvindex .veryhigh svg .inner{fill:#d32d1b}.weekuvindexbox .indextop .dayuvindex .veryhigh svg .outer{stroke:#d32d1b}.weekuvindexbox .indextop .dayuvindex .extreme svg .inner{fill:#ac4a9b}.weekuvindexbox .indextop .dayuvindex .extreme svg .outer{stroke:#ac4a9b}.weekuvindexbox .indextop .dayuvindex p{color:#fff;font-size:10px;text-align:center}.weekuvindexbox .indexbottom{height:auto;padding-bottom:30px;width:100%}.weekuvindexbox .indexbottom .indexdescription{align-items:center;display:flex;height:auto;justify-content:center}.weekuvindexbox .indexbottom .indexdescription table{border-spacing:30px 0;color:#fff;width:400px}.weekuvindexbox .indexbottom .indexdescription table tr td{font-size:12px;opacity:0;text-align:center;transition-duration:2s}.weekuvindexbox .indexbottom .indexdescription table tr td .low svg .inner{fill:#a7cc22}.weekuvindexbox .indexbottom .indexdescription table tr td .low svg .outer{stroke:#a7cc22}.weekuvindexbox .indexbottom .indexdescription table tr td .moderate svg .inner{fill:#ffa503}.weekuvindexbox .indexbottom .indexdescription table tr td .moderate svg .outer{stroke:#ffa503}.weekuvindexbox .indexbottom .indexdescription table tr td .high svg .inner{fill:#f29801}.weekuvindexbox .indexbottom .indexdescription table tr td .high svg .outer{stroke:#f29801}.weekuvindexbox .indexbottom .indexdescription table tr td .veryhigh svg .inner{fill:#d32d1b}.weekuvindexbox .indexbottom .indexdescription table tr td .veryhigh svg .outer{stroke:#d32d1b}.weekuvindexbox .indexbottom .indexdescription table tr td .extreme svg .inner{fill:#ac4a9b}.weekuvindexbox .indexbottom .indexdescription table tr td .extreme svg .outer{stroke:#ac4a9b}@media screen and (max-width:1180px){.weekuvindexbox{gap:40px;justify-content:center;width:400px}.weekuvindexbox .indextop .dayuvindex p{display:none}}@media screen and (max-width:800px){.weekuvindexbox{gap:30px;width:350px}}@media screen and (max-width:450px){.weekuvindexbox{width:290px}.weekuvindexbox .indexbottom{padding-bottom:20px}.weekuvindexbox .indexbottom .indexdescription table{border-spacing:10px 0}.weekuvindexbox .indexbottom .indexdescription table tbody tr td{font-size:10px;min-width:32px;text-align:center}.weekuvindexbox .indexbottom .indexdescription table tbody tr:nth-child(3){height:50px}}.moonbox{height:100px;left:50%;overflow:hidden;position:relative;right:50%;transform:translateX(-50%);width:100px}.moonbox .circle{background:#0f044c;border-radius:50%;box-shadow:inset -13px -13px #fff,inset -20px -20px 20px -10px gray,10px 10px 20px -10px gray,-3px 10px 20px -8px gray,10px -5px 20px -10px gray;height:50px;left:25px;position:relative;top:25px;transform:rotate(90deg);width:50px}.mooncloudbox{height:100px;left:50%;position:relative;right:50%;transform:translateX(-50%);width:100px}.mooncloudbox .moon-in-mooncloud{left:30px;position:absolute;top:35px}.mooncloudbox .cloud-in-mooncloud{opacity:.9;position:absolute;top:70px}.mooncloudbox .cloud-in-mooncloud .circle{background:#bebebe}.moonrainbox{height:100px;left:50%;position:relative;right:50%;transform:translateX(-50%);width:100px}.moonrainbox .moon-in-moonrain{left:30px;position:absolute;top:35px}.moonrainbox .rain-in-moonrain{opacity:.9;position:absolute;top:70px}.moonrainbox .rain-in-moonrain .circle{background:#bebebe}.thundermoonbox{height:100px;left:50%;position:relative;right:50%;transform:translateX(-50%);width:100px}.thundermoonbox .moon-in-thundermoon{left:30px;position:absolute;top:35px}.thundermoonbox .thunder-in-thundermoon{opacity:.9;position:absolute;top:70px;transform:scale(1.3)}.thundermoonbox .thunder-in-thundermoon .circle{background:#bebebe}
/*# sourceMappingURL=main.a4d8954b.css.map*/