: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:var(--accent-color);text-shadow:0 0 10px var(--accent-color);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)}}