@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Sono:wght,MONO@200..800,1&family=Space+Grotesk:wght@300..700&display=swap";:root{--background:#0e0f12;--surface:#17181d;--border:#24262d;--border-o50:#24262d80;--primary-text:#e6eaf0;--primary-text-o20:#e6eaf033;--body-text:#9aa3ad;--muted-text:#6b7280;color:var(--primary-text);background-color:var(--background);font-optical-sizing:auto;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Manrope,sans-serif;font-style:normal;font-weight:400;line-height:1.5}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html,body,#root{height:100%}*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{letter-spacing:-1%;font-family:Space Grotesk;font-weight:800}p{color:var(--primary-text);font-family:Manrope}p.sono{font-family:Sono,monospace}p.muted{color:var(--muted-text)}p.body{color:var(--body-text)}::selection{background-color:var(--primary-text);color:var(--surface)}#root{--typescript:#00a23c;--typescript-o20:#00a23c33;--expo:#b79ced;--expo-o20:#b79ced33;--info-ao20:#4077d133;text-align:center}main{padding-bottom:100px}header,.header-side,ul,header a{display:flex}header{border-bottom:7px solid var(--border);place-content:center space-between;align-items:center;padding:35px 40px}header h1{font-size:24px;font-weight:bolder}nav,ul{gap:65px}li{margin:auto;list-style:none}li a{color:var(--pimary-);font-weight:700;text-decoration:none}.header-side.icons{gap:20px}.header-side.icons a{cursor:pointer;border:2px solid var(--primary-text);background-color:var(--primary-text-o20);border-radius:50%;padding:8px}.header-side.icons .icon-link.fill:hover path{fill:var(--background)}.header-side.icons .icon-link:hover path{stroke:var(--background)}.ripple-heading{cursor:pointer;display:inline-block}.ripple-heading span{transition:transform .3s cubic-bezier(.25,1,.5,1);display:inline-block}.hero-section{flex-direction:column;justify-content:center;align-items:center;min-height:calc(100vh - 125px);display:flex}.hero-section h2{font-size:40px}.reachout-btn h2{text-align:end;font-size:28px}.reachout-btn .mail-icon{width:40px;height:40px}.reachout-btn:hover .mail-icon path{stroke:var(--surface)}.reachout-btn{border:5px solid var(--primary-text);background-color:var(--background);box-shadow:0 5px var(--background),0 10px var(--primary-text);cursor:pointer;border-radius:1.42em;gap:10px;margin-top:125px;padding:30px 192px;transition:transform .11s;display:flex}.reachout-btn:hover{transform:scale(1.02)}.reachout-btn:active{transform:translateY(10px)}section{padding-bottom:100px}section .bar{background-color:var(--primary-text);height:5px;box-shadow:0 15px var(--primary-text);margin:50px 0}.card{cursor:pointer;border:5px solid var(--primary-text);width:650px;height:130px;box-shadow:0 5px var(--background),0 10px var(--primary-text);border-radius:15px;align-items:center;margin:0;padding:0 15px;display:flex}.card svg{width:20px}.project-cards{flex-wrap:wrap;justify-content:center;gap:60px;width:100%}.project-cards .card .body{flex-direction:column;width:100%;height:86%;display:flex}.project-cards .card .body .header{place-content:center space-between;align-items:center;display:flex}.project-cards .card .footer{align-self:end}.project-cards .card .body .header .tags{gap:10px;display:flex}.project-cards .card .body .header .tags .tag{border:1px solid var(--primary-text);background-color:var(--primary-text-o20);box-shadow:0 2px var(--primary-text);border-radius:50px;padding:5px 30px;font-size:12px;font-weight:400}.project-cards .card .content{text-align:left;margin-top:5px;font-weight:400}.project-cards .card .footer span{align-items:center;display:flex}.project-cards .card .project-link{width:100%;color:var(--primary-text);font-family:Manrope;font-weight:100;text-decoration:none}.nav-link a{transition:all .12s ease-out}.nav-link:hover a{transform:scale(1.2)}.project-cards .card{transition:all .13s ease-out}.project-cards .card:hover{transform:scale(1.05)}.project-cards .card:hover .body,.project-cards .card:hover .tag,.project-cards .card:hover .content p{color:var(--surface)}.project-cards .card:hover .header .tags .tag{box-shadow:0 2px var(--surface);border-color:var(--surface)}.project-cards .card:hover svg path{fill:var(--surface)}.traveling-title span{transition:color .2s;display:inline-block}.jump{filter:drop-shadow(0 0 6px);animation:.35s jump}@keyframes jump{0%{transform:translateY(0)scale(1)}40%{transform:translateY(-8px)scale(1.05)}to{transform:translateY(0)scale(1)}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--background)}::-webkit-scrollbar-thumb{background:var(--primary-text);border:2px solid var(--background);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(#6be4df,#767ee1,#f75f66,#f69dc8)}.about-me .info{border:5px solid var(--border);border-radius:20px;width:max-content;margin:auto;padding:75px 100px}.about-me .info h1{letter-spacing:30%;margin-bottom:25px;font-size:64px}.about-me .info .content img{border:7px solid var(--primary-text);width:615px;box-shadow:0 5px var(--background),0 10px var(--primary-text);border-radius:40px}.about-me .info .content{text-align:start;justify-content:center;align-items:center;gap:50px;display:flex}.about-me .info .content p{max-width:573px}.about-me .info{background-color:var(--surface)}.modal-backdrop{z-index:1000;background:#000000a6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{text-align:start;background-color:var(--background);width:100%;max-width:600px;color:var(--primary-text);border:5px solid var(--border);border-radius:10px;padding:100px 60px}.modal h2{margin:0;padding:0}form{flex-direction:column;gap:10px;margin-top:25px;display:flex}form input,textarea{background-color:var(--surface);border:3px solid var(--border);border-radius:5px;padding:5px}form input::placeholder,form textarea::placeholder{color:var(--muted-text)}form button{background-color:var(--surface);color:var(--primary-text);cursor:pointer;border:4px solid var(--muted-text);box-shadow:0 5px var(--surface),0 10px var(--muted-text);border-radius:4px;margin-top:15px;padding:10px 0;font-size:16px;font-weight:700}form button:hover{border-color:var(--body-text);box-shadow:0 5px var(--surface),0 10px var(--body-text)}.project-details{text-align:start;padding:40px}.backlink{color:var(--primary-text)}.project-details h1{letter-spacing:20%;font-size:40px;font-weight:200}.project-details .answer-block{background-color:var(--surface);border:10px solid var(--border);box-shadow:0 10px var(--surface);border-radius:30px;margin-bottom:10px;padding:40px 28px;font-weight:600}.project-details .answer-block p{color:var(--body-text)}.project-details section{margin:25px 0}.accordion{background:var(--surface);border:1px solid #fff;border:10px solid var(--border);box-shadow:0 10px var(--surface);border-radius:20px;margin-bottom:1rem;overflow:hidden}.accordion-body{width:100%;color:inherit;cursor:pointer;text-align:start;background:0 0;border:none;flex-direction:column;justify-content:space-between;align-items:start;padding:35px;font-size:1rem;font-weight:bolder;display:flex}.accordion-header{justify-content:space-between;align-items:start;width:100%;display:flex}.accordion:hover{border-color:var(--border-o50)}.arrow{border-bottom:2px solid;border-right:2px solid;width:10px;height:10px;transition:transform .25s;transform:rotate(45deg)}.accordion.open .arrow{transform:rotate(-135deg)}.accordion-content{opacity:0;max-height:0;padding:0;transition:max-height .3s,opacity .2s;overflow:hidden}.accordion.open .accordion-content{opacity:1;padding:15px 0}.accordion.open .accordion-content ul{flex-direction:column;display:flex}.project-details .pill{background-color:var(--surface);color:var(--surface);border:10px solid var(--border);width:max-content;box-shadow:0 10px var(--surface);border-radius:30px;align-items:center;gap:20px;margin-bottom:10px;padding:15px 35px;font-size:20px;font-weight:700;display:flex}.project-details .pill svg{width:40px;height:40px}.project-details .pill svg path{fill:var(--body-text)}.project-details .tech-stack .container{flex-wrap:wrap;gap:10px;display:flex}