.buttons-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:50px;row-gap:75px;justify-items:center}button{position:relative;z-index:1;border:none;background:var(--color-light);box-shadow:#64646f33 0 7px 29px;width:230px;height:80px;font-size:16px;border-radius:6px;cursor:pointer}button:before{content:"";position:absolute;z-index:-1;top:0;left:0;width:100%;height:100%;border-radius:6px}.btn-1{overflow:hidden}.btn-1:is(:hover,:focus):before{transform:rotate(0)}.btn-1:before{content:"";position:absolute;z-index:-1;bottom:0;left:0;width:110%;height:110%;background-color:#f87171;transform:rotate(-90deg);transform-origin:bottom left;transition:transform .75s}.btn-2{overflow:hidden;color:#4c1d95;transition:all 1s}.btn-2:before{background-color:#4c1d95;transform:translate(-101%);transition:all 1s}.btn-2:is(:hover,:focus):before{transform:translate(0)}.btn-2:is(:hover,:focus){color:#fff}.btn-3{transition:all 1s;color:#020617;overflow:hidden}.btn-3:before{background-color:#1e293b;transform:rotateX(90deg);transition:all .75s}.btn-3:after{content:"";z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1e293b;transform:rotateY(90deg);transition:all .75s}.btn-3:is(:hover,:focus):before{transform:rotateX(0)}.btn-3:is(:hover,:focus):after{transform:rotateY(0)}.btn-3:is(:hover,:focus){color:#fff}.btn-4{border:2.5px solid #ef4444;color:#ef4444;font-weight:400;text-transform:uppercase;transition:all .5s;background:none;box-shadow:none}.btn-4:is(:hover,:focus){font-weight:700;letter-spacing:4px;border:4qpx solid #ef4444}.btn-5{overflow:hidden}.btn-5:before{content:"YEAH!";z-index:0;background-color:#ec4899;display:flex;justify-content:center;align-items:center;color:#fff;transform:translateY(-100%);transition:all .5s}.btn-5:is(:hover,:focus):before{transform:translateY(0)}.btn-6{transition:all 1s;overflow:hidden}.btn-6:before{height:50px;background-color:#fff;transition:all 1s;transform:translate(-100%) rotate(45deg)}.btn-6:is(:hover,:focus){background-color:#ef4444;color:#fff}.btn-6:is(:hover,:focus):before{transform:translate(100%) rotate(45deg)}.btn-7{background-color:#1e293b;color:#fff;overflow:hidden;z-index:0;color:transparent}.btn-7:before{content:"Hover Me";background-color:#34d399;color:#fff;display:flex;justify-content:center;align-items:center;transition:all .5s;z-index:0}.btn-7:after{z-index:1;content:"Hover Me";position:absolute;z-index:0;top:0;left:0;height:100%;width:100%;background-color:#34d399;color:#fff;display:flex;justify-content:center;align-items:center;transform:translate(-100%,100%);transition:all .5s}.btn-7:is(:hover,:focus):before{transform:translate(100%,-100%)}.btn-7:is(:hover,:focus):after{transform:translate(0)}.btn-8{overflow:hidden;color:#172554;background:none;box-shadow:none;border-radius:0;border:2px solid #172554}.btn-8:before{content:"Hover Me";z-index:2;display:flex;justify-content:center;align-items:center;color:#fff;background-color:#172554;transform:scale(5);opacity:0;transition:all .5s;border-radius:0}.btn-8:is(:hover,:focus):before{transform:scale(1);opacity:1}.btn-9{text-transform:uppercase;color:#f43f5e;border:1.5px solid #f43f5e;transition:all .75s;overflow:hidden;background:none;box-shadow:none}.btn-9:before{background-color:#f43f5e;border-radius:0 0 50% 50%;height:0;transition:all .75s}.btn-9:is(:hover,:focus){color:#fff}.btn-9:is(:hover,:focus):before{height:190%}.btn-10{text-transform:uppercase;letter-spacing:1px;background-color:#f59e0b;color:#fff}.btn-10:before{content:"Hover Me";display:flex;justify-content:center;align-items:center;z-index:1;background-color:#22c55e;transform:rotateX(270deg);transform-origin:top;transition:all .5s}.btn-10:after{content:"Hover Me";position:absolute;left:0;top:0;height:100%;width:100%;border-radius:8px;display:flex;justify-content:center;align-items:center;z-index:2;background-color:#ef4444;transform:rotateX(270deg);transform-origin:top;transition:all .5s .25s}.btn-10:is(:hover,:focus):before,.btn-10:is(:hover,:focus):after{transform:rotateX(0)}.btn-11{border:2px solid #38bdf8;color:transparent;text-transform:uppercase;letter-spacing:1px;background:transparent}.btn-11:before{content:"hover me";background-color:#1e293b;color:#38bdf8;display:flex;justify-content:center;align-items:center;border-radius:4px;z-index:1;transition:all .5s}.btn-11:after{content:"hover me";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#1e293b;color:#38bdf8;display:flex;justify-content:center;align-items:center;border-radius:4px;z-index:1;transform:translate(-80%) scale(0) rotateY(360deg);opacity:0;transition:all .5s}.btn-11:is(:hover,:focus):before{transform:translate(80%) scale(0) rotateY(360deg);opacity:0}.btn-11:is(:hover,:focus):after{transform:translate(0) scale(1) rotateY(0);opacity:1}.btn-12{background:none;box-shadow:none;text-transform:uppercase;letter-spacing:1px;color:#3b82f6;transition:all .3s}.btn-12:before,.btn-12:after{content:"";position:absolute;width:20px;height:20px;top:50%;transform:translateY(-50%);background-color:#3b82f6;border-radius:50%;opacity:0;transition:all .3s;z-index:-1}.btn-12:before{left:0;box-shadow:-80px 0 #3b82f6}.btn-12:after{right:0;box-shadow:80px 0 #3b82f6}.btn-12:is(:hover,:focus):before{left:50%;opacity:1;box-shadow:30px 0 #3b82f6;transform:translate(-50%) translateY(-50%)}.btn-12:is(:hover,:focus):after{right:50%;opacity:1;box-shadow:-30px 0 #3b82f6;transform:translate(50%) translateY(-50%)}.btn-12 span{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#3b82f6;border-radius:8px;transform:scale(0);transition:all .3s .4s;z-index:-1}.btn-12:is(:hover,:focus){transition-delay:.4s;color:#fff}.btn-12:is(:hover,:focus) span{transform:scale(1)}.btn-13{background:none;box-shadow:none;color:#fff;text-transform:uppercase;letter-spacing:1px;perspective:1000px;transition:all .25s}.btn-13:before,.btn-13:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:0;transition:all .25s}.btn-13:before{z-index:-2;background-color:#22d3ee;transform:translate(-5px,-5px);transform-origin:top}.btn-13:after{z-index:-1;background-color:#fb7185;transform:translate(5px,5px);transform-origin:bottom;mix-blend-mode:multiply}.btn-13:is(:hover,:focus){color:#334155}.btn-13:is(:hover,:focus):before{transform:rotateX(75deg)}.btn-13:is(:hover,:focus):after{transform:rotateX(-75deg)}.btn-14{border:2px solid #ef4444;color:#ef4444;text-transform:uppercase;letter-spacing:1px;background:none;box-shadow:none;border-radius:0;z-index:1;overflow:hidden;transition:all .5s}.btn-14:is(:hover,:focus){color:#fff}.btn-14:before,.btn-14:after,.btn-14 span:before,.btn-14 span:after{content:"";position:absolute;height:100%;width:25%;background-color:#ef4444;border-radius:0;z-index:-1;transition:all .5s}.btn-14:before{left:-25%;top:0}.btn-14:is(:hover,:focus):before{left:0}.btn-14:after{top:100%;left:25%}.btn-14:is(:hover,:focus):after{top:0}.btn-14 span:before{top:-100%;right:25%}.btn-14:is(:hover,:focus) span:before{top:0}.btn-14 span:after{top:0;right:-25%}.btn-14:is(:hover,:focus) span:after{right:0}.btn-15{text-transform:uppercase;letter-spacing:1px;background:none;box-shadow:none;border-radius:0;color:#ec4899}.btn-15:before{top:-22%;height:150%;border-radius:0;border-left:2px solid #3b82f6;border-right:2px solid #ec4899;transition:all 1s}.btn-15:after{content:"";position:absolute;top:0;left:-12%;height:100%;width:125%;border-top:2px solid #3b82f6;border-bottom:2px solid #ec4899;transition:all 1s}.btn-15:is(:hover,:focus):before{transform:rotateY(180deg)}.btn-15:is(:hover,:focus):after{transform:rotateX(-180deg)}.btn-16{background-color:#f97316;color:#fff;text-transform:uppercase;font-family:BenchNine;font-size:24px;border-radius:0;box-shadow:none}.btn-16:after,.btn-16:before{content:"";position:absolute;height:30px;width:30px;border-radius:0;transition:all .5s}.btn-16:before{top:-5px;left:-5px;border-top:2px solid #f97316;border-left:2px solid #f97316}.btn-16:after{bottom:-5px;right:-5px;border-bottom:2px solid #f97316;border-right:2px solid #f97316}.btn-16:is(:hover,:focus):before,.btn-16:is(:hover,:focus):after{height:100%;width:100%}.btn-17{font-size:22px;border:solid 2px #1e3a8a;color:#1e3a8a;border-radius:0;background:none;box-shadow:none}.btn-17:before{background-color:#1e3a8a;border-radius:inherit;opacity:0;transition:all .5s}.btn-17:is(:hover,:focus):before{opacity:1;transform:rotate(15deg)}.btn-17:is(:hover,:focus){color:#fff}.btn-17 span{color:transparent;position:relative}.btn-17 span:before{position:absolute;content:"B";color:#1e3a8a;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;transition:all .2s}.btn-17:is(:hover,:focus) span:before{color:#fff;font-size:80px;transform:rotate(360deg) translate(-120%,-50%)}.btn-18{text-transform:uppercase;letter-spacing:1px;border-radius:0;color:#f43f5e;overflow:hidden;background:none;box-shadow:none}.btn-18:before,.btn-18:after{content:"";position:absolute;height:2px;width:100%;background-color:#f43f5e;z-index:1;transition:all .5s}.btn-18:before{top:0;left:-100%}.btn-18:after{bottom:0;right:-100%}.btn-18:is(:hover,:focus):before{left:0}.btn-18:is(:hover,:focus):after{right:0}.btn-18 span:before,.btn-18 span:after{content:"";position:absolute;width:2px;height:100%;background-color:#f43f5e;z-index:1;transition:all .5s}.btn-18 span:before{left:0;bottom:-100%}.btn-18 span:after{right:0;top:-100%}.btn-18:is(:hover,:focus) span:before{bottom:0}.btn-18:is(:hover,:focus) span:after{top:0}.btn-wave{background:none;box-shadow:none;text-transform:uppercase;letter-spacing:1px;color:#3b82f6;border:solid 2px #3b82f6;border-radius:0;transition:all 1.5s;overflow:hidden}.wave{position:absolute;top:170%;left:0;width:100%;height:100%;background-color:#3b82f6;transition:all 1.5s;z-index:-1}.btn-wave:is(:hover,:focus){color:#fff}.btn-wave:is(:hover,:focus) .wave{top:0}.wave:before{content:"";position:absolute;bottom:100%;left:0;width:100%;height:100%;background:url(/wave.svg);animation:wavy 2s linear infinite}@keyframes wavy{0%{background-position-x:0}to{background-position-x:1000px}}.btn-20{border-radius:0;background:none;box-shadow:none;color:#172554;transition:all .5s;overflow:hidden}.btn-20 span{position:absolute;top:0;left:0;right:0;bottom:0;border:solid 1px #172554;z-index:-1}.btn-20 span:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-60deg);height:350%;width:8%;background-color:#fff;transition:all .5s}.btn-20:is(:hover,:focus){color:#fff}.btn-20:is(:hover,:focus) span:before{width:100%;background-color:#172554;transform:translate(-50%,-50%) rotate(60deg)}.btn-skew{border-radius:0;background:none;box-shadow:none;text-transform:uppercase;letter-spacing:1.25px;color:#fff;font-weight:700}.btn-skew:before,.btn-skew:after{content:"";position:absolute;width:50%;height:100%;z-index:-1;border-radius:0;transform:skew(30deg);transition:all .3s cubic-bezier(.68,-.55,.265,1.55)}.btn-skew:before{top:-5px;left:-2px;background-color:#f43f5e}.btn-skew:after{top:5px;right:-2px;background-color:#1e40af}.btn-skew:is(:hover,:focus):before{top:0;left:50%;transform:skew(0)}.btn-skew:is(:hover,:focus):after{top:0;right:50%;transform:skew(0)}.btn-22{border-radius:100px;text-transform:uppercase;height:70px;letter-spacing:1px;transition:all .3s;background-color:#22c55e;color:#fff;transition:all .4s}.btn-22:before{border-radius:100px;opacity:1;background-color:#22c55e;transition:all .4s}.btn-22:is(:hover,:focus):before{transform:scaleX(1.4) scaleY(1.6);opacity:0}.btn-22:is(:hover,:focus){transform:translateY(-3px);box-shadow:0 10px 20px #0003}.btn-22:active{transform:translateY(-1px);box-shadow:0 5px 10px #0003}.btn-23{color:#435058;background:none;box-shadow:none;border-radius:0;text-transform:uppercase;letter-spacing:3px;border:2px solid #435058;transition:all .75s;overflow:hidden}.btn-23:before,.btn-23:after{content:"";position:absolute;top:0;left:0;height:0;width:calc(100% - 40px);border-radius:0;border-top:40px solid #435058;border-bottom:40px solid #435058;z-index:-1;transition:all .75s}.btn-23:before{border-right:40px solid transparent;transform:translate(-100%)}.btn-23:after{border-left:40px solid transparent;transform:translate(100%)}.btn-23:is(:hover,:focus):before,.btn-23:is(:hover,:focus):after{transform:translate(0)}.btn-23:is(:hover,:focus){color:#fff}.btn-glow{background-color:#fff;transition:all .5s}.btn-glow:before{background:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);background-size:400%;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);animation:glow 20s linear infinite;filter:blur(5px);opacity:0;transition:all .5s}.btn-glow:after{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background:inherit;border-radius:inherit;z-index:-1;transition:all .5s}.btn-glow:is(:hover,:focus):before{opacity:1}.btn-glow:active:after{background:transparent}.btn-glow:active{color:#000}@keyframes glow{0%{background-position-x:0}50%{background-position-x:400%}to{background-position-x:0}}.btn-neon{text-transform:uppercase;letter-spacing:1px;border-radius:0;color:#03e9f4;font-weight:500;overflow:hidden;background:none;box-shadow:none;-webkit-box-reflect:below -1px linear-gradient(transparent,#03e9f4);transition:all .5s}.btn-neon:is(:hover,:focus){background-color:#03e9f4;color:#fff;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 200px #03e9f4}.btn-neon:before{display:none}.btn-neon span{display:block;z-index:1;position:absolute}.btn-neon span:nth-child(1){background:linear-gradient(90deg,transparent,#03e9f4);animation:move-1 1s linear infinite;animation-delay:0s}.btn-neon span:nth-child(2){background:linear-gradient(180deg,transparent,#03e9f4);animation:move-2 1s linear infinite;animation-delay:.25s}.btn-neon span:nth-child(3){background:linear-gradient(270deg,transparent,#03e9f4);animation:move-3 1s linear infinite;animation-delay:.5s}.btn-neon span:nth-child(4){background:linear-gradient(360deg,transparent,#03e9f4);animation:move-4 1s linear infinite;animation-delay:.75s}.btn-neon span:nth-child(1),.btn-neon span:nth-child(3){height:2px;width:100%}.btn-neon span:nth-child(1){top:0;left:-100%}.btn-neon span:nth-child(3){bottom:0;right:-100%}.btn-neon span:nth-child(4),.btn-neon span:nth-child(2){height:100%;width:2px}.btn-neon span:nth-child(4){left:0;bottom:-100%}.btn-neon span:nth-child(2){right:0;top:-100%}@keyframes move-1{0%{left:-100%}50%,to{left:100%}}@keyframes move-2{0%{top:-100%}50%,to{top:100%}}@keyframes move-3{0%{right:-100%}50%,to{right:100%}}@keyframes move-4{0%{bottom:-100%}50%,to{bottom:100%}}.btn-shake{color:#64748b;background:none;box-shadow:none;border-radius:0;text-transform:uppercase;letter-spacing:1px;border:2px solid #64748b;transition:all .3s;overflow:hidden}.btn-shake:is(:hover,:focus){color:#fff;background:#64748b;animation:shake .3s linear 1}@keyframes shake{33%{transform:rotate(10deg)}66%{transform:rotate(-10deg)}to{transform:rotate(10deg)}}.btn-animate{transition:all 1s;border:1.5px solid #ef4444;color:#ef4444;border-radius:0;overflow:hidden;background:none;box-shadow:none}.btn-animate:before{left:0;height:100%;width:30%;border-radius:0;transform:skew(-15deg);background-color:#ef4444;animation:move .75s infinite linear;transition:all .5s}.btn-animate:is(:hover,:focus){color:#fff}.btn-animate:is(:hover,:focus):before{animation:none;transform:none;width:120%}@keyframes move{0%{left:-30%}to{left:100%}}.attribution{text-align:center;font-size:14px;margin-top:5rem;margin-bottom:3rem}.attribution a{text-decoration:none;color:#64748b;transition:all .5s;display:inline-block;position:relative}.attribution a:before{content:"";position:absolute;bottom:0;left:auto;right:0;width:0%;height:1.25px;background-color:#64748b;transition:all .5s}.attribution a:is(:focus,:hover){color:#1e293b}.attribution a:is(:focus,:hover):before{width:100%;left:0;right:auto;background-color:#1e293b}h1{font-size:3.2rem;line-height:3.6rem}h2{font-size:2.4rem;line-height:3.2rem}h3{font-size:2rem;line-height:2.8rem}.title{text-align:center;margin-top:70px;margin-bottom:20px}@media screen and (max-width: 640px){.title{margin-top:30px}}.sub-title{font-size:1.6rem;text-align:center;margin-bottom:70px}@media screen and (max-width: 640px){.sub-title{margin-bottom:30px}}*,*:before,*:after{-webkit-tap-highlight-color:transparent}buttons{display:block}:root{--color-bg: #fff;--color-bg-dark: rgba(0, 0, 0, .65);--color-accent: #14cf93;--color-light: #fff;--color-text: #475569;--color-dark: #020617;--color-grey-1: #f3f4f6;--color-grey-2: #4c5c68;--color-grey-3: #0f172a;--font-primary: "CerebriSansPro", "Inter", sans-serif;--font-size: 1.6rem;--max-width: 128rem}@font-face{font-family:CerebriSansPro;src:url(../../fonts/CerebriSansPro-Light.ttf) format("truetype");font-weight:300}@font-face{font-family:CerebriSansPro;src:url(../../fonts/CerebriSansPro-Regular.ttf) format("truetype");font-weight:400}@font-face{font-family:CerebriSansPro;src:url(../../fonts/CerebriSansPro-Medium.ttf) format("truetype");font-weight:500}@font-face{font-family:CerebriSansPro;src:url(../../fonts/CerebriSansPro-Bold.ttf) format("truetype");font-weight:600}@font-face{font-family:CerebriSansPro;src:url(../../fonts/CerebriSansPro-SemiBold.ttf) format("truetype");font-weight:700}@font-face{font-family:CerebriSansPro;src:url(../../fonts/CerebriSansPro-Heavy.ttf) format("truetype");font-weight:800}html{font-size:62.5%}body{font-family:var(--font-primary);font-size:var(--font-size);font-weight:400;line-height:165%;padding:0 5%;color:var(--color-text);background-color:var(--color-bg);min-height:100vh}.wrapper{max-width:var(--max-width);margin:0 auto}.container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:50px;row-gap:75px;justify-items:center}