#background{position:absolute;left:0;top:0;overflow:clip;height:100vh;max-height:100vh;width:100%;max-width:100vw;z-index:-1;contain:paint}#sun{width:480px;height:480px;position:absolute;bottom:-250px;left:-250px;border-radius:50%;border:solid 10px}.mercury{--orbit-radius: 270px;--planet-radius: 10px;--planet-border-width: calc(var(--planet-radius) / 4);--planet-orbit-time: 60s}.venus{--orbit-radius: 320px;--planet-radius: 10px;--planet-border-width: calc(var(--planet-radius) / 4);--planet-orbit-time: 90s}.mars{--orbit-radius: 380px;--planet-radius: 15px;--planet-border-width: calc(var(--planet-radius) / 4);--planet-orbit-time: 120s}.uranus{--orbit-radius: 450px;--planet-radius: 18px;--planet-border-width: calc(var(--planet-radius) / 4);--planet-orbit-time: 180s}.jupiter{--orbit-radius: 550px;--planet-radius: 35px;--planet-border-width: calc(var(--planet-radius) / 4);--planet-orbit-time: 240s}.orbit{width:calc((var(--orbit-radius) * 2) - 4px);height:calc((var(--orbit-radius) * 2) - 4px);position:absolute;bottom:calc(-1 * var(--orbit-radius));left:calc(-1 * var(--orbit-radius));border-radius:50%;border:dotted 2px}.thirdplanet{width:calc(2 * (var(--planet-radius) - var(--planet-border-width)));height:calc(2 * (var(--planet-radius) - var(--planet-border-width)));border-radius:50%;border:solid var(--planet-border-width);position:absolute;left:calc(var(--orbit-radius) - var(--planet-radius));bottom:calc(-1 * var(--planet-radius));background:#fff;transform-origin:calc(-1 * (var(--orbit-radius) - var(--planet-radius))) var(--planet-radius);animation:thirdrotate var(--planet-orbit-time) linear infinite;display:block}.fourthplanet{width:calc(2 * (var(--planet-radius) - var(--planet-border-width)));height:calc(2 * (var(--planet-radius) - var(--planet-border-width)));border-radius:50%;border:solid var(--planet-border-width);position:absolute;left:calc(var(--orbit-radius) - var(--planet-radius));bottom:calc(-1 * var(--planet-radius));background:#fff;transform-origin:calc(-1 * (var(--orbit-radius) - var(--planet-radius))) var(--planet-radius);animation:fourthrotate var(--planet-orbit-time) linear infinite;display:block}.antiplanet{width:calc(2 * (var(--planet-radius) - var(--planet-border-width)));height:calc(2 * (var(--planet-radius) - var(--planet-border-width)));border-radius:50%;border:solid var(--planet-border-width);position:absolute;left:calc(var(--orbit-radius) - var(--planet-radius));bottom:calc(-1 * var(--planet-radius));background:#fff;transform-origin:calc(-1 * (var(--orbit-radius) - var(--planet-radius))) var(--planet-radius);animation:antirotate var(--planet-orbit-time) linear infinite}.planet{width:calc(2 * (var(--planet-radius) - var(--planet-border-width)));height:calc(2 * (var(--planet-radius) - var(--planet-border-width)));border-radius:50%;border:solid var(--planet-border-width);position:absolute;left:calc(var(--orbit-radius) - var(--planet-radius));bottom:calc(-1 * var(--planet-radius));background:#fff;transform-origin:calc(-1 * (var(--orbit-radius) - var(--planet-radius))) var(--planet-radius);animation:rotate var(--planet-orbit-time) linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes antirotate{0%{transform:rotate(180deg)}to{transform:rotate(540deg)}}@keyframes thirdrotate{0%{transform:rotate(90deg)}to{transform:rotate(450deg)}}@keyframes fourthrotate{0%{transform:rotate(270deg)}to{transform:rotate(630deg)}}@keyframes move-out{0%{transform:translate(0);opacity:100%}to{transform:translate(-100%);opacity:0%}}@keyframes move-in{0%{transform:translate(100%);opacity:0%}to{transform:translate(0);opacity:100%}}main{view-transition-name:main}::view-transition-old(main){animation:.4s ease-in both move-out}::view-transition-new(main){animation:.4s ease-out both move-in}main{background-color:#fff;border:1px solid black;width:fit-content;margin:0 auto;padding:1rem;max-width:500px;display:flex;gap:1rem;flex-direction:column;justify-content:flex-start}body{font-family:EB Garamond,serif;font-optical-sizing:auto;font-weight:600;font-style:normal}a{color:#000}a:hover{color:gray}::selection{background-color:gray;color:#fff}::-moz-selection{background-color:gray;color:#fff}*{margin:0}#nav a{color:#000;padding:5px 30px 5px 2px;transition:color .2s;transition:background-color .2s}#nav a:hover{background-color:#000;color:#fff}#nav{display:flex;flex-wrap:wrap;align-items:start;gap:10px}#socials{display:flex;flex-wrap:wrap;align-items:center;gap:10px;--big-image-size: 3rem;--small-image-size: 2rem}#socials a{width:var(--big-image-size);height:var(--big-image-size);display:flex;justify-content:center;align-content:center}#socials img{width:var(--small-image-size);transition:width .2s}#socials img:hover{width:var(--big-image-size)}