@keyframes sunrise{0%{transform:rotate(-45deg)}to{transform:rotate(315deg)}}@keyframes moonrise{0%{transform:rotate(0)}to{transform:rotate(180deg)}}@keyframes dawn{0%{opacity:0}10%{opacity:1}60%{opacity:0}}@keyframes noon{0%{opacity:0}50%{opacity:1}75%{opacity:0}}@keyframes dusk{0%{opacity:0}50%{opacity:0}70%{opacity:1}90%{opacity:0}}@keyframes midnight{0%{opacity:1}25%{opacity:0}50%{opacity:0}80%{opacity:1}}body{--animation-speed:24s;background-color:#251d18}body.pause{--animation-speed:0}.sky{width:100vw;height:100vh;position:fixed;top:0;left:0;overflow:hidden}.sky__phase{width:100%;height:100%;transition:opacity .2s;position:absolute;top:0;left:0}.sky__dawn{animation:linear dawn infinite var(--animation-speed);background:linear-gradient(#cdedf6 0%,#fed766 100%)}.sky__noon{animation:linear noon infinite var(--animation-speed);background:linear-gradient(#247ba0 0%,#cdedf6 100%)}.sky__dusk{animation:linear dusk infinite var(--animation-speed);background:linear-gradient(#0a005e 0%,#ff206e 100%)}.sky__midnight{animation:linear midnight infinite var(--animation-speed);background:linear-gradient(#0a005e 0%,#020014 100%)}.orbit{width:500px;height:500px;animation:linear sunrise infinite var(--animation-speed);margin:200px auto;position:relative;transform:rotate(-45deg)}@media (min-width:768px){.orbit{width:700px;height:700px;margin:150px auto}}@media (min-width:940px){.orbit{width:800px;height:800px}}@media (min-width:1200px){body{--animation-speed:28s}.orbit{width:1000px;height:1000px;margin:200px auto}}@media (min-width:1500px){body{--animation-speed:30s}.orbit{width:1300px;height:1300px}}.sun{background-color:#fed766;border-radius:50%;width:80px;height:80px;position:absolute;top:-40px;left:-40px;box-shadow:0 0 14px 14px #fed76633}.moon{background-color:#fff;border-radius:50%;width:80px;height:80px;position:absolute;bottom:-40px;right:-40px;box-shadow:0 0 7px 7px #fff3}#sky__stars>div{background-color:#fff;border-radius:50%;width:3px;height:3px;position:absolute}#toggle-animation{text-transform:uppercase;color:#fff;letter-spacing:.5px;background-color:#020014;border:0;padding:.5em 1em;position:fixed;bottom:1em;right:1em}#toggle-animation:hover{cursor:pointer;background-color:#3d0015}.paused{display:none}.pause .paused{display:block}.pause .playing{display:none}