.nav-map{--planet-1-ring-radius:40%;--planet-1-spin-duration:30s;--planet-1-spin-delay:calc(var(--planet-1-spin-duration) * -.2);--planet-1-radius:30px;--planet-1-background:var(--planet-background-red);--planet-2-ring-radius:60%;--planet-2-spin-duration:35s;--planet-2-spin-delay:calc(var(--planet-2-spin-duration) * -.65);--planet-2-radius:25px;--planet-2-background:var(--planet-background-blue);--planet-3-ring-radius:80%;--planet-3-spin-duration:40s;--planet-3-spin-delay:0;--planet-3-radius:20px;--planet-3-background:var(--planet-background-green);aspect-ratio:1;perspective:1400px;transform-style:preserve-3d;pointer-events:none;position:relative;& .ring-group{transform-style:preserve-3d;position:absolute;inset:0;transform:rotate(-14deg)rotateX(50deg)}& .sun,& .ring,& .planet{border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}& .sun,& .planet{aspect-ratio:1;border-radius:100%;animation:6s ease-in-out infinite pulse}& .sun{background:radial-gradient(circle at 38% 36%,#fff4dc,#f4b05f 42%,#c4552c 80%);width:20%;translate:0 0 100px}& .ring{transform-style:preserve-3d;transform-origin:0 0;pointer-events:none;border:1px solid #fff3;animation:linear infinite spin;&#ring-1{width:var(--planet-1-ring-radius);height:var(--planet-1-ring-radius);animation-duration:var(--planet-1-spin-duration);animation-delay:var(--planet-1-spin-delay);& .planet{width:var(--planet-1-radius);height:var(--planet-1-radius);background:var(--planet-1-background);animation-duration:var(--planet-1-spin-duration);animation-delay:var(--planet-1-spin-delay)}}&#ring-2{width:var(--planet-2-ring-radius);height:var(--planet-2-ring-radius);animation-duration:var(--planet-2-spin-duration);animation-delay:var(--planet-2-spin-delay);& .planet{width:var(--planet-2-radius);height:var(--planet-2-radius);background:var(--planet-2-background);animation-duration:var(--planet-2-spin-duration);animation-delay:var(--planet-2-spin-delay)}}&#ring-3{width:var(--planet-3-ring-radius);height:var(--planet-3-ring-radius);animation-duration:var(--planet-3-spin-duration);animation-delay:var(--planet-3-spin-delay);& .planet{width:var(--planet-3-radius);height:var(--planet-3-radius);background:var(--planet-3-background);animation-duration:var(--planet-3-spin-duration);animation-delay:var(--planet-3-spin-delay)}}}& .planet{pointer-events:auto;animation:linear infinite spin-reverse;display:block;position:relative;top:0;transform:rotateX(-50deg)rotate(14deg)translateZ(100px);& span{word-break:keep-all;position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%)}}}@keyframes spin{0%{rotate:0deg}to{rotate:360deg}}@keyframes spin-reverse{0%{rotate:0deg}to{rotate:-360deg}}#page-home #hero{flex-direction:column-reverse;align-items:center;gap:48px;height:90vh;margin-bottom:0;display:flex;position:relative;@media (width>=768px){flex-direction:row}&>*{flex:1}& .container{flex-direction:column;align-items:stretch;gap:8px;max-width:500px;padding:32px;display:flex}& h2{color:var(--text-reduced);text-transform:uppercase;font-size:.8rem}& p{color:var(--text-reduced);white-space:pre-line}& ul{flex-flow:wrap;align-items:center;gap:8px;margin-top:8px;display:flex;& a{background-color:var(--text-color);color:#000;border-radius:100px;padding:8px 16px;font-weight:600}}&:before{content:" ";filter:blur(100px);pointer-events:none;background:oklch(55% .16 290/.45);border-radius:100%;width:600px;height:500px;position:absolute;top:0;left:-100px}&:after{content:" ";filter:blur(100px);pointer-events:none;background:oklch(55% .16 200/.3);border-radius:100%;width:500px;height:400px;position:absolute;bottom:0;right:0}}section#projects{& .title{flex-direction:row;justify-content:space-between;align-items:center;margin-bottom:32px;display:flex;& a{padding:16px}}&>ul{flex-direction:column;justify-content:stretch;gap:32px;display:flex;@media (width>=768px){flex-direction:row}&>*{flex:1}}}section#skills{& h2{margin-bottom:32px}& ul{flex-flow:wrap;gap:16px;display:flex}& .container{flex-direction:column;flex:1;align-items:stretch;gap:16px;min-width:min(250px,100%);display:flex;& ul{gap:8px}}& .planet{background:var(--planet-background-red);border-radius:100%;width:50px;height:50px;&.red{background:var(--planet-background-red)}&.blue{background:var(--planet-background-blue)}&.green{background:var(--planet-background-green)}&.purple{background:var(--planet-background-purple)}}}