@import "https://fonts.cdnfonts.com/css/mona-sans";
:root{--shiny-cta-bg:#000;--shiny-cta-bg-subtle:#1a1818;--shiny-cta-fg:#fff;--shiny-cta-highlight:blue;--shiny-cta-highlight-subtle:#8484ff}@property --gradient-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --gradient-angle-offset{syntax:"<angle>";inherits:false;initial-value:0deg}@property --gradient-percent{syntax:"<percentage>";inherits:false;initial-value:5%}@property --gradient-shine{syntax:"<color>";inherits:false;initial-value:#fff}.shiny-cta{--animation:gradient-angle linear infinite;--duration:3s;--shadow-size:2px;isolation:isolate;cursor:pointer;outline-offset:4px;color:var(--shiny-cta-fg);background:linear-gradient(var(--shiny-cta-bg),var(--shiny-cta-bg))padding-box,conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),transparent,var(--shiny-cta-highlight)var(--gradient-percent),var(--gradient-shine)calc(var(--gradient-percent)*2),var(--shiny-cta-highlight)calc(var(--gradient-percent)*3),transparent calc(var(--gradient-percent)*4))border-box;box-shadow:inset 0 0 0 1px var(--shiny-cta-bg-subtle);border:1px solid #0000;border-radius:360px;padding:1.25rem 2.5rem;font-family:inherit;font-size:1.125rem;line-height:1;position:relative;overflow:hidden}.shiny-cta:before,.shiny-cta:after,.shiny-cta span:before{content:"";pointer-events:none;z-index:-1;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.shiny-cta:active{translate:0 1px}.shiny-cta:before{--size:calc(100% - var(--shadow-size)*3);--position:2px;--space:calc(var(--position)*2);width:var(--size);height:var(--size);background:radial-gradient(circle at var(--position)var(--position),white calc(var(--position)/4),transparent 0)padding-box;background-size:var(--space)var(--space);-webkit-mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg),black,transparent 10% 90%,black);border-radius:inherit;opacity:.4;z-index:-1;background-repeat:space}.shiny-cta:after{--animation:shimmer linear infinite;aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--shiny-cta-highlight),transparent);opacity:.6;width:100%;-webkit-mask-image:radial-gradient(circle at bottom,#0000 40%,#000);mask-image:radial-gradient(circle at bottom,#0000 40%,#000)}.shiny-cta span{z-index:1}.shiny-cta span:before{--size:calc(100% + 1rem);width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);opacity:0}.shiny-cta{--transition:.8s cubic-bezier(.25,1,.5,1);transition:var(--transition);transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine}.shiny-cta,.shiny-cta:before,.shiny-cta:after{animation:var(--animation)var(--duration),var(--animation)calc(var(--duration)/.4)reverse paused;animation-composition:add}.shiny-cta span:before{transition:opacity var(--transition);animation:calc(var(--duration)*1.5)breathe linear infinite}.shiny-cta:is(:hover,:focus-visible){--gradient-percent:20%;--gradient-angle-offset:95deg;--gradient-shine:var(--shiny-cta-highlight-subtle)}.shiny-cta:is(:hover,:focus-visible),.shiny-cta:is(:hover,:focus-visible):before,.shiny-cta:is(:hover,:focus-visible):after{animation-play-state:running}.shiny-cta:is(:hover,:focus-visible) span:before{opacity:1}@keyframes gradient-angle{to{--gradient-angle:360deg}}@keyframes shimmer{to{rotate:360deg}}@keyframes breathe{0%,to{scale:1}50%{scale:1.2}}
body{background:#0a0015;font-family:Trebuchet MS,sans-serif;font-size:15.5px}*{box-sizing:border-box}.container{grid-gap:23px;perspective:1000px;grid-template-columns:repeat(auto-fit,minmax(200px,200px));grid-auto-rows:200px;grid-auto-flow:dense;justify-content:center;width:100%;display:grid}.card-top,.card-right,.card-bottom,.card-left{cursor:pointer;background:#060010;border-radius:30px;flex-wrap:nowrap;width:100%;height:100%;transition:transform .5s,box-shadow .5s;display:flex;position:relative;overflow:hidden}.card-top:hover,.card-right:hover,.card-bottom:hover,.card-left:hover{transform:scale(1.05)translateY(-5px)rotateX(4deg)rotateY(4deg);box-shadow:0 0 50px #3b82f699}.card-top:before,.card-right:before,.card-bottom:before,.card-left:before{content:"";pointer-events:none;border-radius:30px;width:100%;height:100%;transition:box-shadow .5s;position:absolute;top:0;left:0;box-shadow:0 0 20px #ffffff0d}.card-top:hover:before,.card-right:hover:before,.card-bottom:hover:before,.card-left:hover:before{box-shadow:0 0 40px #3b82f64d}.card-top{flex-direction:column;grid-area:auto/auto/span 2/span 1}.card-right{flex-direction:row-reverse;grid-area:auto/auto/span 1/span 2}.card-bottom{flex-direction:column-reverse;grid-area:auto/auto/span 2/span 1}.card-left{flex-direction:row;grid-area:auto/auto/span 1/span 2}.card-image{transition:transform .6s,filter .5s;display:flex}.card-image:hover{filter:brightness(1.1)saturate(1.1);transform:translateY(-5px)rotateX(3deg)rotateY(3deg)}.card-top .card-image,.card-bottom .card-image{width:100%;height:50%}.card-left .card-image,.card-right .card-image{width:50%;height:100%}.card-image img{object-fit:cover;width:100%;height:100%;transition:transform .6s}.card-top img{border-radius:30px 30px 0 0}.card-right img{border-radius:0 30px 30px 0}.card-bottom img{border-radius:0 0 30px 30px}.card-left img{border-radius:30px 0 0 30px}.card-text{align-self:center;padding:23px;transition:transform .5s,opacity .5s}.card-text:hover{transform:translateY(-3px)}.card-top .card-text{width:auto;height:auto;padding-bottom:36.8px}.card-right .card-text{width:50%;height:auto;padding-left:36.8px}.card-bottom .card-text{width:auto;height:auto;padding-top:36.8px}.card-left .card-text{width:50%;height:auto;padding-right:36.8px}.card-text p{color:#e2e2e2;margin:0;line-height:1.25em}@media (max-width:500px){.card-top{flex-direction:row;grid-area:auto/auto/span 1/span 2}.card-bottom{flex-direction:row-reverse;grid-area:auto/auto/span 1/span 2}.card-top .card-image,.card-bottom .card-image{width:50%;height:100%}.card-top img{border-radius:30px 0 0 30px}.card-bottom img{border-radius:0 30px 30px 0}.card-top .card-text{width:50%;height:auto;padding-right:36.8px}.card-bottom .card-text{width:50%;height:auto;padding-left:36.8px}}@media (max-width:400px){.card-image{width:38%!important}.card-text{width:62%!important}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.card-image{animation:4s ease-in-out infinite float}