:root{--night: #111;--day: #7ec0ee;--star-color: #fefcd7;--sun-color: #f9fa57;--size: 25;--position-x: 20;--position-y: 10;--transition-duration: .75s}*{box-sizing:border-box}body{background:var(--day);margin:0;padding:0;height:100vh;width:100vw;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:3rem;font-family:Gloria Hallelujah,cursive;font-weight:700;color:#fafafa}.container{background-color:var(--day);height:100vh;width:100vw;transition:--cycle var(--transition-duration) ease 0s}.container[data-theme=night]{background-color:var(--night)}@property --cycle{syntax: "<number>"; inherits: true; initial-value: 0;}.big-star{--distance: max(var(--offset), -1 * var(--offset));border-radius:100%;height:calc(var(--size) * 1vh);width:calc(var(--size) * 1vh);left:calc(var(--position-x) * 1vw);top:calc(var(--position-y) * 1vh);position:absolute;--reach: calc(max(var(--offset), 0)*2.6 + min(var(--offset), 0)*.55) ;transform:translate(calc(var(--reach) * var(--position-x) * -1vw)) translateY(calc(var(--reach) * var(--position-y) * -1vh)) scale(calc(1 - .2 * var(--distance)));opacity:calc(1 - var(--distance));z-index:2}.sun{--offset: calc(mod(var(--cycle) + 1, 2) - 1) ;background-color:var(--sun-color);box-shadow:0 0 150px #ff0}.moon{--offset: calc(mod(var(--cycle), 2) - 1) ;background-color:var(--star-color);box-shadow:0 0 50px #eee;overflow:hidden}.moon:after{box-shadow:inset 10px 10px 10px #bbb;border-radius:100%;content:"";display:block;height:100%;width:100%}.craters{background-color:#ddd;border-radius:100%;opacity:.5;position:absolute;top:15%;left:15%;height:calc(var(--size) * .25 * 1vh);width:calc(var(--size) * .25 * 1vh)}.craters:before{background-color:#ddd;content:"";display:block;border-radius:100%;height:50%;width:50%;position:absolute;top:110%}.craters:after{background-color:#ddd;content:"";display:block;border-radius:100%;height:30%;width:30%;position:absolute;top:80%;right:110%}.star{background:var(--day);border-radius:100%;height:calc(var(--star-size) * 1px);width:calc(var(--star-size) * 1px);left:calc(var(--star-x) * 1vw);top:calc(var(--star-y) * 1vh);position:absolute;opacity:0;transition:background var(--transition-duration) ease 0s,opacity var(--transition-duration) ease 0s;z-index:1}[data-theme=night] .star{background:var(--star-color);opacity:1}.face{height:50%;width:50%;position:absolute;right:15%;bottom:15%;transition:opacity .15s ease 0s;transition-delay:.75s;opacity:var(--show, 0)}.eye{border-radius:100%;height:15%;width:15%;background-color:#000;position:absolute;top:25%;animation:blink 10s infinite 1s;transform-origin:center}.eye:after{background-color:#fff;border-radius:100%;content:"";height:40%;width:40%;position:absolute;top:5%;right:30%;display:block}.eye--left{left:25%}.eye--right{left:75%}@keyframes blink{0%,5%,7%,to{transform:scaleY(1)}6%{transform:scaleY(0)}}.smile{width:55%;height:25%;border-style:solid;border-width:4px;border-top-color:transparent;border-left-color:transparent;border-right-color:transparent;border-bottom-color:#000;border-radius:100%;position:absolute;top:35%;left:50%;transform:translate(-50%)}.theme-toggle{left:10px;position:fixed;top:10px;width:50px;height:30px;border:4px solid dodgerblue;border-radius:30px;transition:border-color .25s ease 0s}.theme-toggle[data-theme=night]{border-color:#fff}.theme-toggle__input{cursor:pointer;z-index:3;height:100%;width:100%;position:absolute;top:0;left:0;opacity:0}.theme-toggle__switch{height:20px;width:20px;background:var(--sun-color);border-radius:100%;position:absolute;top:50%;margin-top:-10px;left:1px;transform:translate(0);transition:background .25s ease 0s,transform .25s ease 0s}.theme-toggle[data-theme=night] .theme-toggle__switch{background:var(--star-color)}.theme-toggle__input:checked~.theme-toggle__switch{transform:translate(20px)}