@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap";:root{--primary:#8b5cf6;--secondary:#ec4899;--dark:#0a0a0f;--dark-light:#1a1a2e;--glass:#ffffff0d;--glass-border:#ffffff1a}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--dark);color:#fff;min-height:100vh;font-family:Nunito,sans-serif;overflow-x:hidden}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--dark)}::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--secondary));border-radius:4px}.bg-fixed{filter:brightness(.3);z-index:-2;background:url(/images/background.jpg) 50%/cover no-repeat;width:100%;height:100%;position:fixed;top:0;left:0}.bg-overlay{z-index:-1;background:linear-gradient(135deg,#8b5cf61a,#ec48991a);width:100%;height:100%;position:fixed;top:0;left:0}.glass{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:16px}.glow-purple{box-shadow:0 0 20px #8b5cf680}.glow-pink{box-shadow:0 0 20px #ec489980}.custom-cursor{border:2px solid var(--primary);pointer-events:none;z-index:9999;will-change:transform;border-radius:50%;width:20px;height:20px;position:fixed;top:0;left:0}.custom-cursor-dot{background:var(--secondary);pointer-events:none;z-index:9999;will-change:transform;background:var(--secondary);pointer-events:none;z-index:9999;border-radius:50%;width:5px;height:5px;position:fixed;top:0;left:0}.device-selection-screen{z-index:10000;background:linear-gradient(135deg,#0a0a0f,#1a1a2e);justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.device-selection-content{text-align:center;padding:40px}.device-selection-content h2{background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:2rem}.device-selection-content p{color:#ffffffb3;margin-bottom:40px;font-size:1.1rem}.device-options{flex-wrap:wrap;justify-content:center;gap:30px;display:flex}.device-btn{color:#fff;cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;flex-direction:column;align-items:center;gap:15px;padding:30px 50px;transition:all .3s;display:flex}.device-btn:hover{background:#8b5cf633;border-color:#8b5cf6;box-shadow:0 0 30px #8b5cf64d}.device-btn svg{color:#8b5cf6}.device-btn span{font-size:1rem;font-weight:600}.loading-screen{z-index:9999;background:linear-gradient(135deg,#0a0a0f,#1a1a2e);flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.loading-spinner{color:#8b5cf6}.loading-screen p{color:#ec4899;font-size:1.2rem}.navbar{z-index:1000;justify-content:center;align-items:center;gap:50px;width:fit-content;margin:0 auto;padding:15px 50px;transition:all .3s;display:flex;position:fixed;top:20px;left:0;right:0}.navbar.scrolled{background:#0a0a0ff2;box-shadow:0 5px 30px #8b5cf633}.nav-logo{color:#ec4899;align-items:center;gap:10px;font-size:1.3rem;font-weight:700;display:flex}.nav-logo svg{color:#ec4899}.nav-links{gap:40px;display:flex}.nav-links a{color:#fffc;font-size:.95rem;font-weight:500;text-decoration:none;transition:all .3s;position:relative}.nav-links a:after{content:"";background:linear-gradient(90deg,#8b5cf6,#ec4899);width:0;height:2px;transition:width .3s;position:absolute;bottom:-5px;left:0}.nav-links a:hover{color:#fff}.nav-links a:hover:after{width:100%}.hero-section{justify-content:center;align-items:center;gap:60px;min-height:100vh;padding:100px 20px;display:flex;position:relative}.hero-content{text-align:center;z-index:1;max-width:600px}.hero-name-wrapper{margin-bottom:10px;display:inline-block;position:relative}.hero-name{background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:700}.hero-name.clickable{cursor:pointer;transition:all .3s}.hero-name.clickable:hover{filter:brightness(1.2);text-shadow:0 0 30px #8b5cf680}.click-hint{color:#ec4899;margin-top:5px;font-size:.9rem;display:block}.hero-role{color:#ffffffb3;margin-bottom:30px;font-size:1.3rem}.hero-avatar-large{z-index:2;position:absolute;top:35%;right:10%;transform:translateY(-50%)}.avatar-container-large{background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:20px;width:350px;height:350px;padding:6px;transition:transform .1s;overflow:hidden}.avatar-container-large.rainbow-border{background:#0a0a0f;padding:6px;position:relative;overflow:hidden}.avatar-container-large.rainbow-border:before{content:"";z-index:0;background:conic-gradient(red,#ff4500,orange,#ff0,#9aff9a,#0f0,#00ff7f,#0ff,#0080ff,#00f,#4000ff,#8000ff,#f0f,#ff0080,red);border-radius:50%;width:200%;height:200%;animation:3s linear infinite spin-rainbow;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.avatar-container-large.rainbow-border:after{content:"";z-index:1;background:#0a0a0f;border-radius:14px;position:absolute;inset:6px}.avatar-container-large.rainbow-border .avatar-large{z-index:2;position:relative}@keyframes spin-rainbow{0%{transform:translate(-50%,-50%)rotate(0)}to{transform:translate(-50%,-50%)rotate(360deg)}}.avatar-container-large.rainbow-border-glow{animation:2s ease-in-out infinite alternate glow-pulse;box-shadow:0 0 20px #ff00004d,0 0 40px #8b5cf633,0 0 60px #ec48991a}@keyframes glow-pulse{0%{box-shadow:0 0 20px #ff00004d,0 0 40px #8b5cf633}to{box-shadow:0 0 30px #0ff6,0 0 50px #8b5cf64d}}.avatar-large{object-fit:cover;border-radius:16px;width:100%;height:100%}.avatar-close-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ec4899,#8b5cf6);border:none;border-radius:50%;justify-content:center;align-items:center;width:35px;height:35px;font-size:1.5rem;display:flex;position:absolute;top:-10px;right:-10px;box-shadow:0 4px 15px #ec489966}.avatar-container{display:none}.avatar{object-fit:cover;border:4px solid #0a0a0f;border-radius:50%;width:100%;height:100%}.skills-container{flex-wrap:wrap;justify-content:center;gap:15px;display:flex}.skill-badge{cursor:default;z-index:1;align-items:center;gap:8px;padding:10px 20px;font-size:.9rem;transition:all .3s;display:flex;position:relative}.skill-badge:before{content:"";z-index:-1;opacity:0;background:linear-gradient(45deg,red,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,red) 0 0/400%;border-radius:18px;transition:opacity .3s;animation:3s linear infinite rainbow-border;position:absolute;inset:-2px}.skill-badge:after{content:"";z-index:-1;background:#0a0a0ff2;border-radius:16px;position:absolute;inset:0}.skill-badge:hover:before{opacity:1}.skill-badge:hover{color:#fff;transform:scale(1.05);box-shadow:0 0 20px #8b5cf666}.skill-badge:hover svg{color:#ec4899}.skill-badge svg{color:#8b5cf6;transition:color .3s}@keyframes rainbow-border{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.projects-section{max-width:1200px;margin:0 auto;padding:100px 20px}.section-title{text-align:center;background:linear-gradient(135deg,#8b5cf6,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:50px;font-size:2.5rem}.projects-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;display:grid}.project-card{cursor:pointer;transition:all .3s;overflow:hidden}.project-image{height:180px;overflow:hidden}.project-image img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.project-card:hover .project-image img{transform:scale(1.1)}.project-info{padding:20px}.project-info h3{color:#8b5cf6;margin-bottom:8px;font-size:1.2rem}.project-info p{color:#ffffffb3;font-size:.9rem}.modal-overlay{z-index:2000;background:#000c;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}.modal-content{width:100%;max-width:600px;max-height:90vh;padding:30px;position:relative;overflow-y:auto}.modal-close{color:#fff;cursor:pointer;background:0 0;border:none;font-size:2rem;transition:color .3s;position:absolute;top:15px;right:20px}.modal-close:hover{color:#ec4899}.modal-slider{border-radius:12px;margin-bottom:20px;overflow:hidden}.modal-slider img{object-fit:cover;width:100%;height:300px}.slider-dots{justify-content:center;gap:10px;margin-top:15px;display:flex}.dot{cursor:pointer;background:#ffffff4d;border-radius:50%;width:10px;height:10px;transition:all .3s}.dot.active{background:#8b5cf6;transform:scale(1.2)}.modal-content h2{color:#8b5cf6;margin-bottom:10px;font-size:1.8rem}.modal-content p{color:#ffffffb3;margin-bottom:20px}.modal-stats{gap:20px;margin-bottom:20px;display:flex}.modal-stats span{color:#ec4899;align-items:center;gap:8px;display:flex}.github-btn{color:#fff;background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:30px;align-items:center;gap:10px;padding:12px 25px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.github-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px #8b5cf666}.contact-section{text-align:center;padding:100px 20px}.contact-avatar{border:4px solid #ec4899;border-radius:50%;width:150px;height:150px;margin:0 auto 40px;overflow:hidden;box-shadow:0 0 30px #ec489966}.contact-avatar img{object-fit:cover;width:100%;height:100%}.social-links{justify-content:center;gap:20px;display:flex}.social-btn{color:#fff;justify-content:center;align-items:center;width:60px;height:60px;text-decoration:none;transition:all .3s;display:flex;position:relative}.social-btn .tooltip{opacity:0;white-space:nowrap;background:#000c;border-radius:5px;padding:5px 12px;font-size:.8rem;transition:opacity .3s;position:absolute;bottom:-35px;left:50%;transform:translate(-50%)}.social-btn:hover .tooltip{opacity:1}.discord-wrapper{position:relative}.discord-btn{cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--glass)!important;border:1px solid var(--glass-border)!important}.discord-popup{z-index:100;border-radius:12px;flex-direction:column;align-items:center;gap:8px;min-width:180px;padding:15px 20px;display:flex;position:absolute;bottom:80px;left:50%;transform:translate(-50%)}.discord-label{color:#fff9;font-size:.75rem}.discord-username{color:#5865f2;font-size:1.1rem;font-weight:600}.discord-copy{color:#fff;cursor:pointer;background:linear-gradient(135deg,#5865f2,#7289da);border:none;border-radius:20px;margin-top:5px;padding:6px 16px;font-size:.85rem;font-weight:500;transition:all .3s}.discord-copy:hover{transform:scale(1.05);box-shadow:0 5px 15px #5865f266}.music-player{z-index:1000;flex-wrap:wrap;align-items:center;gap:12px;max-width:450px;padding:15px 20px;display:flex;position:fixed;bottom:20px;right:20px}.music-info{align-items:center;gap:10px;min-width:120px;display:flex}.music-cover{color:#fff;background:linear-gradient(135deg,#8b5cf6,#ec4899);border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.music-text{flex-direction:column;display:flex}.music-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;max-width:100px;font-size:.85rem;font-weight:600;overflow:hidden}.music-artist{color:#ffffff80;font-size:.7rem}.music-progress-wrapper{flex:1;align-items:center;gap:8px;min-width:100px;display:flex}.time-display{color:#ffffff80;text-align:center;min-width:35px;font-size:.7rem}.music-progress-container{cursor:pointer;flex:1;min-width:60px}.music-progress{background:#fff3;border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-bar{background:linear-gradient(90deg,#8b5cf6,#ec4899);border-radius:2px;height:100%;transition:width .1s linear}.music-controls{align-items:center;gap:5px;display:flex}.control-btn{color:#ffffffb3;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:30px;height:30px;transition:all .3s;display:flex}.control-btn:hover{color:#8b5cf6;transform:scale(1.1)}.play-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#ec4899);border:none;border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;transition:transform .3s;display:flex}.play-btn:hover{transform:scale(1.1)}.music-extra{align-items:center;gap:8px;display:flex}.volume-control{align-items:center;gap:5px;display:flex}.volume-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;width:60px;height:4px}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#8b5cf6;border-radius:50%;width:12px;height:12px}.playlist-btn{color:#ec4899}.playlist-overlay{z-index:2000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}.playlist-modal{flex-direction:column;width:100%;max-width:400px;max-height:500px;display:flex;overflow:hidden}.playlist-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:20px;display:flex}.playlist-header h3{color:#8b5cf6;align-items:center;gap:10px;display:flex}.playlist-header button{color:#ffffffb3;cursor:pointer;background:0 0;border:none;font-size:1.2rem}.playlist-header button:hover{color:#ec4899}.playlist-items{flex:1;padding:10px;overflow-y:auto}.playlist-item{cursor:pointer;border-radius:10px;align-items:center;margin-bottom:5px;padding:12px 15px;transition:all .3s;display:flex}.playlist-item.active{background:#8b5cf633}.playlist-item .track-info{flex-direction:column;flex:1;display:flex}.playlist-item .track-title{color:#fff;font-size:.9rem;font-weight:600}.playlist-item.active .track-title{color:#8b5cf6}.playlist-item .track-artist{color:#ffffff80;font-size:.75rem}.playing-indicator{align-items:flex-end;gap:2px;height:15px;display:flex}.playing-indicator span{background:#ec4899;border-radius:2px;width:3px;animation:.5s ease-in-out infinite alternate soundwave}.playing-indicator span:first-child{height:5px;animation-delay:0s}.playing-indicator span:nth-child(2){height:10px;animation-delay:.2s}.playing-indicator span:nth-child(3){height:7px;animation-delay:.4s}@keyframes soundwave{0%{height:3px}to{height:15px}}@media (max-width:600px){.music-player{max-width:none;padding:12px 15px;left:10px;right:10px}.music-progress-wrapper{order:5;width:100%;margin-top:10px}.volume-slider{width:40px}}@media (max-width:968px){.hero-section{flex-direction:column;gap:40px}.hero-avatar-large{order:-1;position:relative;top:auto;right:auto;transform:none}.avatar-container-large{width:280px;height:280px}}@media (max-width:768px){.navbar{width:95%;padding:12px 20px}.nav-links{gap:15px;font-size:.9rem}.hero-name{font-size:2rem}.hero-role{font-size:1rem}.avatar-container-large{width:220px;height:220px}.avatar-container{width:140px;height:140px}.section-title{font-size:1.8rem}.music-player{max-width:calc(100% - 20px);padding:10px 15px;bottom:10px;left:10px;right:10px}.music-title{max-width:80px}.volume-slider{width:40px}.music-progress-container{min-width:40px}.custom-cursor,.custom-cursor-dot{display:none}}@media (max-width:480px){.nav-links{display:none}.skills-container{gap:10px}.skill-badge{padding:8px 15px;font-size:.8rem}}body.mobile-mode{cursor:auto!important}body.mobile-mode .custom-cursor,body.mobile-mode .custom-cursor-dot{display:none!important}body.mobile-mode .hero-section{flex-direction:column;gap:30px;padding:80px 15px}body.mobile-mode .hero-avatar-large{position:relative;top:auto;right:auto;transform:none}body.mobile-mode .avatar-container-large{width:250px;height:250px}body.mobile-mode .hero-name{font-size:2.2rem}body.mobile-mode .hero-role{font-size:1rem}body.mobile-mode .navbar{width:95%;padding:10px 15px}body.mobile-mode .nav-links{gap:15px}body.mobile-mode .nav-links a{font-size:.85rem}body.mobile-mode .skills-container{gap:8px}body.mobile-mode .skill-badge{padding:8px 12px;font-size:.8rem}body.mobile-mode .projects-grid{grid-template-columns:1fr;gap:20px}body.mobile-mode .music-player{flex-wrap:wrap;max-width:none;padding:10px 12px;bottom:10px;left:10px;right:10px}body.mobile-mode .music-info{min-width:100px}body.mobile-mode .music-title{max-width:70px;font-size:.8rem}body.mobile-mode .music-progress-wrapper{order:10;width:100%;margin-top:8px}body.mobile-mode .volume-control{display:none}body.mobile-mode .control-btn{width:28px;height:28px}body.mobile-mode .play-btn{width:34px;height:34px}body.mobile-mode .social-links{gap:15px}body.mobile-mode .social-btn{width:50px;height:50px}body.mobile-mode .discord-popup{min-width:150px;padding:12px 15px}body.desktop-mode .hero-avatar-large{position:absolute;top:35%;right:10%}
