*{position:relative;box-sizing:border-box;font-family:serif}body,html{width:100%;height:100%;margin:0;padding:0;display:flex;justify-content:center;align-items:center;background-color:#333}a{position:absolute;left:2rem;top:2rem;text-decoration:none;color:#f5f5f5;font-size:1.5rem}a:hover{color:gold}.daybox{width:80vw;max-width:1000px;background-color:#f5f5f5;box-shadow:0 0 20px rgba(0,0,0,.3);border-radius:8px;cursor:pointer;overflow:hidden}.daybox label{cursor:pointer}.daybox input{display:none}.daybox #switch:checked+.top svg{background-color:#333;opacity:.6}.daybox #switch:checked+.top .sun{background-color:rgba(0,0,0,0);-webkit-animation:moonmove 16s infinite;animation:moonmove 16s infinite}.daybox #switch:checked+.top .cloud{visibility:hidden;-webkit-animation:none;animation:none}.daybox #switch:checked+.top .cloud .rain{position:absolute;background-color:#f5f5f5;right:-500px;top:-500px;visibility:visible;height:2px;width:2px;border-radius:100%;-webkit-animation:none;animation:none;-webkit-animation:wishingStar linear .7s 2s infinite;animation:wishingStar linear .7s 2s infinite}.daybox #switch:checked+.top .cloud .rain2{right:-2100px;top:-450px;-webkit-animation-delay:2.9s;animation-delay:2.9s}.daybox #switch:checked+.top .cloud .rain3{right:-1800px;top:-520px;-webkit-animation-delay:4.7s;animation-delay:4.7s}.daybox:hover .bottom{height:100px}.daybox:hover .day{opacity:1;top:0}.daybox .top{height:350px;background:linear-gradient(100deg,#84b9c5,#cad09b,#86c166,#66be2f,#d18726,#d0ae49,#9b8e92,#84b9c5);background-size:1000% 300%;-webkit-animation:daylight 16s infinite both;animation:daylight 16s infinite both;border-radius:8px 8px 0 0}.daybox .top .sun{width:50px;height:50px;border-radius:100%;position:absolute;left:-50px;top:200px;background-color:gold;-webkit-animation:sunmove 16s infinite;animation:sunmove 16s infinite}.daybox .top .cloud{height:36px;width:100px;position:absolute;left:200px;bottom:50px;border-radius:20px;-webkit-animation:clouddrift 2s infinite;animation:clouddrift 2s infinite;background-color:#f5f5f5;box-shadow:0 0 20px rgba(0,0,0,.3)}.daybox .top .cloud .rain{width:2px;height:10px;position:absolute;left:45px;bottom:15px;-webkit-animation:raindrop 1s infinite linear;animation:raindrop 1s infinite linear;background-color:#f5f5f5}.daybox .top .cloud .rain2{left:70px;bottom:20px;-webkit-animation-delay:.4s;animation-delay:.4s}.daybox .top .cloud .rain3{left:32px;bottom:20px;-webkit-animation-delay:.7s;animation-delay:.7s}.daybox .top .cloud::after,.daybox .top .cloud::before{content:"";display:block;height:50px;width:50px;border-radius:100%;position:absolute;background-color:#f5f5f5}.daybox .top .cloud::before{left:18px;top:-28px}.daybox .top .cloud::after{left:35px;top:-18px}.daybox .top svg{width:100%;height:100%;opacity:0}.daybox .top svg polyline{stroke:#f5f5f5;stroke-width:1px;fill:none}.daybox .top svg circle{fill:gold}.daybox .top .textArea{display:inline-block;position:absolute;bottom:25px;left:25px;color:#f5f5f5}.daybox .top .textArea .temp{font-size:75px;line-height:70px}.daybox .top .textArea .infos{font-size:13px;opacity:.6}.daybox .bottom{height:10px;display:flex;justify-content:center;box-shadow:0 0 20px rgba(0,0,0,.3);border-radius:0 0 8px 8px;overflow:hidden;transition-duration:2s}.daybox .bottom .day{width:calc(14.2857142857% - 5px);display:inline-block;text-align:center}.daybox .bottom .day h3{font-size:8px;color:rgba(51,51,51,.6);font-weight:400;letter-spacing:1px}.daybox .bottom .day svg{height:40px;width:100%;max-width:40px}.daybox .bottom .day svg .sun{fill:rgba(255,215,0,.8);stroke:rgba(255,215,0,.5);stroke-width:30px;stroke-dasharray:5px}.daybox .bottom .day svg .rain{stroke:#a799af;stroke-width:2px;-webkit-animation:raindrop .3s infinite;animation:raindrop .3s infinite}.daybox .bottom .day svg .cloud{fill:#c6d5db}@-webkit-keyframes sunmove{20%{top:70px;left:180px}50%{top:30px;left:500px}75%{top:100px;left:700px}100%{top:180px;left:1000px}}@keyframes sunmove{20%{top:70px;left:180px}50%{top:30px;left:500px}75%{top:100px;left:700px}100%{top:180px;left:1000px}}@-webkit-keyframes moonmove{0%{box-shadow:30px 30px gold;transform:translate(-30px,-30px)}20%{top:70px;left:180px}50%{top:30px;left:500px}75%{top:100px;left:700px}100%{top:180px;left:1000px;box-shadow:-30px -30px gold;transform:translate(30px,30px)}}@keyframes moonmove{0%{box-shadow:30px 30px gold;transform:translate(-30px,-30px)}20%{top:70px;left:180px}50%{top:30px;left:500px}75%{top:100px;left:700px}100%{top:180px;left:1000px;box-shadow:-30px -30px gold;transform:translate(30px,30px)}}@-webkit-keyframes raindrop{from{transform:translateY(0)}to{transform:translateY(50px);opacity:0}}@keyframes raindrop{from{transform:translateY(0)}to{transform:translateY(50px);opacity:0}}@-webkit-keyframes clouddrift{from{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes clouddrift{from{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@-webkit-keyframes daylight{from{background-position:0 100%}to{background-position:100% 100%}}@keyframes daylight{from{background-position:0 100%}to{background-position:100% 100%}}@-webkit-keyframes wishingStar{from{transform:translate(600px,0);opacity:0}60%{opacity:1}to{transform:translate(100px,600px);opacity:0}}@keyframes wishingStar{from{transform:translate(600px,0);opacity:0}60%{opacity:1}to{transform:translate(100px,600px);opacity:0}}