html{background:#000;background-attachment:fixed;min-height:100%}body{background:radial-gradient(ellipse at bottom,#12050f 0,#1a0030 60%,#000 100%);margin:0;min-height:100vh;overflow:hidden}.stars{color:#fff;height:100vh;left:0;position:fixed;top:0;transform:rotate(-45deg);width:100vw;z-index:1}.star{--star-color:var(--primary-color);--star-tail-length:6em;--star-tail-height:2px;--star-width:calc(var(--star-tail-length)/6);--fall-duration:18s;--tail-fade-duration:var(--fall-duration);animation:fall var(--fall-duration) var(--fall-delay) linear infinite,tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;background:linear-gradient(45deg,currentColor,transparent);border-radius:50%;filter:drop-shadow(0 0 6px currentColor);height:var(--star-tail-height);left:100vw;position:absolute;top:var(--top-offset);transform:translate3d(104em,0,0);width:var(--star-tail-length)}@media screen and (max-width:750px){.star{animation:fall var(--fall-duration) var(--fall-delay) linear infinite}}.star:after,.star:before{animation:blink 2s linear infinite;background:linear-gradient(45deg,transparent,currentColor,transparent);border-radius:inherit;content:"";height:100%;left:calc(var(--star-width)/-2);position:absolute;top:0;width:var(--star-width)}.star:before{transform:rotate(45deg)}.star:after{transform:rotate(-45deg)}.parent-container{align-items:center;display:flex;flex-direction:column;min-height:100vh;padding-top:150px;position:relative}.music-control{align-items:center;background:none;border:none;border-radius:50%;box-shadow:0 0 10px hsla(0,0%,100%,0);display:flex;height:35px;justify-content:center;left:20px;position:absolute;top:20px;transition:all .3s ease;width:35px;z-index:2}.music-control img{filter:brightness(0) invert(1);height:20px;transition:filter .3s ease;width:20px}.music-control:hover img{filter:brightness(0) invert(1) drop-shadow(0 0 5px rgb(255,255,255))}.card{align-items:center;animation:fadeIn 1.5s ease-in-out forwards;background:rgba(0,0,0,.5);border-radius:35px;display:flex;flex-direction:column;isolation:isolate;margin-top:80px;opacity:0;padding:25px;position:relative;text-align:center;width:320px;z-index:1000}.card:before{animation:gradientBorder 6s linear infinite;background:linear-gradient(45deg,#f0c,#339,#f0c,#339);background-size:300% 300%;border-radius:35px;content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px;position:absolute;z-index:-1}h2{color:#ddd;font-size:24px;font-weight:400;margin:15px 0}.image1{align-items:center;display:flex;height:145px;justify-content:center;position:relative;width:145px}.image1:before{animation:rotate 6s linear infinite;background:radial-gradient(circle,rgba(175,34,168,.3),rgba(175,34,168,.6));border-radius:50%;content:"";filter:blur(8px);inset:-10px;position:absolute;z-index:-1}.image1:after{animation:rotateBorder 6s linear infinite;background:linear-gradient(45deg,#f0c,#339,#f0c) border-box;border:3px solid transparent;border-radius:50%;content:"";inset:-2px;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude;position:absolute}.image1 img{background:#000;border-radius:50%;height:145px;object-fit:cover;transition:transform .3s ease;width:145px}.details .data h3,.details h2{color:#fff}.details h2{-webkit-text-fill-color:initial;background:none;-webkit-background-clip:initial;background-clip:initial}.details .data h3{color:hsla(0,0%,100%,.9)}.socials{align-items:center;display:flex;flex-direction:column;gap:15px;margin-top:10px}.bottom-row,.top-row{display:flex;gap:15px;justify-content:center}.socials a img{background-color:hsla(0,0%,100%,.1);border-radius:50%;box-sizing:content-box;height:35px;padding:10px;transition:transform .3s ease,background-color .3s ease;width:35px}.socials a img:hover{background-color:hsla(0,0%,100%,.2);box-shadow:0 0 15px hsla(0,0%,100%,.3);transform:scale(1.15) rotate(5deg);transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.cursor{animation:blink 1s step-end infinite}.content{align-items:center;color:#fff;display:flex;flex-direction:column;font-family:Roboto,sans-serif;margin-bottom:20px}.trademark{animation:fadeIn 2s ease-in-out;bottom:80px;color:hsla(0,0%,100%,.5);font-size:14px;margin-top:20px;text-align:center;transition:text-shadow .3s ease,color .3s ease;user-select:none}.trademark:hover{color:#fff;text-shadow:0 0 10px hsla(0,0%,100%,.8),0 0 20px hsla(0,0%,100%,.8),0 0 30px #fff}.cat-gif{height:100px;pointer-events:none;position:absolute;right:-30px;top:-60px;width:100px;z-index:1001}@keyframes borderGlow{0%,to{opacity:.5}50%{opacity:1}}@keyframes rotateBorder{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(80px)}to{opacity:1;transform:translateY(0)}}@keyframes otherfadeIn{to{opacity:1;transform:translateY(0)}0%{opacity:0;transform:transform(80px)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes glowing{0%{background-position:0 0}to{background-position:400% 0}}@keyframes slightGlow{0%{box-shadow:0 0 5px 2px hsla(0,0%,100%,.2),0 0 10px 5px hsla(0,0%,100%,.1)}to{box-shadow:0 0 10px 5px hsla(0,0%,100%,.3),0 0 20px 10px hsla(0,0%,100%,.2)}}@keyframes Slidedown{0%{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:translateY(0)}}@keyframes textGlow{0%{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff}to{text-shadow:0 0 20px #fff,0 0 30px #fff,0 0 40px #fff}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0) rotate(45deg)}40%{transform:translateY(-10px) rotate(45deg)}60%{transform:translateY(-5px) rotate(45deg)}}@keyframes fall{0%{transform:translate3d(104em,0,0)}to{transform:translate3d(-130em,0,0)}}@keyframes tail-fade{0%,70%{opacity:1;width:var(--star-tail-length)}75%{opacity:.4;width:var(--star-tail-length)}to{opacity:0;width:0}}@keyframes blink{50%{opacity:.6}}@keyframes gradientBorder{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@media screen and (max-width:600px){.card{margin-top:60px;padding:15px;width:90%}.image1,.image1 img{height:120px;width:120px}.details h2{font-size:20px}.details .data h3{font-size:16px}.socials{gap:10px}.socials a img{height:30px;padding:8px;width:30px}.parent-container{padding-top:100px}}