:root{font-family:system-ui,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#fff;background-color:#0003;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;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:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.background-container{position:0px 0px;display:flex;align-items:center;justify-content:center;overflow:hidden}.background-image{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.4;z-index:0;width:1484px;height:1065px}.background-imageart{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.6;z-index:0;width:1484px;height:2500px}.hero-content{opacity:1;z-index:0}.hero{display:flex;flex-direction:column;align-items:center;gap:35px;opacity:1}.hero img{margin-top:135px}.hero h1{text-align:center;width:70%;font-size:90px;font-weight:600;opacity:1}.hero span{background:linear-gradient(267deg,#df9808 10%,#b415ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero p{text-align:center;width:50%;font-size:24px;line-height:40px}.profilecard{background:#0b28374d;border:1px solid rgba(232,167,157,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;padding:5px;margin-top:50px;border-radius:20px;display:flex}.card{background:#0b28374d;border:1px solid rgba(232,167,157,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;padding:20px;z-index:1}.card:hover{border-color:#a84d4199;box-shadow:0 0 20px #e8a79d4d,inset 0 0 20px #a84d411a;transform:translateY(-2px)}.about{background:#0b28374d;border:1px solid rgba(255,120,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;padding:5px;margin-top:50px;border-radius:20px;display:flex}.about:hover{transform:translateY(-5px);border-color:#ff78ff66;box-shadow:0 8px 25px #ff78ff33}.abouttitle{text-align:left;font-size:50px;line-height:30px;padding:10px;color:#af8792}.aboutright{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;width:400px}.aboutskill{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%}.aboutskill p{flex:0 0 100px;margin:0;font-weight:600;color:#efe4ee;text-align:left}.progress-bar{flex:1;background:#ffffff14;border-radius:12px;height:10px;overflow:hidden;box-shadow:inset 0 0 8px #fff3}.progress-fill{height:100%;background:linear-gradient(90deg,#af8792,#bfa7b5);border-radius:12px;box-shadow:0 0 10px #ff78ff66;transition:width 1s ease-in-out}.glare-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,max-content));justify-content:center;gap:1rem;margin-bottom:1rem;z-index:1}.glare-hover{width:var(--gh-width);height:var(--gh-height);background:var(--gh-bg);border-radius:var(--gh-br);border:1px solid var(--gh-border);overflow:hidden;position:relative;display:grid;place-items:center}.glare-hover:before{content:"";position:absolute;inset:0;background:linear-gradient(var(--gh-angle),hsla(0,0%,0%,0) 60%,var(--gh-rgba) 70%,hsla(0,0%,0%,0),hsla(0,0%,0%,0) 100%);transition:var(--gh-duration) ease;background-size:var(--gh-size) var(--gh-size),100% 100%;background-repeat:no-repeat;background-position:-100% -100%,0 0}.glare-hover:hover{cursor:pointer}.glare-hover:hover:before{background-position:100% 100%,0 0}.glare-hover--play-once:before{transition:none}.glare-hover--play-once:hover:before{transition:var(--gh-duration) ease;background-position:100% 100%,0 0}.project-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2rem;padding:2rem;z-index:1}.art-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1rem;padding:1rem}.aboutprofilecard{background:#0b28374d;border:1px solid rgba(255,120,255,.2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:20px;padding:25px;margin-top:50px;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 20px #0003;transition:all .3s ease}.aboutprofilecard:hover{transform:translateY(-5px);border-color:#ff78ff66;box-shadow:0 8px 25px #ff78ff33}.aboutprofilecardheader{text-align:center;font-size:1.6rem;line-height:1.4;font-weight:600;color:#af8792;margin-bottom:10px;letter-spacing:1px}.aboutprofilecardpara{text-align:center;font-size:1rem;line-height:1.8;color:#caa2ac;max-width:500px}.hero-socials{display:flex;justify-content:center;gap:1.5rem;animation:fadeIn 1.5s ease .3s forwards;opacity:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.carousel-container{position:relative;width:100%;max-width:1200px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #0003}.carousel-wrapper{position:relative;width:100%;height:500px;overflow:hidden}.carousel-content-wrapper{display:flex;width:100%;height:100%}.carousel-slide{flex:0 0 100%;width:100%;height:100%}.carousel-image{width:100%;height:100%;object-fit:cover;display:block}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#fffc;border:none;width:50px;height:50px;border-radius:50%;font-size:24px;font-weight:700;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10}.carousel-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.carousel-arrow-left{left:20px}.carousel-arrow-right{right:20px}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (max-width: 768px){.carousel-wrapper{height:300px}.carousel-arrow{width:40px;height:40px;font-size:18px}.carousel-arrow-left{left:10px}.carousel-arrow-right{right:10px}.carousel-indicators{bottom:10px}.carousel-status{top:10px;right:10px}}@media (max-width: 480px){.carousel-wrapper{height:250px}.carousel-arrow{width:35px;height:35px;font-size:16px}}@media (hover: none) and (pointer: coarse){.carousel-arrow{background:#ffffffe6}}.social-logos{display:flex;justify-content:center;margin:2rem 0;padding:0 1rem}.social-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:800px}.social-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.social-button{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border:none;border-radius:12px;background:linear-gradient(145deg,#fff,#e6e6e6);box-shadow:5px 5px 15px #0000001a,-5px -5px 15px #ffffffb3;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.social-button:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#ffffff1a,#ffffff0d);border-radius:12px;opacity:0;transition:opacity .3s ease}.social-button:hover{transform:translateY(-3px);box-shadow:8px 8px 20px #00000026,-8px -8px 20px #fffc}.social-button:active{transform:translateY(-1px);box-shadow:3px 3px 10px #0000001a,-3px -3px 10px #ffffffb3}.social-button:hover:before{opacity:1}.social-button.linkedin:hover{background:linear-gradient(145deg,#0077b5,#069);color:#fff}.social-button.github:hover{background:linear-gradient(145deg,#333,#222);color:#fff}.social-button.discord:hover{background:linear-gradient(145deg,#5865f2,#4752c4);color:#fff}.social-button.email:hover{background:linear-gradient(145deg,#ea4335,#d33426);color:#fff}.social-button.resume:hover{background:linear-gradient(145deg,#34a853,#2e8b47);color:#fff}.social-button.twitter:hover{background:linear-gradient(145deg,#1da1f2,#0d8bd9);color:#fff}.social-button.instagram:hover{background:linear-gradient(145deg,#e4405f,#c13584);color:#fff}.social-button.youtube:hover{background:linear-gradient(145deg,red,#c00);color:#fff}.social-button.stackoverflow:hover{background:linear-gradient(145deg,#f48024,#e76f11);color:#fff}.social-button.codepen:hover{background:linear-gradient(145deg,#000,#333);color:#fff}.social-label{font-size:.8rem;font-weight:500;color:#666;text-align:center;transition:color .3s ease}.social-item:hover .social-label{color:#333;font-weight:600}@media (max-width: 768px){.social-container{gap:.8rem}.social-button{width:50px;height:50px}.social-label{font-size:.7rem}}@media (max-width: 480px){.social-logos{margin:1.5rem 0}.social-container{gap:.6rem}.social-button{width:45px;height:45px;border-radius:10px}.social-label{font-size:.65rem}}@media (prefers-color-scheme: dark){.social-button{background:linear-gradient(145deg,#2d3748,#4a5568);box-shadow:5px 5px 15px #0000004d,-5px -5px 15px #ffffff0d;color:#e2e8f0}.social-button:hover{box-shadow:8px 8px 20px #0006,-8px -8px 20px #ffffff1a}.social-label{color:#a0aec0}.social-item:hover{color:#e2e8f0}}.project-card{--gh-width: 300px;--gh-height: 420px;--gh-bg: rgba(15, 25, 35, .6);--gh-border: rgba(232, 167, 157, .2);--gh-rgba: rgba(255, 115, 255, .2);--gh-size: 300%;--gh-br: 20px;--gh-duration: .8s;--gh-angle: 130deg;display:flex;flex-direction:column;border-radius:var(--gh-br);border:1px solid var(--gh-border);background:var(--gh-bg);box-shadow:0 0 10px #ffffff0d;overflow:hidden;transition:all .3s ease;width:350px;height:500px;z-index:1}.project-card:hover{transform:translateY(-5px);box-shadow:0 0 20px #ff78ff66}.project-image{width:100%;height:200px;overflow:hidden;position:relative;z-index:2}.project-content{padding:1rem;color:#fff}.project-title{font-size:1.3rem;color:#f68eff;text-transform:uppercase;margin-bottom:.5rem}.project-description{font-size:.9rem;color:#ccc}.tag{display:inline-block;background:#ffffff1a;border-radius:8px;padding:4px 10px;margin:4px 4px 50px;font-size:.8rem}.project-button{background-color:#333;margin:20px;color:#fff9;padding:10px 15px;border:none;border-radius:8px;cursor:pointer;text-transform:uppercase;font-weight:700}.project-button:hover{background:#af8792;color:#2c0808}.voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:2rem;padding:2rem}.voice-card{display:flex;flex-direction:row;background:#0b28374d;border:1px solid rgba(232,167,157,.2);border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:hidden;padding:1rem;color:#f3e7e4;transition:.3s ease}.voice-card-right{display:flex;flex-direction:column;flex:1}.voice-card:hover{border-color:#ffaa9699;transform:translateY(-3px)}.voice-image{width:150px;height:150px;border-radius:12px;object-fit:cover;margin-right:1rem}.voice-header{display:flex;justify-content:space-between;align-items:center}.voice-header h2{font-size:1.2rem;color:#ff7b73;margin:0}.category{background:#ff968c26;border-radius:10px;padding:4px 10px;font-size:.8rem;color:#ffada2}.description{font-size:.9rem;margin:.5rem 0;line-height:1.4}.voice-player audio{width:100%;margin:.5rem 0}.tags{margin-top:.3rem}.tag,.download-btn{background:#ffffff14;padding:5px 10px;border-radius:10px;margin-right:5px;font-size:.75rem}.download-btn:hover{border-color:#ffaa9699;transform:translateY(-3px)}.rating{display:flex;align-items:center;gap:3px}.pill-nav-container{position:fixed;top:1em;left:50%;transform:translate(-50%);z-index:99}@media (max-width: 768px){.pill-nav-container{width:100%;left:0}}.pill-nav{--nav-h: 42px;--logo: 36px;--pill-pad-x: 18px;--pill-gap: 3px;width:max-content;display:flex;align-items:center;box-sizing:border-box}@media (max-width: 768px){.pill-nav{width:100%;justify-content:space-between;padding:0 1rem;background:transparent}}.pill-nav-items{position:relative;display:flex;align-items:center;height:var(--nav-h);background:var(--base, #000);border-radius:9999px}.pill-logo{width:var(--nav-h);height:var(--nav-h);border-radius:50%;background:var(--base, #000);padding:8px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.pill-logo img{width:100%;height:100%;object-fit:cover;display:block}.pill-list{list-style:none;display:flex;align-items:stretch;gap:var(--pill-gap);margin:0;padding:3px;height:100%}.pill-list>li{display:flex;height:100%}.pill{display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 var(--pill-pad-x);background:var(--pill-bg, #fff);color:var(--pill-text, var(--base, #000));text-decoration:none;border-radius:9999px;box-sizing:border-box;font-weight:600;font-size:16px;line-height:0;text-transform:uppercase;letter-spacing:.2px;white-space:nowrap;cursor:pointer;position:relative;overflow:hidden}.pill .hover-circle{position:absolute;left:50%;bottom:0;border-radius:50%;background:var(--base, #000);z-index:1;display:block;pointer-events:none;will-change:transform}.pill .label-stack{position:relative;display:inline-block;line-height:1;z-index:2}.pill .pill-label{position:relative;z-index:2;display:inline-block;line-height:1;will-change:transform}.pill .pill-label-hover{position:absolute;left:0;top:0;color:var(--hover-text, #fff);z-index:3;display:inline-block;will-change:transform,opacity}.pill.is-active:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:12px;height:12px;background:var(--base, #000);border-radius:50px;z-index:4}.desktop-only{display:block}.mobile-only{display:none}@media (max-width: 768px){.desktop-only{display:none}.mobile-only{display:block}}.mobile-menu-button{width:var(--nav-h);height:var(--nav-h);border-radius:50%;background:var(--base, #000);border:none;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;padding:0;position:relative}@media (max-width: 768px){.mobile-menu-button{display:flex}}.hamburger-line{width:16px;height:2px;background:var(--pill-bg, #fff);border-radius:1px;transition:all .01s ease;transform-origin:center}.mobile-menu-popover{position:absolute;top:3em;left:1rem;right:1rem;background:var(--base, #f0f0f0);border-radius:27px;box-shadow:0 8px 32px #0000001f;z-index:998;opacity:0;transform-origin:top center;visibility:hidden}.mobile-menu-list{list-style:none;margin:0;padding:3px;display:flex;flex-direction:column;gap:3px}.mobile-menu-popover .mobile-menu-link{display:block;padding:12px 16px;color:var(--pill-text, #fff);background-color:var(--pill-bg, #fff);text-decoration:none;font-size:16px;font-weight:500;border-radius:50px;transition:all .2s ease}.mobile-menu-popover .mobile-menu-link:hover{cursor:pointer;background-color:var(--base);color:var(--hover-text, #fff)}.contact-box{--gh-bg: rgba(15, 25, 35, .6);--gh-border: rgba(232, 167, 157, .2);--gh-rgba: rgba(74, 52, 74, .2);--gh-size: 300%;--gh-duration: .8s;--gh-angle: 130deg;position:relative;border-radius:20px;border:1px solid var(--gh-border);background:var(--gh-bg);box-shadow:0 0 10px #ffffff0d;overflow:hidden;transition:all .3s ease;z-index:1}.contact-box:before{content:"";position:absolute;top:0;left:-100%;width:var(--gh-size);height:var(--gh-size);background:linear-gradient(var(--gh-angle),transparent 20%,var(--gh-rgba) 40%,var(--gh-rgba) 60%,transparent 80%);transition:left var(--gh-duration) ease;z-index:-1}.contact-box:hover:before{left:0}.contact-box:hover{transform:translateY(-5px);box-shadow:0 0 30px #ff78ff4d;border-color:#ff78ff66}.contact-content{position:relative;padding:2rem;height:100%;z-index:2}.contact-icon{width:48px;height:48px;background:#ffffff1a;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fbbf24;flex-shrink:0}.social-link{width:40px;height:40px;background:#ffffff1a;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fbbf24;transition:all .3s ease}.social-link:hover{background:#fff3;transform:translateY(-2px);color:#fff}.contact-input{width:100%;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:12px 16px;color:#fff;font-size:16px;transition:all .3s ease}.contact-input:focus{outline:none;border-color:#fbbf24;background:#ffffff26;box-shadow:0 0 0 3px #fbbf241a}.contact-input::placeholder{color:#ffffff80}
