.ui-btn{--btn-default-bg:#39a3ab;--btn-padding:15px 20px;--btn-hover-bg:#39a3ab;--btn-transition:.3s;--btn-letter-spacing:.1rem;--btn-animation-duration:1.2s;--btn-shadow-color:#39a3ab;--btn-shadow:0 2px 10px 0 var(--btn-shadow-color);--hover-btn-color:#fac921;--default-btn-color:#fff;--font-size:16px;--font-weight:600;--font-family:Menlo,Roboto Mono,monospace;box-sizing:border-box;padding:var(--btn-padding);color:var(--default-btn-color);font:var(--font-weight)var(--font-size)var(--font-family);background:var(--btn-default-bg);cursor:pointer;transition:var(--btn-transition);box-shadow:var(--btn-shadow);border:2px solid #fff;border-radius:5px;justify-content:center;align-items:center;margin-top:8px;display:flex;overflow:hidden}.ui-btn span{letter-spacing:var(--btn-letter-spacing);transition:var(--btn-transition);box-sizing:border-box;background:inherit;position:relative}.ui-btn span:before{box-sizing:border-box;content:"";background:inherit;position:absolute}.ui-btn:hover,.ui-btn:focus{background:var(--btn-hover-bg)}.ui-btn:hover span,.ui-btn:focus span{color:var(--hover-btn-color)}.ui-btn:hover span:before,.ui-btn:focus span:before{animation:chitchat linear both var(--btn-animation-duration)}@keyframes chitchat{0%{content:"#"}5%{content:"."}10%{content:"^{"}15%{content:"-!"}20%{content:"#$_"}25%{content:"№:0"}30%{content:"#{+."}35%{content:"@}-?"}40%{content:"?{4@%"}45%{content:"=.,^!"}50%{content:"?2@%"}55%{content:";1}]"}60%{content:"?{%:%";right:0}65%{content:"|{f[4";right:0}70%{content:"{4%0%";right:0}75%{content:"'1_0<";right:0}80%{content:"{0%";right:0}85%{content:"]>'";right:0}90%{content:"4";right:0}95%{content:"2";right:0}to{content:"";right:0}}
.logo{will-change:filter;height:9em;padding:1.5em;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:10s linear infinite logo-spin}}
.btn1{--border-color:linear-gradient(-45deg,#ffae00,#7e03aa,#00fffb);--border-width:.125em;--curve-size:.5em;--blur:30px;--bg:#080312;--color:#afffff;color:var(--color);isolation:isolate;text-transform:uppercase;clip-path:polygon(  0% var(--curve-size),var(--curve-size)0,100% 0,100% calc(100% - var(--curve-size)),calc(100% - var(--curve-size))100%,0 100%);border:0;place-content:center;padding:.5em 1.5em;font-size:17px;transition:color .25s;display:inline-grid;position:relative;box-shadow:10px 10px 20px #0009}.btn1:after,.btn1:before{content:"";position:absolute;inset:0}.btn1:before{background:var(--border-color);z-index:-2;background-size:300% 300%;animation:5s infinite move-bg7234}@keyframes move-bg7234{0%{background-position:31% 0}50%{background-position:70% 100%}to{background-position:31% 0}}.btn1:after{background:var(--bg);z-index:-1;clip-path:polygon(  var(--border-width)calc(var(--curve-size) + var(--border-width)*.5),calc(var(--curve-size) + var(--border-width)*.5)var(--border-width),calc(100% - var(--border-width))var(--border-width),calc(100% - var(--border-width))calc(100% - calc(var(--curve-size) + var(--border-width)*.5)),calc(100% - calc(var(--curve-size) + var(--border-width)*.5))calc(100% - var(--border-width)),var(--border-width)calc(100% - var(--border-width)));transition:clip-path .5s}.btn1:where(:hover,:focus):after{clip-path:polygon(  calc(100% - var(--border-width))calc(100% - calc(var(--curve-size) + var(--border-width)*.5)),calc(100% - var(--border-width))var(--border-width),calc(100% - var(--border-width))var(--border-width),calc(100% - var(--border-width))calc(100% - calc(var(--curve-size) + var(--border-width)*.5)),calc(100% - calc(var(--curve-size) + var(--border-width)*.5))calc(100% - var(--border-width)),calc(100% - calc(var(--curve-size) + var(--border-width)*.5))calc(100% - var(--border-width)));transition:all .2s}.btn1:where(:hover,:focus){color:#fff}
.card{background:#041113;border-radius:20px;place-content:center;place-items:center;height:700px;display:flex;position:relative;overflow:hidden}.card .content{z-index:1;color:#f5f1f1}.card:before{content:"";background-image:linear-gradient(#00b7ff,#ff30ff);width:300px;height:150%;transition:all .8s linear;animation:8s linear infinite rotBGimg;position:absolute}@keyframes rotBGimg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.card:after{content:"";background:#14191a;border-radius:15px;position:absolute;inset:5px}