@font-face {
    font-family: "Audiowide";
    src: URL("font/Audiowide-Regular.ttf") format("truetype");
}
body {
    perspective: 40vw;
}
.threeD-button-set {
    --distance: 1px;
    --theme: #ff00c8;
    --theme-bg: rgba(0, 0, 0, 1);
    --theme-bg-hover: purple;
    --theme-text: white;
    --theme-shadow: hsl(180 100% 10% / 25%);
    --_max-rotateY: 10deg;
    --_max-rotateX: 15deg;
    --_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(0.5, 1.75, 0.75, 1.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    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)));
    -webkit-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)));
    -moz-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)));
    -ms-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)));
    -o-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: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .threeD-button-set {
        will-change: transform;
        transition: transform 0.1s ease;
        -webkit-animation: rotate-y 5s ease-in-out infinite;
        animation: rotate-y 5s ease-in-out infinite;
    }
}
@media (dynamic-range: high) {
    @supports (color: color(display-p3 0 0 0)) {
        .threeD-button-set {
            --theme: color(display-p3 0.4 0 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: 0;
    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(5vmin, 3rem);
    font-family: Audiowide;
    padding-block: 0.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 (prefers-reduced-motion: no-preference) {
    .threeD-button-set button:is(:hover, :focus-visible):not(:active) {
        --distance: 3vmax;
        transition-timing-function: var(--_bounce-ease);
        transition-duration: 0.4s;
    }
    .threeD-button-set button:is(:hover, :focus-visible):not(:active)::after {
        transition-duration: 0.5s;
    }
    .threeD-button-set button:is(:hover, :focus-visible):not(:active)::before {
        transition-duration: 0.3s;
    }
}
.threeD-button-set button::after,
.threeD-button-set button::before {
    content: "";
    opacity: 0.8;
    position: absolute;
    inset: 0;
    border: 1px solid var(--theme);
    border-radius: 5px 20px;
    transform: translateZ(calc(var(--distance) / 3));
}
@media (prefers-reduced-motion: no-preference) {
    .threeD-button-set button::after,
    .threeD-button-set button::before {
        transition: transform 0.1s ease-out;
    }
}
.threeD-button-set button::before {
    border-width: 3px;
    transform: translateZ(calc(var(--distance) / 3 * -1));
}
@media (prefers-reduced-motion: no-preference) {
    .threeD-button-set button {
        will-change: transform;
        transition: transform 0.2s ease, background-color 0.5s ease;
    }
}
@-webkit-keyframes rotate-y {
    50% {
        transform: rotateY(15deg) rotateX(-6deg);
    }
}
@keyframes rotate-y {
    50% {
        transform: rotateY(15deg) rotateX(-6deg);
    }
}
html {
    block-size: 100%;
}
body {
    min-block-size: 100%;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    display: grid;
    align-content: center;
    justify-content: center;
    place-content: center;
}