:root{--year-in-second: 30s}*,*:before,*:after{padding:0;margin:0;box-sizing:border-box}html,body{height:100%;width:100%}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background:radial-gradient(ellipse at bottom,#050a10,#000);color:#fff;height:100vh;margin:0;overflow:hidden;position:relative}.solar-system-container{width:100%;height:100vh;position:relative;overflow:hidden;transform:scale(1.03)}h1{font-weight:300;font-size:2.5em;text-transform:uppercase;font-family:Lato,sans-serif;line-height:1.6em;letter-spacing:.1em}a,a:visited{text-decoration:none;color:#fff;opacity:.7}a:hover{opacity:1}a.icon{margin-right:2px;padding:3px}.description{padding:30px;position:absolute;top:0;left:0;width:25%;z-index:999}.description p{font-size:.9em}.description p+p{margin-top:20px}.description p.author{font-size:.7em}.description p.author .fa-heart{color:#860014}hr{margin:26px 0;border:0;border-top:1px solid white;background:transparent;width:25%;opacity:.1}code{color:#ae94c0;font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.9em}.solar-syst{margin:0 auto;width:100%;height:100%;position:relative}.solar-syst:after{content:"";position:absolute;height:2px;width:2px;top:-2px;background:#fff;box-shadow:stars(500,1800);border-radius:100px}.solar-syst div{border-radius:1000px;top:50%;left:50%;position:absolute;z-index:999}.solar-syst div:not(.sun){border:1px solid rgba(102,166,229,.12)}.solar-syst div:not(.sun):before{left:50%;border-radius:100px;content:"";position:absolute}.solar-syst div:not(.sun):not(.asteroids-belt):before{box-shadow:inset 0 6px 0 -2px #00000040}.sun{background:radial-gradient(ellipse at center,#ffd000 1%,#f9b700 39%,#f9b700 39%,#e06317);height:40px;width:40px;margin-top:-20px;margin-left:-20px;background-clip:padding-box;border:0!important;background-position:-28px -103px;background-size:175%;box-shadow:0 0 10px 2px #ff6b0066,0 0 22px 11px #ffcb0021}.mercury{height:70px;width:70px;margin-top:-35px;margin-left:-35px;animation:orb calc(var(--year-in-second) * .2395) linear infinite}.mercury:before{height:4px;width:4px;background:#9f5e26;margin-top:-2px;margin-left:-2px}.venus{height:100px;width:100px;margin-top:-50px;margin-left:-50px;animation:orb calc(var(--year-in-second) * .6152) linear infinite}.venus:before{height:8px;width:8px;background:#beb768;margin-top:-4px;margin-left:-4px}.earth{height:145px;width:145px;margin-top:-72.5px;margin-left:-72.5px;animation:orb var(--year-in-second) linear infinite}.earth:before{height:6px;width:6px;background:#11abe9;margin-top:-3px;margin-left:-3px}.earth:after{position:absolute;content:"";height:18px;width:18px;left:50%;top:0;margin-left:-9px;margin-top:-9px;border-radius:100px;box-shadow:0 -10px 0 -8px gray;animation:orb calc(var(--year-in-second) * .0748) linear infinite}.mars{height:190px;width:190px;margin-top:-95px;margin-left:-95px;animation:orb calc(var(--year-in-second) * 1.8808) linear infinite}.mars:before{height:6px;width:6px;background:#cf3921;margin-top:-3px;margin-left:-3px}.jupiter{height:340px;width:340px;margin-top:-170px;margin-left:-170px;animation:orb calc(var(--year-in-second) * 11.8618) linear infinite}.jupiter:before{height:18px;width:18px;background:#c76e2a;margin-top:-9px;margin-left:-9px}.saturn{height:440px;width:440px;margin-top:-220px;margin-left:-220px;animation:orb calc(var(--year-in-second) * 29.4285) linear infinite}.saturn:before{height:12px;width:12px;background:#e7c194;margin-top:-6px;margin-left:-6px}.saturn:after{position:absolute;content:"";height:2.34%;width:4.676%;left:50%;top:0;transform:rotate(-52deg);margin-left:-2.3%;margin-top:-1.2%;border-radius:50%;box-shadow:0 1px 0 1px #987641,3px 1px #987641,-3px 1px #987641;animation:orb calc(var(--year-in-second) * 29.4285) linear infinite;animation-direction:reverse;transform-origin:52% 60%}.uranus{height:520px;width:520px;margin-top:-260px;margin-left:-260px;animation:orb calc(var(--year-in-second) * 84.0205) linear infinite}.uranus:before{height:10px;width:10px;background:#b5e3e3;margin-top:-5px;margin-left:-5px}.neptune{height:630px;width:630px;margin-top:-315px;margin-left:-315px;animation:orb calc(var(--year-in-second) * 164.7901) linear infinite}.neptune:before{height:10px;width:10px;background:#175e9e;margin-top:-5px;margin-left:-5px}.asteroids-belt{opacity:1;border-color:transparent!important;height:300px;width:300px;margin-top:-150px;margin-left:-150px;animation:orb calc(var(--year-in-second) * 6) linear infinite;overflow:hidden}.asteroids-belt:before{top:50%;height:210px;width:210px;margin-left:-105px;margin-top:-105px;background:transparent;border-radius:140px!important;box-shadow:stars(390,290,-145px,-104px)}.hide{display:none}.links{margin-top:5px!important;font-size:1.5em!important;display:flex;gap:20px}.links a{margin-right:0;padding:10px}.author{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;font-size:10px}@keyframes orb{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}@function stars($n,$max-area,$min-area: 0,$star-size: 0){$stars: #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255,#{random(1000) * .001}); @for $i from 2 through $n {$stars: "#{$stars}, #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255, #{random(1000) * 0.001})";} @return unquote($stars);}.starfield{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:1}.fa-star{position:absolute;color:#fff;animation:fall 10s linear infinite,twinkle 2s ease-in-out infinite}@keyframes fall{0%{transform:translateY(-100vh);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(100vh);opacity:0}}@keyframes twinkle{0%{opacity:.2}50%{opacity:.7}to{opacity:.2}}.fa-star:nth-child(odd){animation-duration:8s}.fa-star:nth-child(2n){animation-duration:12s}.fa-star:nth-child(3n){animation-duration:15s}.fa-star{animation-delay:calc(-1s * var(--i))}.music-toggle{position:absolute;bottom:20px;right:20px;background:#fff3;border:none;border-radius:50%;width:50px;height:50px;font-size:20px;color:#fff;cursor:pointer;transition:all .3s ease;z-index:1000}.music-toggle:hover{background:#ffffff4d}.music-toggle.playing{background:#fff6}.music-toggle i{line-height:50px}