body{perspective:100vw}header{display:flex;justify-content:center;align-items:center;width:100%;padding:0rem 0 0rem 0rem}header h1{font-family:Audiowide;font-size:4rem;color:#fff;text-shadow:0px 0px 20px var(--theme-shadow)}.threeD-button-set{--y: 0deg;--x: 0deg;--distance: 1px;--theme: hsl(262, 22%, 19%);--theme-bg: rgb(89, 40, 212,.5);--theme-bg-hover: rgb(113, 97, 216);--theme-text: white;--theme-shadow: hsl(180 100% 10% / 25%);--_max-rotateY: 10deg;--_max-rotateX: 10deg;--_btn-bg: var(--theme-bg);--_btn-bg-hover: var(--theme-bg-hover);--_btn-text: var(--theme-text);--_btn-text-shadow: var(--theme-shadow);--_bounce-ease: cubic-bezier(.5, 1.75, .75, 1.25);margin:0;display:flex;flex-direction:column;align-items:center;gap:2.5vh;transform-style:preserve-3d;transform:rotateY(clamp(calc(var(--_max-rotateY) * -1),var(--y),var(--_max-rotateY))) rotateX(clamp(calc(var(--_max-rotateX) * -1),var(--x),var(--_max-rotateX)))}.threeD-button-set:focus{outline:none}@media (--motionOK){.threeD-button-set{will-change:transform;transition:transform .1s ease;animation:rotate-y 5s ease-in-out infinite}}@media (--dark){.threeD-button-set{--theme: hsl(255 53% 50%);--theme-bg: hsl(255 53% 71% / 25%);--theme-bg-hover: hsl(255 53% 50% / 40%);--theme-shadow: hsl(255 53% 10% / 25%)}}@media (--HDcolor){@supports (color: color(display-p3 0 0 0)){.threeD-button-set{--theme: color(display-p3 .4 0 .9)}}}.threeD-button-set>li{display:inline-flex;position:relative;transform-style:preserve-3d}.threeD-button-set button{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;-webkit-tap-highlight-color:transparent;background-color:var(--_btn-bg);color:var(--_btn-text);text-shadow:0 1px 1px var(--_btn-text-shadow);font-size:min(4vmin,3rem);font-family:Audiowide;padding-block:.75ch;padding-inline:2ch;border-radius:5px 20px;transform:translateZ(var(--distance));transform-style:preserve-3d}.threeD-button-set button:is(:hover,:focus-visible):not(:active){--distance: 15px;background-color:var(--_btn-bg-hover)}@media (--motionOK){.threeD-button-set button:is(:hover,:focus-visible):not(:active){--distance: 1vmax;transition-timing-function:var(--_bounce-ease);transition-duration:.4s}.threeD-button-set button:is(:hover,:focus-visible):not(:active):after{transition-duration:.5s}.threeD-button-set button:is(:hover,:focus-visible):not(:active):before{transition-duration:.3s}}.threeD-button-set button:after,.threeD-button-set button:before{content:"";opacity:.8;position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--theme);border-radius:5px 20px;transform:translateZ(calc(var(--distance) / 3))}@media (--motionOK){{transition:transform .1s ease-out}}.threeD-button-set button:before{border-width:3px;transform:translateZ(calc(var(--distance) / 3 * -1))}@media (--dark){{box-shadow:0 0 25px var(--theme),inset 0 0 25px var(--theme)}}@media (--motionOK){.threeD-button-set button{will-change:transform;transition:transform .2s ease,background-color .5s ease}}@keyframes rotate-y{50%{transform:rotateY(15deg) rotateX(-6deg)}}