:root{--day: 14s;--sun-orbit-progress: -10s;--circle-delay: calc(var(--day) / 3.97);--circular-ease: cubic-bezier(.37, 0, .63, 1);--pov: 66deg;--bg-color: #111;--orbit-sphere-color: hsla(260, 80%, 60%, .6);--orbit-line-color: hsl(260 50% 66%);--orbit-line-thickness: .15rem;--orbit-plane-color: radial-gradient( circle at center, hsla(250, 70%, 75%, .025), hsla(250, 70%, 75%, .15) );--moon-orbit-size: 12dvmin;--mercury-orbit-size: 24dvmin;--venus-orbit-size: 36dvmin;--sun-orbit-size: 48dvmin;--mars-orbit-size: 60dvmin;--jupiter-orbit-size: 72dvmin;--saturn-orbit-size: 84dvmin;--stars-orbit-size: 96dvmin;--number-of-bodies: 10}body{height:100dvh;margin:0;background:var(--bg-color);overflow:hidden}.universe{height:100%;perspective:50000px;translate:0 -5%;position:relative}.orbit{--enter-delay: calc(.1s + var(--i) * (1s / 6));position:absolute;top:50%;left:50%;width:var(--size, 30dvmin);height:var(--size, 30dvmin);border-radius:50%;background:var(--orbit-plane-color);box-shadow:0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);transform-style:preserve-3d;rotate:x var(--pov);translate:-50% -40%;opacity:0;animation:orbit-appear 1.5s var(--enter-delay, .1s) forwards}:nth-child(1 of:is(.orbit)){--i: 0}:nth-child(2 of:is(.orbit)){--i: 1}:nth-child(3 of:is(.orbit)){--i: 2}:nth-child(4 of:is(.orbit)){--i: 3}:nth-child(5 of:is(.orbit)){--i: 4}:nth-child(6 of:is(.orbit)){--i: 5}:nth-child(7 of:is(.orbit)){--i: 6}:nth-child(8 of:is(.orbit)){--i: 7}@keyframes orbit-appear{to{opacity:1;translate:-50% -50%}}.orbit:after{--cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));content:"";position:absolute;top:-75%;left:calc(-1 * var(--orbit-line-thickness));width:calc(100% + var(--orbit-line-thickness) * 2);height:250%;background:radial-gradient(circle var(--cutout) at center,#0000 99.9%,var(--orbit-sphere-color));border-radius:50%;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}.orbit.moon{--size: var(--moon-orbit-size)}.orbit.mercury{--size: var(--mercury-orbit-size)}.orbit.venus{--size: var(--venus-orbit-size)}.orbit.sun{--size: var(--sun-orbit-size)}.orbit.mars{--size: var(--mars-orbit-size)}.orbit.jupiter{--size: var(--jupiter-orbit-size)}.orbit.saturn{--size: var(--saturn-orbit-size)}.orbit.stars{--size: var(--stars-orbit-size);--orbit-sphere-color: hsla(260, 80%, 20%, .6);--orbit-line-color: hsl(260 50% 60%)}.orbit.stars .star{--size: 8dvmin;--astronomical-unit: calc( var(--stars-orbit-size) / 2 - (var(--y) * var(--y)) * 14dvmin );--star-x-delay: calc(var(--j) * -.5s);content:"";position:absolute;z-index:1;bottom:-8%;left:calc(50% + var(--astronomical-unit));width:calc(var(--size) * cos(var(--pov)));height:var(--size);background:#fff0ea99;mix-blend-mode:color-dodge;clip-path:polygon(50% 0,55% 45%,100% 50%,55% 55%,50% 100%,45% 55%,0% 50%,45% 45%);translate:-50% calc(-50% + var(--y) * 800%);rotate:x calc(var(--y) * 80deg);scale:calc(1 - var(--y) / 1.5) calc(1 - var(--y) / 2);transform-style:preserve-3d;animation:star-rise-and-shine var(--day) var(--star-x-delay) infinite,star-move-x var(--day) var(--star-x-delay) infinite var(--circular-ease),star-move-y var(--day) calc(0s - var(--circle-delay) + var(--star-x-delay)) infinite var(--circular-ease)}@keyframes star-rise-and-shine{0%,52%,to{opacity:0}60%,93%{opacity:1}63%,67%,71%,76%,81%,86%,91%{opacity:1}61%,65%,69%,73%,78%,83%,89%{opacity:max(.3,sin(var(--j)))}}@keyframes star-move-x{0%,to{transform:rotateY(-70deg)}50%{transform:rotateY(70deg);left:calc(50% - var(--astronomical-unit))}}@keyframes star-move-y{50%{bottom:calc(50% + var(--astronomical-unit) * cos(var(--pov)))}}.body,.body-container{--orbit-progress: 0s;--inverse-index: calc(var(--number-of-bodies) - var(--i));--shine-delay: calc( var(--sun-orbit-progress) + var(--orbit-progress) );--anim-body-reveal: body-reveal 1.5s calc(1s + .09s * var(--i)) forwards;--anim-body-index: body-index var(--day) var(--orbit-progress) infinite;--anim-body-shine: body-shine var(--day) var(--shine-delay) linear infinite;--anim-body-move-x: body-move-x var(--day) calc(var(--orbit-progress)) infinite var(--circular-ease);--anim-body-move-y: body-move-y var(--day) calc(var(--orbit-progress) - var(--circle-delay)) infinite var(--circular-ease);position:absolute;left:calc(50% + var(--astronomical-unit));top:0;opacity:0;translate:-50% calc(-50% - (50%*sin(var(--pov))));width:var(--size);height:var(--size);background:radial-gradient(circle at center,var(--color-1, darkgray),var(--color-2, #333) 60%);background-size:300%;background-position:center;border-radius:50%;animation:var(--anim-body-reveal),var(--anim-body-index),var(--anim-body-shine),var(--anim-body-move-x),var(--anim-body-move-y)}:nth-child(1 of:is(.body,.body-container)){--i: 0}:nth-child(2 of:is(.body,.body-container)){--i: 1}:nth-child(3 of:is(.body,.body-container)){--i: 2}:nth-child(4 of:is(.body,.body-container)){--i: 3}:nth-child(5 of:is(.body,.body-container)){--i: 4}:nth-child(6 of:is(.body,.body-container)){--i: 5}:nth-child(7 of:is(.body,.body-container)){--i: 6}:nth-child(8 of:is(.body,.body-container)){--i: 7}:nth-child(9 of:is(.body,.body-container)){--i: 8}:nth-child(10 of:is(.body,.body-container)){--i: 9}@keyframes body-reveal{to{top:calc(50% + var(--astronomical-unit) * cos(var(--pov)));opacity:1}}@keyframes body-index{0%,49%{z-index:var(--inverse-index)}50%,to{z-index:0}}@keyframes body-shine{to{background-position-x:-100%}}@keyframes body-move-x{50%{left:calc(50% - var(--astronomical-unit))}}@keyframes body-move-y{50%{top:calc(50% - var(--astronomical-unit) * cos(var(--pov)))}}.body-container.earth{--size: 4dvmin;--color-1: #67aecb;--color-2: mediumblue;--astronomical-unit: 0%;--orbit-progress: calc(-1 * var(--circle-delay));animation:var(--anim-body-reveal),var(--anim-body-index),var(--anim-body-shine),earth-night var(--day) var(--shine-delay) linear infinite}@keyframes earth-night{50%{box-shadow:inset 0 0 var(--size) calc(var(--size) / 5) #000b}}.body-container.earth .human-lights{--color: #fd08;--px: .7em;--light: 0 var(--px) var(--color);--this-mad-city: 0 var(--px) palevioletred;font-size:calc(var(--size) / 50);position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;translate:-50% -50%;border-radius:50%;opacity:0;mix-blend-mode:difference;box-shadow:-5em -17em var(--light),-3em -15em var(--light),-2em -16em var(--light),-5em -14em var(--light),-6em -13em var(--light),-2em -13em var(--light),0 -15em var(--light),-2em -18em var(--light),1em -17em var(--light),1em -15em var(--light),3em -14em var(--light),6em -9em var(--light),4em -9em var(--light),6em -7em var(--light),7em -5em var(--light),6em -13em var(--this-mad-city),4em -16em var(--light),3em -17em var(--light),5em -19em var(--light),9em -17em var(--light),1em -19em var(--light),10em -12em var(--light),15em -9em var(--light),20em -6em var(--light),19em -8em var(--light),-3em 1em var(--light),1em 4em var(--light),7em 2em var(--light),2em 1em var(--light),5em 10em var(--light);animation:earth-human-lights var(--day) var(--shine-delay) linear infinite}@keyframes earth-human-lights{50%{opacity:1}}.body-container.earth:before,.body-container.earth:after{content:"";position:absolute;top:50%;left:50%}.body-container.earth:before{translate:-45% -40%;width:calc(var(--size) / 2);height:calc(var(--size) / 1.8);border-radius:50% 100%;clip-path:polygon(0 0,100% 0,70% 100%,30% 100%,25% 40%,3% 35%,0 30%,3% 10%,4% 0);background:linear-gradient(to bottom,#eee8aa 30%,#006400 60%,sienna);mix-blend-mode:soft-light;filter:blur(.1dvmin)}.body-container.earth:after{width:100%;height:100%;translate:-50% -50%;border-radius:50%;background:repeating-radial-gradient(circle at 50% 0%,#fff4 3% 10%,#0000 11% 40%,#fff4 60%,#0000 80% 100%),repeating-radial-gradient(ellipse calc(var(--size) / 1.5) calc(var(--size) / 6) at 30% 90%,#fff4,#fffa 1%,transparent 3%,#fff9 5%,transparent 7%,#fff4 9%,transparent 11%,transparent 100%);background-size:200% 100%;background-position:right center;filter:blur(.1dvmin);mix-blend-mode:hard-light;animation:earth-clouds calc(var(--day) * 3.1) linear infinite}@keyframes earth-clouds{to{background-position-x:-100%}}.body-container.moon{--size: 2dvmin;--color-1: #eee;--color-2: #333;--astronomical-unit: calc(var(--moon-orbit-size) / 2);--orbit-progress: -3s;overflow:hidden}.body-container.moon .crater{position:absolute;top:var(--y);left:var(--x);z-index:1;translate:0 -50%;width:calc(var(--size) * 100%);height:calc(var(--size) * 100%);background:#0003;transform-style:preserve-3d;transform-origin:left center;rotate:x calc(90deg - var(--pov));border-radius:50%;box-shadow:.1dvmin .1dvmin .1dvmin #fff7,-.1dvmin -.1dvmin .1dvmin #0009;animation:moon-crater var(--day) calc(var(--day) / -2.2) linear infinite}@keyframes moon-crater{0%{z-index:1;transform:translate(calc(1 / var(--size) * -100%)) rotateY(-90deg)}99.9%{z-index:1;transform:translate(calc(1 / var(--size) * 100%)) rotateY(90deg)}to{z-index:0}}.body-container.moon .crater-1{--size: .3;--x: 30%;--y: 20%}.body-container.moon .crater-2{--size: .2;--x: 66%;--y: 55%}.body-container.moon .crater-3{--size: .15;--x: 55%;--y: 40%}.body-container.moon .crater-4{--size: .25;--x: 27%;--y: 50%}.body-container.moon .crater-5{--size: .1;--x: 60%;--y: 70%}.body-container.moon .crater-6{--size: .1;--x: 20%;--y: 40%}.body-container.mercury{--size: 2dvmin;--color-1: #eed;--color-2: #443;--astronomical-unit: calc(var(--mercury-orbit-size) / 2);--orbit-progress: -5s;overflow:hidden}.body-container.mercury .crater{position:absolute;top:var(--y);left:var(--x);z-index:1;rotate:x calc(90deg - var(--pov));translate:0 -50%;transform-style:preserve-3d;transform-origin:left center;width:calc(var(--size) * 100%);height:calc(var(--size) * 100%);background:#fff7;border-radius:50%;box-shadow:inset 0 0 .1dvmin .02dvmin #0009;animation:mercury-crater var(--day) calc(var(--day) / -2) linear infinite}@keyframes mercury-crater{0%{z-index:1;transform:translate(calc(1 / var(--size) * -100%)) rotateY(-90deg)}99.9%{z-index:1;transform:translate(calc(1 / var(--size) * 100%)) rotateY(90deg)}to{z-index:0}}.body-container.mercury .crater-1{--size: .1;--x: 35%;--y: 21%}.body-container.mercury .crater-2{--size: .15;--x: 68%;--y: 35%}.body-container.mercury .crater-3{--size: .17;--x: 50%;--y: 42%}.body-container.mercury .crater-4{--size: .12;--x: 22%;--y: 75%}.body-container.mercury .crater-5{--size: .2;--x: 37%;--y: 53%}.body-container.mercury .crater-6{--size: .16;--x: 17%;--y: 79%}.body-container.mercury .crater-7{--size: .13;--x: 18%;--y: 23%}.body-container.mercury .crater-8{--size: .17;--x: 83%;--y: 38%}.body-container.mercury .crater-9{--size: .11;--x: 60%;--y: 18%}.body-container.mercury .crater-10{--size: .1;--x: 42%;--y: 70%}.body-container.mercury .crater-11{--size: .14;--x: 75%;--y: 65%}.body-container.mercury .crater-12{--size: .2;--x: 86%;--y: 60%}.body-container.mercury .crater-13{--size: .15;--x: 76%;--y: 73%}.body-container.mercury .crater-14{--size: .14;--x: 20%;--y: 50%}.body-container.mercury .crater-15{--size: .17;--x: 27%;--y: 22%}.body-container.mercury .crater-16{--size: .11;--x: 16%;--y: 73%}.body.venus{--size: 4dvmin;--color-1: #eed;--color-2: #553;--astronomical-unit: calc(var(--venus-orbit-size) / 2);--orbit-progress: -4s}.body.sun{--size: 6dvmin;--color-1: #fb3;--color-2: yellow;--astronomical-unit: calc(var(--sun-orbit-size) / 2);--orbit-progress: var(--sun-orbit-progress);box-shadow:0 0 1dvmin .2dvmin #ffd,0 0 3dvmin 1dvmin #fa3;animation:var(--anim-body-reveal),var(--anim-body-index),var(--anim-body-move-x),var(--anim-body-move-y)}.body-container.mars{--size: 3dvmin;--color-1: darkorange;--color-2: #750;--astronomical-unit: calc(var(--mars-orbit-size) / 2);--orbit-progress: -8s;overflow:hidden}.body-container.mars .ice-cap{position:absolute;width:calc(var(--size) / 2.5);height:calc(var(--size) / 2.5);top:0;left:50%;translate:-50% -40%;rotate:x var(--pov);background:radial-gradient(circle at center,#fff8,transparent);mix-blend-mode:overlay;border-radius:50%;clip-path:polygon(0 0,30% 0,32% 40%,34% 0,60% 0,82% 60%,84% 5%,90% 25%,70% 27%,88% 30%,95% 70%,60% 71%,93% 76%,100% 100%,66% 66%,33% 90%,0 100%);animation:mars-ice-cap var(--day) linear infinite}@keyframes mars-ice-cap{to{transform:rotate(-1turn)}}.body-container.mars:before,.body-container.mars:after{content:"";position:absolute;top:50%;left:50%;filter:blur(1.33dvmin);background:#1a1300;mix-blend-mode:hard-light;animation:mars-surface var(--day) linear infinite}@keyframes mars-surface{0%{transform:translate(-200%)}to{transform:translate(200%)}}.body-container.mars:before{translate:-10% -20%;width:calc(var(--size) / 3.5);height:calc(var(--size) / 1.8);clip-path:polygon(5% 19%,32% 32%,65% 39%,83% 38%,98% 48%,90% 65%,78% 64%,66% 77%,56% 69%,47% 67%,32% 72%,19% 76%,8% 68%,4% 53%,2% 39%)}.body-container.mars:after{translate:-70% -40%;width:calc(var(--size) / 2.6);height:calc(var(--size) / 3.5);clip-path:polygon(5% 19%,32% 32%,65% 39%,83% 38%,98% 48%,90% 65%,78% 64%,66% 77%,56% 69%,47% 67%,32% 72%,19% 76%,8% 68%,4% 53%,2% 39%)}.body.jupiter{--size: 5dvmin;--color-1: #cfbfaa;--color-2: #321;--astronomical-unit: calc(var(--jupiter-orbit-size) / 2);--orbit-progress: -6s}.body.jupiter:after{--great-red-spot-width: calc(var(--size) / 8);--great-red-spot-height: calc(var(--size) / 10);content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 calc(var(--size) / 5) var(--color-1);background:linear-gradient(to bottom,transparent 16%,#6526 22%,#6526 26%,transparent 30%,#652a 32%,#652a 42%,transparent 44%,transparent 53%,#652a 58%,#652a 70%,transparent 71%),radial-gradient(ellipse var(--great-red-spot-width) var(--great-red-spot-height) at 70% 68%,#420b,transparent),radial-gradient(ellipse calc(var(--great-red-spot-width) / 2.5) calc(var(--great-red-spot-height) / 2.5) at 80% 38%,#febb,transparent),radial-gradient(ellipse calc(var(--great-red-spot-width) / 2) calc(var(--great-red-spot-height) / 2) at 45% 40%,#febb,transparent),radial-gradient(ellipse calc(var(--great-red-spot-width) / 1.8) calc(var(--great-red-spot-height) / 1.8) at 30% 36%,#feba,transparent);background-size:200% 100%;background-position:center center;mix-blend-mode:overlay;animation:jupiter-clouds var(--day) -12.5s linear infinite}@keyframes jupiter-clouds{0%{background-position-x:left}to{background-position-x:-200%}}.body-container.saturn{--size: 5dvmin;--color-1: #cb9;--color-2: #531;--astronomical-unit: calc(var(--saturn-orbit-size) / 2);--orbit-progress: -1.5s;--ring-a-size: 180%;--ring-a-color: var(--color-1);--ring-b-size: 200%;--ring-b-color: var(--color-1)}.body-container.saturn .body-copy,.body-container.saturn .storms{position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;border-radius:inherit}.body-container.saturn .storms{overflow:hidden}.body-container.saturn .storm{position:absolute;width:var(--size);height:var(--size);top:0;left:50%;translate:-50% var(--y);rotate:x var(--pov);border-radius:inherit;mix-blend-mode:overlay;clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%);background:var(--bg);filter:blur(var(--fuzz))}.body-container.saturn .storm:nth-child(1){--y: -60%;--fuzz: .1dvmin;--bg: radial-gradient( circle at center, transparent 20%, #1323 40%, transparent )}.body-container.saturn .storm:nth-child(2){--y: -35%;--fuzz: .1dvmin;--bg: radial-gradient( circle at center, transparent 55%, #3213 )}.body-container.saturn .storm:nth-child(3){--y: -15%;--fuzz: .25dvmin;--bg: radial-gradient( circle at center, transparent 25%, #fed2 )}.body-container.saturn:before,.body-container.saturn:after,.body-container.saturn .ring-far{position:absolute;top:50%;left:50%;rotate:x var(--pov);border-radius:50%}.body-container.saturn:before,.body-container.saturn:after{content:"";z-index:1;translate:-50% -50%;clip-path:polygon(0 100%,100% 100%,100% 50%,0 50%)}.body-container.saturn .ring-far{translate:-50% -49%;clip-path:polygon(0 0,100% 0,100% 50%,0 50%)}.body-container.saturn:before,.body-container.saturn .ring-far.a{width:var(--ring-a-size);height:var(--ring-a-size);background:radial-gradient(circle calc(var(--size) / 1.5) at center,#0000 99.9%,var(--ring-a-color))}.body-container.saturn:after,.body-container.saturn .ring-far.b{width:var(--ring-b-size);height:var(--ring-b-size);background:radial-gradient(circle calc(var(--size) / 1.05) at center,#0000 99.9%,var(--ring-b-color))}.body-container.saturn .shadow{position:absolute;z-index:2;top:50%;left:50%;background:radial-gradient(ellipse calc(var(--size) / 1.4) calc(var(--size) / 1.4 * 3) at center,#0000 18%,#000 18.1%);width:100%;height:75%;transform-style:preserve-3d;transform-origin:left center;rotate:x var(--pov);translate:0 -50%;border-radius:30% 50% 50% 30%/30% 90% 90% 30%;clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);animation:saturn-shadow var(--day) -2s linear infinite}@keyframes saturn-shadow{0%,40%,to{opacity:.8}50%,90%{opacity:.7}to{transform:rotate(-1turn)}7.8%,43.5%{z-index:0}43.6%{z-index:2}}.body-container.nebula{--size: .25dvmin;--color-1: white;--color-2: white;--astronomical-unit: calc(var(--stars-orbit-size) / 2);--orbit-progress: -12s;--part-width: calc(var(--size) * 30);--part-height: calc(var(--size) * 20);--center-size: calc(var(--size) * 40);--part-bg-1: #4ad8;--part-bg-2: #b50a;--part-bg-3: #ec2a}.body-container.nebula .body-copy{position:absolute;top:0;left:0;border-radius:inherit;width:100%;height:100%;width:var(--center-size);height:var(--center-size);translate:-50% -50%;background:inherit;background:radial-gradient(ellipse calc(var(--center-size) / 1.25) calc(var(--center-size) / 2) at center,transparent 20%,#fff3,transparent 60%)}.body-container.nebula .body-copy:after{content:"";position:absolute;top:50%;left:50%;width:calc(var(--size));height:calc(var(--size));animation:nebula-stars-twinkle 3s linear infinite}@keyframes nebula-stars-twinkle{0%,27%,40%,60%,73%,to{box-shadow:-2dvmin -1.1dvmin #fff2,-3.4dvmin -1dvmin #fff4,-1.5dvmin -.5dvmin #fff3,-1dvmin 1.3dvmin #fff4,-4.2dvmin 1dvmin #fff1,-1.5dvmin .5dvmin #fff1,.6dvmin -.6dvmin #fff2,1.9dvmin -1.4dvmin #fff3,2.5dvmin -1dvmin #fff4,1.5dvmin .5dvmin #fff5,1.8dvmin 1.25dvmin #fff2,3dvmin .9dvmin #fff3}33%,66%{box-shadow:-2dvmin -1.1dvmin #fff4,-3.4dvmin -1dvmin #fff5,-1.5dvmin -.5dvmin #fff4,-1dvmin 1.3dvmin #fff2,-4.2dvmin 1dvmin #fff2,-1.5dvmin .5dvmin #fff4,.6dvmin -.6dvmin #fff6,1.9dvmin -1.4dvmin #fff4,2.5dvmin -1dvmin #fff5,1.5dvmin .5dvmin #fff3,1.8dvmin 1.25dvmin #fff4,3dvmin .9dvmin #fff7}}.body-container.nebula .part{position:absolute;top:50%;left:50%;translate:calc(-50% + var(--part-distance)) -50%;width:var(--part-width);height:var(--part-height);border-radius:100%;filter:blur(.2dvmin);background:linear-gradient(var(--part-side),var(--part-bg-1) 15%,var(--part-bg-2),transparent),linear-gradient(to bottom,var(--part-bg-3),transparent 20%,transparent 80%,var(--part-bg-3)),radial-gradient(circle at center,transparent 50%,var(--part-bg-3))}.body-container.nebula .part.a{--part-side: to left;--part-distance: -20%}.body-container.nebula .part.b{--part-side: to right;--part-distance: 20%}.body-container.galaxy{--size: .5dvmin;--color-1: white;--color-2: white;--astronomical-unit: calc(var(--stars-orbit-size) / 2);--orbit-progress: -5s;--evolution-speed: calc(var(--day) / 3);--arm-thickness: .6dvmin}.body-container.galaxy .arms{position:absolute;top:50%;left:50%;translate:-50% -50%;animation:galaxy-rotation 5s linear infinite}@keyframes galaxy-rotation{to{transform:rotate(1turn)}}.body-container.galaxy .arm{position:absolute;top:50%;left:50%;translate:calc(-42% + var(--i) * -15%) calc(-42% + var(--i) * -15%);rotate:calc(var(--i) * 180deg)}:nth-child(1 of:is(.body-container.galaxy .arm)){--i: 0}:nth-child(2 of:is(.body-container.galaxy .arm)){--i: 1}.body-container.galaxy .arm-depth{width:calc(var(--size) * 15);height:calc(var(--size) * 15);position:relative;transform:rotate(.4turn);animation:galaxy-evolution var(--evolution-speed) ease-in-out infinite}@keyframes galaxy-evolution{50%{transform:rotate(.6turn)}}.body-container.galaxy .arm-depth:before{--arm-color: hsl( calc(245 + var(--d) * 20), 30%, calc(60% + var(--d) * 5%) );content:"";position:absolute;inset:0;border-top:var(--arm-thickness) solid var(--arm-color);border-right:var(--arm-thickness) solid var(--arm-color);border-radius:100%;filter:blur(.2dvmin)}.body-container.galaxy .arm-depth:after{content:"";position:absolute;width:calc(var(--size) / 3);height:calc(var(--size) / 3);top:50%;left:50%;translate:-50% -50%;border-radius:50%;box-shadow:.8dvmin 0 2dvmin brown,-.8dvmin 0 2dvmin brown,0 1.6dvmin 1dvmin orange,0 -1.6dvmin 1dvmin orange,2.4dvmin 0 .15dvmin #fff,-2.4dvmin 0 .15dvmin #fe9,0 3.2dvmin .15dvmin #fff,0 -3.2dvmin .15dvmin #aaf;animation:galaxy-stars-dim var(--evolution-speed) ease-in-out infinite}@keyframes galaxy-stars-dim{15%,35%,65%,85%{opacity:.6}25%,75%{opacity:0}}.body-container.galaxy .arm-depth .arm-depth{position:absolute;width:61.8%;height:61.8%;bottom:6%;right:5%}