:root{--button-width: 140px;--button-height: 50px}html{height:100%}body{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;background-color:#fff;margin:0}.button{width:var(--button-width);height:var(--button-height);padding:15px 30px;font-size:16px;border:none;border-radius:10px;cursor:pointer;margin:10px}h1{font-family:"Baloo 2",sans-serif;font-size:48px;text-align:center;line-height:1.1}.button-grid{display:grid;place-items:center;grid-template-columns:repeat(4,1fr);padding:50px 20px;max-width:800px;width:100%}footer{color:#fff;background:#0ff;display:flex;justify-content:center;align-items:center;width:100%;margin-top:auto}footer p{margin:0;text-align:center;font-size:20px;color:#83007c;padding:10px}.github-link i{width:max-content;border-radius:10px;font-size:20px;transition:all 1.2s;margin:0 10px;color:#83007c}.github-link i:hover{transform:rotateX(360deg) rotate(360deg);color:#ff72f8}@media screen and (max-width: 1024px){h1{font-size:32px}.button-grid{padding:40px 20px;max-width:600px}}@media screen and (max-width: 768px){.button-grid{padding:40px 20px;grid-template-columns:repeat(2,1fr);max-width:400px}}@media screen and (max-width: 476px){.button-grid{padding:30px 10px;max-width:320px}}@media screen and (max-width: 428px){footer p{font-size:16px}}@media screen and (max-width: 376px){.button-grid{grid-template-columns:repeat(1,1fr);padding:10px 0}}@property --gradient-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.border-button{position:relative;background:#d1fae5;transition:all .3s}.border-button:hover{background:#a7f3d0}.border-button:before,.border-button:after{background:conic-gradient(from var(--gradient-angle),greenyellow,#084908,greenyellow,#084908,greenyellow);content:"";position:absolute;top:-.2rem;right:-.2rem;bottom:-.2rem;left:-.2rem;border-radius:inherit;z-index:-1;opacity:0;transition:all .6s ease;animation:rotation 2s linear infinite}.border-button:hover:before,.border-button:hover:after{opacity:1}.border-button:after{filter:blur(.5rem)}@keyframes rotation{0%{--gradient-angle: 0deg}to{--gradient-angle: 360deg}}.blink-button{padding:15px 30px;font-size:16px;border:none;border-radius:10px;background:#6ac4ff;color:#fff;cursor:pointer;position:relative;overflow:hidden;transition:all .6s ease-in}.blink-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;z-index:0;opacity:0;transition:all .6s ease-in}.blink-button:hover:before{opacity:1;transform:scale(1);animation:blink .6s forwards}@keyframes blink{0%{opacity:.6;background:#fff}20%{opacity:.8;background:#fff}to{opacity:0;background:#fff}}.blink-button:hover{background:#01f;transition:background .6s ease-in-out;animation:pulse .3s forwards}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.trail-button{background:#000;color:#fff;overflow:hidden;position:relative}.trail-button:before{content:"";position:absolute;top:var(--y);left:var(--x);transform:translate(-50%,-50%);background:radial-gradient(white,transparent,transparent);width:80px;height:80px;opacity:0;transition:.3s,top 0s,left 0s}.trail-button:hover:before{opacity:.8}.trail{position:absolute;border-radius:50%;background:#fff;width:20px;height:20px;pointer-events:none;opacity:0;filter:blur(10px);transform:translate(-50%,-50%)}.gradient-button{background:linear-gradient(135deg,#2a2a72,#00f,#6ff,#008cff);background-size:400%;background-position:0%;color:#fff;transition:all .3s ease}.gradient-button:hover{background-position:100%;color:#2a2a72}.pixels-button{display:grid;justify-content:center;align-items:center;position:relative;background-color:transparent;overflow:hidden;border:2px solid #ccc;z-index:1}.ripple-button{color:#000;display:inline-block;overflow:hidden;transition:all .6s;position:relative;background:#ff8181}.ripple-button:hover{background-color:#c50000;color:#fff}.ripple-button>span{position:absolute;background:#000;width:300px;height:300px;transform:translate(-50%) translateY(-50%) scale(0);pointer-events:none;border-radius:50%;animation:ripple .6s linear forwards}@keyframes ripple{0%{transform:translate(-50%) translateY(-50%) scale(0);opacity:.7}to{transform:translate(-50%) translateY(-50%) scale(1);opacity:0}}.radiate-button{border:none;background-color:#a7ffa9;color:#000;cursor:pointer;position:relative;overflow:hidden;transition:all .6s}.radiate-button.active{background-color:#06e006}.circle{position:absolute;border-radius:50%;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease}.converge-button{color:#ff0;border:2px solid #ff0;background:#000;position:relative;overflow:hidden;z-index:1}.circular-span{position:absolute;top:calc(50% - 10px);width:20px;height:20px;border-radius:50%;background:#ff0;opacity:0;filter:blur(5px);z-index:-1;pointer-events:none;transition:transform .3s ease,opacity .3s ease}.circular-span[data-span-id="1"]{left:0;transform-origin:calc(var(--button-width) / 2) 10px;transform:rotate(-90deg)}.circular-span[data-span-id="2"]{right:25%;transform-origin:calc(20px - var(--button-width) / 4) 10px;transform:rotate(90deg)}.circular-span[data-span-id="3"]{left:25%;transform-origin:calc(var(--button-width) / 4) 10px;transform:rotate(90deg)}.circular-span[data-span-id="4"]{right:0;transform-origin:calc(20px - var(--button-width) / 2) 10px;transform:rotate(-90deg)}.converge-button:hover .circular-span{transform:rotate(0);opacity:1}.converge-button:hover{animation:invert 1s forwards}@keyframes invert{0%{background:#000;border:2px solid #ff0;color:#ff0}to{background:#ff0;border:2px solid black;color:#000}}.interlace-button{position:relative;background:#ade6d3;color:#333;overflow:hidden;z-index:1}.line{position:absolute;width:calc(.75 * var(--button-width));height:calc(.1 * var(--button-height));background:linear-gradient(180deg,#00662a4d,#00c2514d,#00662a4d);transition:opacity .3s ease,transform .3s ease;opacity:.025;z-index:-1}.interlace-button:hover .bottom-left-line{opacity:.7;transform:rotate(45deg)}.interlace-button:hover .bottom-right-line,.interlace-button:hover .top-left-line{opacity:.7;transform:rotate(-45deg)}.interlace-button:hover .top-right-line{opacity:.7;transform:rotate(45deg)}.fusion-button{position:relative;overflow:hidden;background:radial-gradient(circle,#e6a800 40%,#a06000);z-index:0}.fusion-button:before{content:"Fusion";position:absolute;color:#fff;top:0;right:0;bottom:0;left:0;background:#b88b00;transition:opacity .8s ease-in-out;opacity:1;z-index:1;display:flex;justify-content:center;align-items:center}.fusion-button:hover:before{opacity:0}.fusion-button .left-circle,.fusion-button .right-circle,.fusion-button .top-circle,.fusion-button .bottom-circle{position:absolute;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,rgba(255,234,0,.8),transparent);opacity:0;z-index:3;pointer-events:none}.left-circle{left:calc(-1 * var(--button-height) / 2);top:calc(50% - var(--button-height) / 2)}.right-circle{right:calc(-1 * var(--button-height) / 2);top:calc(50% - var(--button-height) / 2)}.top-circle{left:calc(50% - var(--button-height) / 2);top:calc(-1 * var(--button-width) / 2)}.bottom-circle{left:calc(50% - var(--button-height) / 2);bottom:calc(-1 * var(--button-width) / 2)}.weld-button{position:relative;background:#414141;border:2px solid #9ca3af;overflow:hidden;display:inline-flex;justify-content:center;align-items:center}.button-text{position:relative;z-index:2;color:#fff;transition:color .3s .3s}.weld-button:hover .button-text{color:#000}.arrow-up{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:var(--button-height) solid #d9d9d9;position:absolute;bottom:-65%;transform:translateY(50%);transition:.3s;pointer-events:none;z-index:0}.arrow-up:before{left:-25px;top:-5px;width:0;height:0;border-bottom:calc(var(--button-height) + 10px) solid rgba(235,235,235,.5);pointer-events:none}.arrow-down{width:0;height:0;border-left:20px solid transparent;border-right:20px solid transparent;border-top:var(--button-height) solid #d9d9d9;position:absolute;top:-65%;transform:translateY(-50%);transition:.3s;pointer-events:none;z-index:0}.arrow-down:before{left:-25px;bottom:-5px;width:0;height:0;border-top:calc(var(--button-height) + 10px) solid rgba(235,235,235,.5);pointer-events:none}.arrow-down.hover{top:50%}.arrow-up.hover{bottom:50%}.arrow-up:before,.arrow-down:before{content:"";position:absolute;animation:none;transition:all .3s ease;border-left:25px solid transparent;border-right:25px solid transparent}.weld-button:hover .arrow-up:before,.weld-button:hover .arrow-down:before{animation:weld .6s linear .3s forwards}@keyframes weld{0%{border-bottom-color:#ebebeb80;border-top-color:#ebebeb80}50%{border-bottom-color:#ffa600bf;border-top-color:#ffa600bf}to{border-bottom-color:#ebebeb;border-top-color:#ebebeb}}.stream-button{position:relative;background-color:#ffdff7;color:#000;overflow:hidden;border:2px solid rgba(255,0,242,.35)}.stream-button:before{content:"Stream";display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#ff00f2b3,#ff00f21a);color:#fff;opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:2}.stream-button:hover:before{opacity:1;transition:opacity .6s ease}.line-downwards{position:absolute;width:3px;height:calc(var(--button-height) / 4);background-color:#ff00f2;top:0;left:50%;transform:translate(-50%) translateY(calc(-1 * var(--button-height) / 4));animation:lineDown .6s forwards}.line-upwards{position:absolute;width:3px;height:calc(var(--button-height) / 4);background-color:#ff00f2;bottom:0;left:50%;transform:translate(-50%) translateY(calc(var(--button-height) / 4));animation:lineUp .6s forwards}@keyframes lineDown{0%{transform:translate(-50%) translateY(calc(-1 * var(--button-height) / 4))}to{transform:translate(-50%) translateY(calc(var(--random-top) * var(--button-height) / 100));opacity:0}}@keyframes lineUp{0%{transform:translate(-50%) translateY(calc(var(--button-height) / 4))}to{transform:translate(-50%) translateY(calc(-1 * var(--random-bottom) * var(--button-height) / 100));opacity:0}}.shatter-button{position:relative;background-color:#001f3f;color:#fff;border:2px solid lightblue;overflow:hidden;z-index:0}.cascade-button{position:relative;background-color:#ef4444;border:2px solid #feb2b2;overflow:hidden}.cascade-button>span{position:relative;color:#feb2b2;z-index:2}.squares-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.square{position:absolute;width:5px;height:5px;z-index:1;background-color:#9b1c1c;opacity:1;transition:opacity .5s ease;pointer-events:none}.water-button{position:relative;color:#000;background:#d0eeff;overflow:hidden}.water-button:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:100%;background-color:#3636ff80;transform:scaleY(0);transform-origin:bottom;transition:transform .9s}.water-button:hover:after{transform:scaleY(1)}.water-button:not(:hover):after{transition:transform .3s}.droplet{position:absolute;background-color:#3636ff80;border-bottom-left-radius:50%;border-bottom-right-radius:50%;border-top-right-radius:50%;pointer-events:none}.static-button{position:relative;overflow:hidden;aspect-ratio:1;background:#0c0a2e;color:#fff;transition:background-color .4s ease-in-out}.static-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-radial-gradient(#000 0,#000,#fff,#fff .0002%) 60% 60%/3000px 3000px,repeating-conic-gradient(#000 0,#000 .001%,#fff 0,#fff .002%) 60% 60%/3000px 3000px;background-blend-mode:difference;opacity:0;animation:static .1s infinite alternate;transition:opacity .3s ease-in-out;z-index:1}.static-button:hover{background-color:#4f46e5}.static-button.static-flash:before{opacity:.75}@keyframes static{to{background-position:50% 0,60% 50%}}.rainbow-button{color:#fff;background:linear-gradient(90deg,red,orange,#ff0,green,#00f,indigo,violet);background-size:300% 100%;background-position:var(--x, 50%) center;background-repeat:no-repeat;cursor:pointer;outline:none;transition:all .3s}.matrix-button{position:relative;background:#000;color:#adff2f;border:none;overflow:hidden;text-align:center}.matrix-char{position:absolute;color:#adff2f;pointer-events:none;padding:1px;opacity:0;font-size:8px;line-height:8px;font-weight:700;z-index:0}.button-label{position:relative;z-index:2;padding:4px}.button-label:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,#000,#00000080 70%);border-radius:50%;z-index:-1;pointer-events:none}.pulse-button{position:relative;background:#1e40af;color:#fff;border:none;overflow:hidden}.pulse-button>span{position:relative;z-index:10}.pulse-ring{position:absolute;top:50%;left:50%;width:20px;height:20px;border-radius:50%;border:3px solid #60a5fa;background:transparent;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}.pulse-ring.active{animation:pulseExpand .6s ease-out forwards}.pulse-ring-2.active{animation-delay:.1s}@keyframes pulseExpand{0%{transform:translate(-50%,-50%) scale(0);opacity:.5}70%{opacity:.2}85%{transform:translate(-50%,-50%) scale(7);opacity:0}to{transform:translate(-50%,-50%) scale(9);opacity:0}}.pulse-edge{position:absolute;opacity:0;pointer-events:none;transition:opacity .6s ease}.pulse-top{top:0;left:0;width:100%;height:50%;background:linear-gradient(to bottom,#60a5fa,transparent)}.pulse-bottom{bottom:0;left:0;width:100%;height:50%;background:linear-gradient(to top,#60a5fa,transparent)}.pulse-left{top:0;left:0;width:50%;height:100%;background:linear-gradient(to right,#60a5fa,transparent)}.pulse-right{top:0;right:0;width:50%;height:100%;background:linear-gradient(to left,#60a5fa,transparent)}.pulse-edge.active{opacity:1}.vortex-button{position:relative;background:#001833;color:#fff;border:none;overflow:hidden}.vortex-button:hover{z-index:10}.vortex-button>span{position:relative;z-index:10}.vortex-square{position:absolute;top:50%;left:50%;box-sizing:border-box;width:calc(140px*pow(.96,var(--i)));height:calc(140px*pow(.96,var(--i)));transform:translate(-50%,-50%) rotate(calc(var(--i) * 10deg));background:transparent;border:2px solid rgba(30,160,255,1);pointer-events:none;opacity:0;transition:opacity .2s ease}.vortex-button:hover .vortex-square{opacity:calc(.3 + (var(--i) / var(--n)) * .4);transition-delay:calc(var(--i) * 7ms)}