@font-face {
    font-family: "Audiowide";
    src: URL("font/Audiowide-Regular.ttf") format("truetype");
}
html {
    transform: scale(1) !important;
    display: flex;
}
a {
    text-decoration: none;
}
body {
    position: relative;
    margin: auto;
    height: 100%;
    background: transparent;
    perspective: 500px;
}
main {
    display: flex;
    position: relative;
    justify-content: space-around;
    flex-direction: column;
    transform: rotatex(10deg);
    animation: rotateAngle 6s linear infinite;
    z-index: 100 !important;
}
button {
    display: block;
    width: 100%;
    margin: 5px;
    position: relative;
    margin: 0.5em 0;
    padding: 0.8em 2.2em;
    cursor: pointer;
    background: gold;
    border: none;
    border-radius: 0.4em;
    font-size: min(5vmin, 3rem);
    font-family: Audiowide;
    mix-blend-mode: color-dodge;
    perspective: 80%;
    transform-style: preserve-3d;
}
button:before,
button:after {
    --z: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: inherit;
    border-radius: inherit;
    transform-style: preserve-3d;
    transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));
}
button span {
    mix-blend-mode: none;
    display: block;
}
button:after {
    background-color: #5d00ff;
}
button:before {
    background-color: #ff00c8;
}
button:hover {
    transform: scale(1.2);
    background-color: #fff65b;
    transition: background 0.3s 0.1s;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}
button:hover:before {
    --z: 0.04;
    animation: translateWobble 2.2s ease forwards;
}
button:hover:after {
    --z: -0.06;
    animation: translateWobble 2.2s ease forwards;
}
@keyframes rotateAngle {
    0% {
        transform: rotateY(0deg) rotateX(10deg);
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    }
    25% {
        transform: rotateY(20deg) rotateX(10deg);
    }
    50% {
        transform: rotateY(0deg) rotateX(10deg);
        animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1);
    }
    75% {
        transform: rotateY(-20deg) rotateX(10deg);
    }
    100% {
        transform: rotateY(0deg) rotateX(10deg);
    }
}
@keyframes translateWobble {
    0% {
        opacity: 0;
        transform: translate3d(calc(var(--z) * 0px), calc(var(--z) * 0px), calc(var(--z) * 0px));
    }
    16% {
        transform: translate3d(calc(var(--z) * 160px), calc(var(--z) * 160px), calc(var(--z) * 160px));
    }
    28% {
        opacity: 1;
        transform: translate3d(calc(var(--z) * 70px), calc(var(--z) * 70px), calc(var(--z) * 70px));
    }
    44% {
        transform: translate3d(calc(var(--z) * 130px), calc(var(--z) * 130px), calc(var(--z) * 130px));
    }
    59% {
        transform: translate3d(calc(var(--z) * 85px), calc(var(--z) * 85px), calc(var(--z) * 85px));
    }
    73% {
        transform: translate3d(calc(var(--z) * 110px), calc(var(--z) * 110px), calc(var(--z) * 110px));
    }
    88% {
        opacity: 1;
        transform: translate3d(calc(var(--z) * 90px), calc(var(--z) * 90px), calc(var(--z) * 90px));
    }
    100% {
        opacity: 1;
        transform: translate3d(calc(var(--z) * 100px), calc(var(--z) * 100px), calc(var(--z) * 100px));
    }
}