*{margin:0;padding:0;box-sizing:border-box}body,html{width:100%;height:100%;overflow:hidden;background-color:#000;font-family:Inter,sans-serif;color:#fff}canvas{display:block;outline:none}#ui-layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;pointer-events:none;z-index:10;-webkit-user-select:none;user-select:none}.content-section h1,.content-section h2{font-size:4rem;font-weight:300;letter-spacing:.1em;margin-bottom:1rem;text-transform:uppercase;text-shadow:0 0 30px rgba(255,255,255,.4)}.content-section p{font-size:1.2rem;font-weight:300;opacity:.7;letter-spacing:.1em;margin-bottom:2rem}.intro-text p{font-size:1.4rem;font-weight:300;margin-bottom:2rem;line-height:1.6;max-width:800px;margin-left:auto;margin-right:auto;color:#ffffffe6;opacity:1}#dynamic-text{color:#4db8ff;font-weight:400;text-shadow:0 0 15px rgba(77,184,255,.6)}.cursor{font-weight:300;color:#4db8ff;opacity:1;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}#navbar{position:absolute;top:30px;left:50%;transform:translate(-50%);z-index:100;display:flex;align-items:center;gap:20px}#navbar ul{list-style:none;display:flex;gap:40px;background:#ffffff0d;padding:15px 40px;border-radius:50px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}#navbar a{color:#fff9;text-decoration:none;font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;transition:all .3s ease}#navbar a:hover,#navbar a.active{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8)}.content-section{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80vw;display:none;opacity:0;pointer-events:auto}.content-section.active{display:block}.project-grid{display:flex;justify-content:center;gap:30px;flex-wrap:wrap}.project-card{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:30px;border-radius:15px;width:250px;transition:transform .3s ease,background .3s ease;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.project-card:hover{transform:translateY(-10px);background:#ffffff1a}.project-card h3{font-size:1.2rem;margin-bottom:10px;font-weight:400}.project-card p{font-size:.9rem;margin-bottom:0}.contact-btn{display:inline-block;padding:15px 30px;background:transparent;color:#fff;border:1px solid white;border-radius:30px;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;transition:all .3s ease}.contact-btn:hover{background:#fff;color:#000;box-shadow:0 0 20px #ffffff80}.skills-container{margin-top:3rem}.skills-container h3{font-size:1.5rem;font-weight:300;margin-bottom:2rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}.skills-grid{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;max-width:800px;margin:0 auto}.skill-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .4s cubic-bezier(.175,.885,.32,1.275);cursor:pointer;animation:floatSkill 4s ease-in-out infinite}.skill-item:nth-child(2n){animation-delay:.5s}.skill-item:nth-child(3n){animation-delay:1s}.skill-item:nth-child(5n){animation-delay:1.5s}.skill-item:hover{transform:translateY(-15px) scale(1.1);background:#ffffff26;box-shadow:0 10px 20px #fff3;animation-play-state:paused}.skill-item i{font-size:3rem;margin-bottom:10px;transition:all .3s ease;filter:drop-shadow(0 0 5px rgba(255,255,255,.2))}.skill-item:hover i{filter:drop-shadow(0 0 15px rgba(255,255,255,.8));color:#fff}.skill-item span{font-size:.8rem;font-weight:300;letter-spacing:.1em;opacity:.8}@keyframes floatSkill{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.theme-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:50%;width:50px;height:50px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;display:flex;align-items:center;justify-content:center;font-size:1.5rem}.theme-btn:hover{background:#ffffff26;transform:scale(1.1)}body.light-mode{color:#1a1a1a}body.light-mode .content-section h1,body.light-mode .content-section h2{text-shadow:0 0 30px rgba(0,0,0,.2)}body.light-mode #navbar ul,body.light-mode .theme-btn{background:#0000000d;border:1px solid rgba(0,0,0,.1);color:#000}body.light-mode .theme-btn:hover{background:#0000001a}body.light-mode #navbar a{color:#0009}body.light-mode #navbar a:hover,body.light-mode #navbar a.active{color:#000;text-shadow:0 0 10px rgba(0,0,0,.3)}body.light-mode .project-card,body.light-mode .skill-item{background:#00000008;border-color:#0000001a}body.light-mode .project-card:hover,body.light-mode .skill-item:hover{background:#00000014;box-shadow:0 10px 20px #0000001a}body.light-mode .skill-item i{filter:drop-shadow(0 0 5px rgba(0,0,0,.1))}body.light-mode .skill-item:hover i{filter:drop-shadow(0 0 10px rgba(0,0,0,.4));color:#000}body.light-mode .contact-btn{color:#1a1a1a;border-color:#1a1a1a}body.light-mode .intro-text p{color:#1a1a1a;text-shadow:none}body.light-mode #dynamic-text,body.light-mode .cursor{color:#06c;text-shadow:none}body.light-mode .contact-btn:hover{background:#1a1a1a;color:#fff;box-shadow:0 0 20px #0003}#intro-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:1000;display:flex;justify-content:center;align-items:center;transition:opacity 1s ease}#enter-btn{padding:20px 40px;font-size:1.5rem;font-family:Inter,sans-serif;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.4);border-radius:5px;cursor:pointer;text-transform:uppercase;letter-spacing:.2em;transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#enter-btn:hover{background:#fff;color:#000;transform:scale(1.05);box-shadow:0 0 30px #fff9}
