*{margin:0;padding:0}html,body{overflow:hidden}.webgl{position:fixed;top:0;left:0;outline:none}@font-face{font-family:Mario;src:url(../SuperMarioBrosNES.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}button{box-sizing:border-box;border-style:solid;border-width:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;font-weight:inherit;font-family:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;z-index:10;bottom:0;left:50%;transform:translate(-50%,-50%);--bevel: 3px;--border-width: 3px;font-family:Mario;font-weight:600;font-size:clamp(1rem,4vw + 1rem,2.5rem);color:#1d2119;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.95));min-width:10em;text-align:center}.button-outline{--bevel-1: calc( (var(--bevel) + (var(--border-width)) * 2) - ((var(--border-width) * .41421)) * 2 );--bevel-2: calc(var(--bevel-1) + var(--border-width));--bevel-3: calc(var(--bevel-2) + var(--border-width));display:block;margin-top:calc(var(--border-width) * -1);margin-left:calc(var(--border-width) * -1);padding:var(--border-width);background-color:#fff;clip-path:polygon(var(--bevel-2) var(--border-width),calc(100% - var(--bevel-2)) var(--border-width),100% var(--bevel-3),100% calc(100% - var(--bevel-1)),calc(100% - var(--bevel-1)) 100%,var(--bevel-3) 100%,var(--border-width) calc(100% - var(--bevel-2)),var(--border-width) var(--bevel-2));transition-property:clip-path;transition-duration:.2s}.button:hover:not(:active) .button-outline,.button:focus-visible:not(:active) .button-outline{clip-path:polygon(var(--bevel-1) 0,calc(100% - var(--bevel-3)) 0,100% var(--bevel-3),100% calc(100% - var(--bevel-1)),calc(100% - var(--bevel-1)) 100%,var(--bevel-3) 100%,0 calc(100% - var(--bevel-3)),0 var(--bevel-1))}.button-shadow{--padding: calc(var(--border-width) * 2);--bevel-1: calc( (var(--bevel) + var(--border-width)) - (var(--border-width) * .41421) );--bevel-2: calc(var(--bevel-1) + var(--border-width));--bevel-3: calc(var(--bevel-2) + var(--border-width));display:block;padding:calc(var(--border-width) * 2) var(--padding) var(--padding) calc(var(--border-width) * 2);background-color:#1d2119;clip-path:polygon(var(--bevel-2) var(--border-width),calc(100% - var(--bevel-2)) var(--border-width),100% var(--bevel-3),100% calc(100% - var(--bevel-1)),calc(100% - var(--bevel-1)) 100%,var(--bevel-3) 100%,var(--border-width) calc(100% - var(--bevel-2)),var(--border-width) var(--bevel-2));transition-property:clip-path;transition-duration:.2s}.button:hover:not(:active) .button-shadow,.button:focus-visible:not(:active) .button-shadow{clip-path:polygon(var(--bevel-1) 0,calc(100% - var(--bevel-3)) 0,100% var(--bevel-3),100% calc(100% - var(--bevel-1)),calc(100% - var(--bevel-1)) 100%,var(--bevel-3) 100%,0 calc(100% - var(--bevel-3)),0 var(--bevel-1))}.button-inside{--padding-vertical: .4em;display:block;padding:var(--padding-vertical) 24px calc(var(--padding-vertical) - .125em);background-color:#fff;clip-path:polygon(var(--bevel) 0,calc(100% - var(--bevel)) 0,100% var(--bevel),100% calc(100% - var(--bevel)),calc(100% - var(--bevel)) 100%,var(--bevel) 100%,0 calc(100% - var(--bevel)),0 var(--bevel));text-align:center;transition-property:transform;transition-duration:.2s}.button:hover:not(:active) .button-inside,.button:focus-visible:not(:active) .button-inside{transform:translate(calc(var(--border-width) * -1),calc(var(--border-width) * -1))}.button:hover .button-inside,.button:focus-visible .button-inside{background-color:#fcd200;background-image:linear-gradient(to right,rgba(0,0,0,0),rgba(252,210,0,.9)),radial-gradient(#fff60d 1px,rgba(0,0,0,0) 0%),radial-gradient(#fff60d 1px,rgba(0,0,0,0) 0%);background-size:auto,6px 6px,6px 6px;background-position:0 0,0 0,3px 3px;animation:scroll-background 1s linear infinite}@keyframes scroll-background{to{background-position-x:0,-6px,-3px}}.button-text-characters-container{display:inline-block;transform:skew(-6deg)}.button-outline{animation:jump .25s linear infinite;animation-play-state:running}.button.playing .button-outline{animation-play-state:paused}.button .button-text{display:flex;align-items:center;justify-content:center;gap:.5em}.button .button-text:before{content:"⏵";font-size:2em;display:inline-block}.button.playing .button-text:before{content:"⏸"}@keyframes jump{0%{transform:translate(0) rotate(0)}25%{transform:translate(5px,5px) rotate(5deg)}50%{transform:translate(0) rotate(0)}75%{transform:translate(-5px,5px) rotate(-5deg)}to{transform:translate(0) rotate(0)}}
