@import "https://fonts.googleapis.com/css2?family=Audiowide&family=Bebas+Neue&family=Cabin:ital,wght@0,400..700;1,400..700&family=Chocolate+Classical+Sans&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Luckiest+Guy&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Outfit:wght@100..900&family=Pacifico&family=Protest+Strike&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}:root{--bg:#fff;--bg-2:#efefef;--bg-3:#d1d1d1;--accent:red;--accent-2:#f56a6a;--accent-border:#ff000051;--font:#000;--font-2:#434343;--grid:#0000002c;--border:#0000004c}body.dark{--bg:#000;--bg-2:#141414;--bg-3:#2e2e2e;--accent:red;--accent-2:#ff7171;--accent-border:#ff565651;--font:#fff;--font-2:#a6a6a6;--grid:#ffffff14;--border:#ffffff4c}body{background-color:var(--bg);background-image:linear-gradient(to right, var(--grid) 1px , transparent 1px), linear-gradient(to bottom, var(--grid) 1px , transparent 1px);background-size:40px 40px;min-height:100vh}#root{flex-direction:column;justify-content:center;align-items:center;width:100%;display:flex}nav{border:1px solid var(--border);background:var(--bg-2);border-radius:30px;justify-content:center;align-items:center;gap:10px;margin:30px auto;padding:8px 12px;font-family:Google Sans;display:flex}nav ul{gap:15px;list-style-type:none;display:flex}nav ul li{border-radius:20px;padding:10px 20px;transition:all .2s}nav ul li:hover{background:var(--bg-3)}nav ul li a{color:var(--font);text-decoration:none}.bar{background:var(--bg-3);border-radius:20px;width:2px;height:25px}nav button{color:var(--font);background-color:var(--bg-2);border:none;border-radius:40px;justify-content:center;align-items:center;padding:6px 8px 4px;font-size:1.1rem;transition:all .2s}nav button:hover{background:var(--accent-2)}.hero{flex-direction:row;gap:50px;padding:20px;display:flex}.hero-img{margin-top:-50px}.hero-img img{outline:1px solid var(--accent);z-index:0;border-radius:50%;width:400px;height:400px;animation:3s infinite bounce}.hero-txt{color:var(--font);flex-direction:column;gap:20px;margin-top:20px;display:flex}.hero-txt h1{width:40vw;font-family:Google Sans;font-size:4.5rem;line-height:.9}.hero-txt span{background:linear-gradient(to right, var(--accent-2), var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero-txt p{color:var(--font-2);width:50vw;font-family:JetBrains Mono}.hero-btns{gap:16px;display:flex}.hero-btns button{border:1px solid var(--border);cursor:pointer;border-radius:20px;align-items:center;gap:8px;padding:12px 24px;font-family:JetBrains Mono,monospace;font-size:1.1rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.hero-btns button:first-child{background:var(--accent);color:#fff;border:1px solid var(--accent)}.hero-btns button:first-child:hover{background:var(--accent-2);transform:translateY(-3px);box-shadow:0 8px 25px #ff000059}.hero-btns button:last-child{background:var(--bg-2);color:var(--font)}.hero-btns button:last-child:hover{background:var(--bg-3);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 25px #ff00001a}.hero-btns button svg{font-size:1.2rem;transition:transform .3s}.hero-btns button:hover svg{transform:translate(2px)}.hero-tags{width:fit-content;color:var(--font);background:var(--bg-2);border:1px solid var(--border);border-radius:20px;padding:15px 20px;font-family:JetBrains Mono;font-size:1.2em;animation:3s infinite bounce;position:relative;bottom:50px}.hero-tags-2{width:fit-content;color:var(--font);background:var(--bg-2);border:1px solid var(--border);z-index:10;border-radius:20px;padding:15px 20px;font-family:JetBrains Mono;font-size:1.1em;animation:3s infinite bounce;position:relative;top:40px;left:150px}@keyframes bounce{0%{transform:translateY(-5px)}50%{transform:translateY(5px)}to{transform:translateY(-5px)}}.skills{flex-direction:column;gap:24px;width:70vw;max-width:800px;margin:60px auto;padding:0 20px;display:flex}.skills-header{flex-direction:column;gap:8px;display:flex}.skills-header h2{color:var(--font);align-items:center;gap:10px;font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:700;display:flex}.skills-header h2 svg{color:var(--accent);font-size:1.8rem}.skills-header p{color:var(--font-2);opacity:.7;font-family:JetBrains Mono,monospace;font-size:.9rem}.skills-category{flex-direction:column;gap:12px;display:flex}.skills-category-label{align-items:center;gap:10px;display:flex}.skills-category-label h3{color:var(--font-2);text-transform:uppercase;letter-spacing:2px;font-family:outfit,sans-serif;font-size:1rem;font-weight:500}.category-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.category-dot.frontend{background:#61dafb;box-shadow:0 0 8px #61dafb80}.category-dot.backend{background:#68a063;box-shadow:0 0 8px #68a06380}.category-dot.tools{background:#f05033;box-shadow:0 0 8px #f0503380}.skills-grid{grid-template-columns:repeat(4,1fr);gap:10px;display:grid}.skill{background:var(--bg-2);border:1px solid var(--border);cursor:default;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:20px 12px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.skill:before{content:"";background:linear-gradient(135deg, var(--accent), var(--accent-2));-webkit-mask-composite:xor;opacity:0;border-radius:16px;padding:1px;transition:opacity .3s;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.skill:hover{background:var(--bg-3);border-color:#0000;transform:translateY(-4px)scale(1.03);box-shadow:0 8px 25px #ff000026}.skill:hover:before{opacity:1}.skill-icon{color:var(--font);justify-content:center;align-items:center;font-size:2rem;transition:transform .3s,color .3s;display:flex}.skill:hover .skill-icon{color:var(--accent);transform:scale(1.15)}.skill-name{color:var(--font-2);letter-spacing:.5px;text-transform:uppercase;font-family:JetBrains Mono,monospace;font-size:.7rem;font-weight:500;transition:color .3s}.skill:hover .skill-name{color:var(--font)}.project{text-align:left;width:70vw;max-width:900px;color:var(--font);flex-direction:column;gap:24px;margin:60px auto;padding:0 20px;display:flex}.project-header{flex-direction:column;gap:8px;display:flex}.project-header h1{color:var(--font);align-items:center;gap:10px;font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:700;display:flex}.project-header h1 svg{color:var(--accent);font-size:2rem}.project-header p{color:var(--font-2);opacity:.7;font-family:JetBrains Mono,monospace;font-size:.9rem}.project-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px;display:grid}.project-card{background:var(--bg-2);border:1px solid var(--border);border-radius:20px;flex-direction:column;transition:all .4s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden}.project-card:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 12px 40px #ff000026}.project-img{width:100%;height:200px;position:relative;overflow:hidden}.project-img:after{content:"";background:linear-gradient(to top, var(--bg-2) 0%, transparent 40%);opacity:0;transition:opacity .4s;position:absolute;inset:0}.project-card:hover .project-img:after{opacity:1}.project-img img{object-fit:cover;width:100%;height:100%;transition:transform .5s cubic-bezier(.4,0,.2,1)}.project-card:hover .project-img img{transform:scale(1.08)}.project-badge{background:var(--accent);color:#fff;text-transform:uppercase;letter-spacing:.5px;opacity:0;z-index:2;border-radius:8px;padding:4px 10px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:600;transition:all .4s cubic-bezier(.4,0,.2,1);position:absolute;top:12px;right:12px;transform:translateY(-8px)}.project-card:hover .project-badge{opacity:1;transform:translateY(0)}.card-details{flex-direction:column;flex:1;gap:12px;padding:24px;display:flex}.card-details h2{color:var(--font);letter-spacing:-.3px;font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:600}.card-details p{color:var(--font-2);opacity:.85;font-family:Rubik,sans-serif;font-size:.88rem;line-height:1.6}.card-tags{flex-flow:wrap;gap:8px;margin-top:4px;display:flex}.card-tags span{background:var(--bg-3);color:var(--font);border:1px solid var(--border);border-radius:20px;padding:5px 12px;font-family:JetBrains Mono,monospace;font-size:.72rem;transition:all .2s}.card-tags span:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-1px)}.card-btns{gap:10px;margin-top:auto;display:flex}.card-btns button{cursor:pointer;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 18px;font-family:JetBrains Mono,monospace;font-size:.78rem;font-weight:500;transition:all .3s;display:flex}.card-btns button:first-child{background:var(--accent);color:#fff}.card-btns button:first-child:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 4px 15px #ff00004d}.card-btns button:last-child{background:var(--bg-3);color:var(--font);border:1px solid var(--border)}.card-btns button:last-child:hover{background:var(--bg-2);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 15px #ff00001a}.card-btns button p{color:inherit;font-family:inherit;font-size:inherit;opacity:1}.contact{width:70vw;margin:60px auto;padding:0 20px}.contact-head h1{color:var(--font);text-align:left;font-family:outfit;font-size:3rem}.contact-head h1 svg{color:var(--accent)}.contact-head p{color:var(--font-2);font-family:JetBrains Mono;font-size:1rem}.contact-body{flex-direction:column;justify-content:center;align-items:center;gap:20px;padding:100px;display:flex}.contact-body h2{text-align:center;color:var(--font);font-family:Google Sans;font-size:3rem}.contact-button{cursor:pointer;background:linear-gradient(to right,var(--accent), var(--accent-2), var(--accent));color:#fff;border:none;border-radius:12px;align-items:center;gap:5px;margin:0 auto;padding:16px 22px;font-size:1.5rem;font-weight:700;transition:all .3s;display:flex}.contact-button:hover{background:var(--accent-2);transform:translateY(-6px)}.socials{justify-content:center;align-items:center;gap:16px;margin-top:40px;display:flex}.socials button{background:var(--bg-2);border:1.5px solid var(--border);cursor:pointer;color:var(--font);border-radius:20px;flex-direction:column;align-items:center;gap:8px;min-width:80px;padding:18px 22px;transition:all .35s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.socials button svg{font-size:2rem;transition:all .35s cubic-bezier(.4,0,.2,1)}.social-label{opacity:0;letter-spacing:.5px;font-family:JetBrains Mono,monospace;font-size:.65rem;font-weight:500;transition:all .35s cubic-bezier(.4,0,.2,1);transform:translateY(4px)}.socials button:hover{transform:translateY(-6px)}.socials button:hover .social-label{opacity:1;transform:translateY(0)}.socials button:hover svg{transform:scale(1.15)}.socials button:first-child:hover{background:#0077b5;border-color:#0077b5;box-shadow:0 10px 30px #0077b559}.socials button:first-child:hover svg,.socials button:first-child:hover .social-label{color:#fff}.socials button:nth-child(2):hover{background:linear-gradient(135deg,#833ab4,#e1306c,#fcaf45);border-color:#0000;box-shadow:0 10px 30px #e1306c59}.socials button:nth-child(2):hover svg,.socials button:nth-child(2):hover .social-label{color:#fff}.socials button:nth-child(3):hover{background:#000;border-color:#000;box-shadow:0 10px 30px #0000004d}.socials button:nth-child(3):hover svg,.socials button:nth-child(3):hover .social-label{color:#fff}body.dark .socials button:nth-child(3):hover{background:#fff;border-color:#fff;box-shadow:0 10px 30px #ffffff26}body.dark .socials button:nth-child(3):hover svg,body.dark .socials button:nth-child(3):hover .social-label{color:#000}@media (width<=900px){.hero-img{display:none}.hero{justify-content:center}.hero-txt{text-align:center;align-items:center;width:100%;max-width:600px;padding-left:0}.hero-txt h1{width:100%;font-size:3rem}.hero-txt p{width:100%;max-width:500px}.hero-btns{justify-content:center}.project-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.skills,.project,.contact{width:85vw}.contact-body{padding:60px 20px}.contact-body h2{font-size:2.5rem}}@media (width<=768px){nav{-webkit-overflow-scrolling:touch;flex-wrap:nowrap;gap:6px;margin:20px 10px;padding:6px 10px;overflow-x:auto}nav ul{gap:2px}nav ul li{white-space:nowrap;padding:8px 14px;font-size:.9rem}.hero{gap:0;padding:10px}.hero-txt h1{width:100%;font-size:3rem}.hero-txt p{width:100%;max-width:450px;font-size:.9rem}.skills-grid{grid-template-columns:repeat(2,1fr)}.skills-header h2,.project-header h1{font-size:2rem}.project-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.project-img{height:180px}.card-details{padding:18px}.contact-head h1{font-size:2.2rem}.contact-body h2{font-size:2rem}.contact-body{padding:40px 16px}.contact-button{padding:14px 18px;font-size:1.2rem}.socials{gap:12px}.socials button{min-width:70px;padding:14px 16px}.socials button svg{font-size:1.6rem}}@media (width<=600px){nav{border-radius:20px;margin:16px 8px}nav ul li{padding:6px 12px;font-size:.82rem}.hero{padding:0 20px}.hero-txt{gap:16px;margin-top:10px}.hero-txt h1{width:100%;font-size:3rem}.hero-txt p{width:100%;max-width:400px;font-size:.85rem}.hero-btns{flex-direction:column;gap:10px;width:100%}.hero-btns button{justify-content:center;width:100%;padding:12px 20px;font-size:1rem}.skills{gap:20px;width:100%;margin:100px auto;padding:0 16px}.skills-header h2{font-size:1.8rem}.skills-grid{gap:8px}.skill{padding:14px 10px}.project{gap:20px;width:100%;margin:40px auto;padding:0 16px}.project-header h1{font-size:1.8rem}.project-grid{grid-template-columns:1fr;gap:16px}.project-img{height:170px}.card-details{gap:10px;padding:16px}.card-details h2{font-size:1.2rem}.card-details p{font-size:.85rem}.card-tags span{padding:4px 10px;font-size:.68rem}.card-btns button{padding:8px 14px;font-size:.72rem}.contact{width:100%;margin:40px auto;padding:0 16px}.contact-head h1{font-size:1.8rem}.contact-body h2{font-size:1.6rem}.contact-body{padding:30px 10px}.contact-button{justify-content:center;width:100%;padding:12px 16px;font-size:1.1rem}.socials{flex-wrap:wrap;gap:10px}.socials button{border-radius:16px;min-width:60px;padding:12px 14px}.socials button svg{font-size:1.4rem}.social-label{font-size:.6rem}footer{padding:16px 12px;font-size:.75rem}.animate-on-scroll{transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);transform:translateY(30px)}}@media (width<=400px){.hero-txt h1{font-size:1.6rem}.hero-txt p{max-width:320px;font-size:.8rem}.skills-header h2{font-size:1.5rem}.skills-grid{grid-template-columns:repeat(2,1fr);gap:6px}.skill{border-radius:12px;padding:10px 8px}.skill-icon{font-size:1.5rem}.skill-name{font-size:.6rem}.project-header h1{font-size:1.5rem}.project-img{height:150px}.contact-head h1{font-size:1.5rem}.contact-body h2{font-size:1.3rem}.contact-button{padding:10px 14px;font-size:1rem}.socials{gap:8px}.socials button{border-radius:14px;min-width:50px;padding:10px 12px}.socials button svg{font-size:1.2rem}.social-label{display:none}}.animate-on-scroll{opacity:0;transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);transform:translateY(40px)}.animate-on-scroll.visible{opacity:1;transform:translateY(0)}.animate-on-scroll.delay-1{transition-delay:.1s}.animate-on-scroll.delay-2{transition-delay:.2s}.animate-on-scroll.delay-3{transition-delay:.3s}.animate-on-scroll.delay-4{transition-delay:.4s}.animate-on-scroll.delay-5{transition-delay:.5s}footer{background:var(--bg-2);border-top:1px solid var(--border);text-align:center;width:100%;color:var(--font);padding:20px;font-family:JetBrains Mono}