:root{--solar-system-planet-distance-multiplier:1.8;--solar-system-planet-size-multiplier:1;--solar-system-planet-year-multiplier:36;--solar-system-skew-angle:45deg;--solar-system-font-size:5px}.solarSystemContainer{aspect-ratio:16/9;aspect-ratio:16/8;font-size:var(--solar-system-font-size);background-color:#0009;justify-content:center;align-items:center;transition:all .5s linear;display:flex;position:relative}.solarSystemContainer .solarSystem{width:100%;height:100%;transform:scale(.7,.45)skew(var(--solar-system-skew-angle));position:relative}.solarSystemContainer .positionedItem{cursor:pointer;max-width:20%;font-size:12px;transition:all .5s linear;position:absolute}.solarSystemContainer .title{color:#9cf;text-shadow:0 0 10px #9cf;max-width:50%;font-size:3em;top:6px;left:12px}.solarSystemContainer.fullScreenMode .title{font-size:22px}.solarSystemContainer .rangeSliderSpeed{bottom:12px;left:15px}.solarSystemContainer .rangleSliderZoom{bottom:12px;left:calc(22% + 15px)}.solarSystemContainer .rangeSliderAngle{top:15px;right:15px}.solarSystemContainer .fullScreenButton{bottom:10px;right:10px}.solarSystemContainer .sun{aspect-ratio:1;width:20em;animation:36s linear infinite center-orbit-animation;animation-duration:calc(1s*var(--sum-orbit-year)*var(--solar-system-planet-year-multiplier));z-index:200;cursor:pointer;background:radial-gradient(circle,#ff0,#000);border-radius:50%;transition:transform 1s ease-in-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 6em #ffff0080,inset -1px -1px 1px #0003,inset 1px 1px 2px #fff6}.solarSystemContainer .sun:hover{background:radial-gradient(circle,#ff0,#222)}.solarSystemContainer .planetContainer,.solarSystemContainer .planetContainer .moonContainer{box-shadow:0 0 5px #6fc3;box-shadow:0 0 2em color-mix(in srgb,var(--planet-color)40%,transparent);border-top:.1em solid #6fc;border-bottom:0 solid #0000;border-left:0 solid #0000;border-right:.1em solid #0000;border-radius:50%;position:absolute}.solarSystemContainer .planetContainer .moonContainer{box-shadow:0 0 .2em color-mix(in srgb,var(--planet-color)40%,transparent)}.solarSystemContainer .planetContainer .planet,.solarSystemContainer .planetContainer .planet .moonContainer .moon{content:"";aspect-ratio:1;border-radius:50%;position:absolute}.solarSystemContainer .planetContainer{cursor:pointer;aspect-ratio:1;border-top-color:var(--planet-color,#6fc);width:calc(1em*var(--planet-distance)*var(--solar-system-planet-distance-multiplier));animation:36s linear infinite center-orbit-animation;animation-duration:calc(1s*var(--planet-orbital-year)*var(--solar-system-planet-year-multiplier));transition:transform 1s ease-in-out;top:50%;left:50%;transform:translate(-50%,-50%)}.solarSystemContainer .planetContainer .planet{top:calc((var(--planet-distance)*var(--solar-system-planet-distance-multiplier)*.292893em*.5) - var(--planet-size)*.5em);right:calc((var(--planet-distance)*var(--solar-system-planet-distance-multiplier)*.292893em*.5) - var(--planet-size)*.5em);width:calc(1em*var(--planet-size)*var(--solar-system-planet-size-multiplier))}.solarSystemContainer .planetContainer .planet:before{content:"";background:radial-gradient(circle,var(--planet-color),#000);width:100%;height:100%;animation:3s linear infinite center-orbit-animation;animation-duration:calc(1s*var(--spin-year)*var(--solar-system-planet-year-multiplier));border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset -1px -1px 1px #0003,inset 1px 1px 2px #fff6}.solarSystemContainer .planetContainer.retrograde .planet:before{animation-name:center-orbit-animation-retrograde;animation-duration:calc(-1s*var(--spin-year)*var(--solar-system-planet-year-multiplier))}.solarSystemContainer .planetContainer .planet:hover:before{background:radial-gradient(circle,var(--planet-color),#fff3)}.solarSystemContainer .planetContainer .moonContainer{aspect-ratio:1;border-top-color:var(--moon-color);border-width:var(--moon-trail)var(--moon-trail)0 0;top:calc((var(--planet-distance)*var(--solar-system-planet-distance-multiplier)*.292893em*.5) - var(--planet-size)*var(--solar-system-planet-size-multiplier)*var(--moon-distance)*.5em);right:calc((var(--planet-distance)*var(--solar-system-planet-distance-multiplier)*.292893em*.5) - var(--planet-size)*var(--solar-system-planet-size-multiplier)*var(--moon-distance)*.5em);width:calc(1em*var(--planet-size)*var(--solar-system-planet-size-multiplier)*var(--moon-distance));animation:3s linear infinite off-center-orbit-animation;animation-duration:calc(1s*var(--moon-orbital-year)*var(--solar-system-planet-year-multiplier));z-index:50;border-radius:50%;position:absolute}.solarSystemContainer .planetContainer .moonContainer .moon{top:calc((var(--planet-size)*var(--solar-system-planet-size-multiplier)*var(--moon-distance)*.292893em*.5) - var(--moon-size)*.5em);right:calc((var(--planet-size)*var(--solar-system-planet-size-multiplier)*var(--moon-distance)*.292893em*.5) - var(--moon-size)*.5em);width:calc(1em*var(--moon-size)*var(--solar-system-planet-size-multiplier));aspect-ratio:1;border-radius:50%;position:absolute}.solarSystemContainer .planetContainer .moonContainer .moon:before{content:"";background:radial-gradient(circle,var(--moon-color),#000);width:100%;height:100%;animation:3s linear infinite center-orbit-animation;animation-duration:calc(1s*var(--moon-spin-year)*var(--solar-system-planet-year-multiplier));border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset -1px -1px 1px #0003,inset 1px 1px 2px #fff6}.solarSystemContainer .planetContainer .moonContainer .moon:hover:before{background:radial-gradient(circle,var(--moon-color),#fff3)}.solarSystemContainer .planet.saturn:after{content:"";aspect-ratio:1;width:calc(2em*var(--planet-size)*var(--solar-system-planet-size-multiplier));border:calc(.4em*var(--planet-size)*var(--solar-system-planet-size-multiplier))solid;border-color:color-mix(in srgb,var(--planet-color),#000);background-color:#0000;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes center-orbit-animation{to{transform:translate(-50%,-50%)translateZ(0)rotate(360deg)}}@keyframes center-orbit-animation-retrograde{to{transform:translate(-50%,-50%)translateZ(0)rotate(-360deg)}}@keyframes off-center-orbit-animation{to{transform:rotate(360deg)}}