.retro-btn{--rb-face: #ec4e53;--rb-side: #7e2f2f;--rb-border: #a83c3c;--rb-text: #f3ede1;position:relative;display:inline-block;width:100%;text-transform:uppercase;background:none;font-family:var(--century-gothic),Century Gothic,Futura,sans-serif}.retro-btn.inactive{--rb-face: #eb2029;--rb-side: #5e1f1f;--rb-border: #970e14}.retro-btn.active{--rb-face: #a41e21;--rb-side: #47191a;--rb-border: #680a0e;--rb-text: #ddd3c5}.retro-btn .btn:hover{--rb-text: #d0c5b6;--rb-border: rgba(18, 18, 18, .5);--rb-face: #a01a21}.retro-btn .btn.btn-active{--rb-text: #bfb3a4;--rb-border: rgba(15, 15, 15, .6)}.retro-btn .btn{user-select:none;box-sizing:border-box;display:block;position:relative;width:100%;height:54px;padding-top:3px;cursor:pointer;font-weight:700;font-size:17px;line-height:50px;letter-spacing:.05em;text-align:center;text-decoration:none;color:inherit;background:transparent;border:0;transition:opacity .1s ease-out;z-index:5;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}.retro-btn .btn,.retro-btn .btn:focus{outline:none}.retro-btn .btn:focus-visible{outline:2px solid #f97d7d;outline-offset:2px}.retro-btn .btn:hover .btn-content-inner:before{background-color:#0d0d0d1a}.retro-btn .btn:before{content:" ";background-color:#0d0d0d4d;width:calc(100% - 2px);height:calc(100% - 4px);bottom:-1px;left:1px;position:absolute;border-radius:3px;z-index:1;transition:transform .12s ease-out,background .12s ease-out}.retro-btn .btn.btn-left:before{transform:skewY(1deg) translate3d(0,-.5px,0)}.retro-btn .btn.btn-left .btn-content{transform:skewY(-1deg)}.retro-btn .btn.btn-right:before{transform:skewY(-1deg) translate3d(0,-.5px,0)}.retro-btn .btn.btn-right .btn-content{transform:skewY(1deg)}.retro-btn .btn.btn-left .btn-inner .content-wrapper .btn-content{background-image:linear-gradient(to right,#0000,#ffffff14)}.retro-btn .btn.btn-right .btn-inner .content-wrapper .btn-content{background-image:linear-gradient(to left,#0000,#ffffff14)}.retro-btn .btn.btn-center:before{transform:translate3d(0,-2.5px,0)}.retro-btn .btn.btn-center .btn-content{transform:translate3d(0,1.75px,0)}.retro-btn .btn.btn-active .btn-inner .content-wrapper .btn-content{background-color:#721819;background-image:none;border-left-width:2px;border-right-width:2px;border-top-width:4px;border-bottom-width:1px;transition:transform .12s ease-out,background .12s ease-out,color .12s ease-out;transform:translate3d(0,2.5px,0)}.retro-btn .btn.btn-active:before{transform:translate3d(0,-4px,0)}.retro-btn .btn-inner{display:block;height:100%}.retro-btn .btn-inner .content-wrapper{position:relative;display:flex;align-items:stretch;width:100%;height:calc(100% - 3px);margin-top:-3px}.retro-btn .btn-inner .content-wrapper:before,.retro-btn .btn-inner .content-wrapper:after,.retro-btn .btn-inner .content-wrapper .btn-content:before,.retro-btn .btn-inner .content-wrapper .btn-content:after,.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner:before{display:block;position:absolute;width:100%;height:100%;top:0;left:0}.retro-btn .btn-inner .content-wrapper:before{background-color:var(--rb-side);content:" ";border-radius:3px;top:auto;bottom:-3px;z-index:1;transition:transform .185s ease-out,background .185s ease-out}.retro-btn .btn-inner .content-wrapper:after{background-color:#0d0d0d26;content:" ";border-radius:3px;z-index:3;width:0;top:2px}.retro-btn .btn-inner .content-wrapper .btn-content{background-color:var(--rb-face);color:#e9e7e0;position:relative;display:flex;flex:1;align-items:center;justify-content:center;border-radius:3px;border:1px solid var(--rb-border);box-sizing:border-box;z-index:3;overflow:hidden;padding:0 16px;transition:border .185s ease-out,transform .185s ease-out,background .185s ease-out,color .185s ease-out}.retro-btn .btn-inner .content-wrapper .btn-content:before,.retro-btn .btn-inner .content-wrapper .btn-content:after{display:flex;align-items:center;justify-content:center;color:#fffc;opacity:0;transition:opacity .1125s ease-out .05s,transform .185s ease-out .05s}.retro-btn .btn-inner .content-wrapper .btn-content:before{content:" ";transform:translate3d(0,50%,0)}.retro-btn .btn-inner .content-wrapper .btn-content:after{content:" ";transform:translate3d(0,-50%,0)}.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner{display:block;transition:opacity 75ms ease-out .1125s}.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner:before{content:attr(label);padding-top:0;font-size:1.2em;font-family:inherit;font-weight:900;letter-spacing:.1em;color:#f7f1e6;text-shadow:-1px -1px 0 rgba(255,255,255,.3),0 1px 0 #8a7f6c,0 2px 0 #4a4336,0 5px 8px rgba(0,0,0,.5);transition:opacity .3s ease-out,background-color .1125s ease-in,color .185s ease-out;opacity:1;z-index:-1}.retro-btn.active .btn:not(.btn-left):not(.btn-right):not(.btn-center):before{transform:translate3d(0,-1.5px,0)}.retro-btn.active .btn:not(.btn-left):not(.btn-right):not(.btn-center) .btn-content{transform:translate3d(0,1.25px,0)}@media (prefers-reduced-motion: reduce){.retro-btn .btn,.retro-btn .btn:before,.retro-btn .btn-inner .content-wrapper,.retro-btn .btn-inner .content-wrapper:before,.retro-btn .btn-inner .content-wrapper .btn-content,.retro-btn .btn-inner .content-wrapper .btn-content .btn-content-inner{transition:none}}