:root{--base-primary-1: 21, 21, 19;--base-primary-2: 32, 32, 29;--primary-1: rgba(var(--base-primary-1), 1);--primary-2: rgba(var(--base-primary-2), 1);--primary-3: rgba(var(--base-primary-1), .8);--primary-4: rgba(var(--base-primary-1), .6);--primary-5: rgba(var(--base-primary-1), .4);--primary-6: rgba(var(--base-primary-1), .2);--border-primary: #233554;--border-secondary: #303c55;--surface-color: #20201d;--neutral-1: #8892b0;--neutral-2: #a8b2d1;--neutral-3: #ccd6f6;--white: #f5f3f4;--contrast: #3f84e5;--font-main: "Inter", sans-serif;--font-base: "Fira Code", monospace;--accent-blue: #57cbff;--accent-purple: #c792ea;--shadow-green: rgba(100, 255, 218, .1);--shadow-blue: rgba(87, 203, 255, .1)}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--primary-1);color:var(--neutral-1);font-family:var(--font-base);font-weight:400;font-size:16px;line-height:normal}html{scroll-behavior:smooth}h1,h2,h3,h4,h6{color:var(--neutral-3);font-family:var(--font-main)}a{color:var(--neutral-2);font-family:var(--font-base);font-size:16px;text-decoration:none}span{color:var(--neutral-2);font-family:var(--font-base);font-size:16px}.portfolio-content{padding:0 20px;display:flex;flex-direction:column;gap:20px}.disabled{cursor:not-allowed}.base-green-text{color:var(--contrast);font-size:.85rem}.heading{display:flex;justify-content:center}.heading-text{border-bottom:1px solid var(--contrast);display:flex;align-items:center;gap:8px}.heading-number{color:var(--contrast);font-weight:500;font-size:25px}.heading-title{color:var(--white);font-weight:600;font-size:28px}.timeline{margin:0 auto;position:relative}.timeline:before{content:"";position:absolute;left:15px;top:0;bottom:0;width:3px;background-color:var(--contrast);border-radius:2px}.timeline-item{position:relative;margin-bottom:30px;padding-left:60px}.timeline-item:before{content:"";position:absolute;left:6px;top:18px;width:18px;height:18px;background-color:var(--contrast);border-radius:50%;border:2px solid var(--neutral-2);z-index:1}.timeline-card{background:var(--primary-4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:24px;border:1px solid var(--border-primary);box-shadow:0 2px 40px var(--border-primary);display:flex;flex-direction:column;gap:10px}.tag{padding:6px 10px;background-color:var(--surface-color);border:1px solid var(--border-primary);border-radius:20px;font-size:.8rem;color:var(--contrast);transition:all .3s ease;cursor:pointer}.tag:hover{background:var(--contrast);color:var(--primary-1);font-weight:600;transform:scale(1.1)}@media (min-width: 768px){.portfolio-content{padding:0 80px}.timeline-item:before{left:3px;top:25px;width:24px;height:24px}}.about{min-height:100vh;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.about-text__container{display:flex;flex-direction:column;gap:10px}.about-title{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--contrast)}.about-bio{display:flex;flex-direction:column;gap:10px;max-width:80ch}.about-image-frame{position:relative;max-width:300px}.about-img{width:100%;border-radius:24px;position:relative;z-index:2;transition:transform .3s ease}.about-img__glow{position:absolute;top:10px;left:10px;width:100%;height:100%;border-radius:24px;border:2px solid var(--contrast);z-index:1;transition:all .3s ease}.about-image-frame:hover .about-img__glow{top:6px;left:6px}.about-para{text-align:left}@media (max-width: 940px){.about{justify-content:center;gap:20px}}.contact{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.contact-body{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:12px}.contact-form{display:flex;flex-direction:column;align-items:center;gap:12px}.label-input-container{display:flex;flex-direction:column;gap:4px}.label{font-size:1.1rem;line-height:normal;display:flex;align-items:center;gap:8px}.input-error-wrapper{display:flex;flex-direction:column;gap:4px}.input{background-color:var(--primary-2);outline:none;padding:10px 16px;border-radius:8px;border:none;min-width:500px;color:var(--neutral-3);caret-color:var(--neutral-2)}.error-message{color:#ff1c1c;font-size:.7rem;font-weight:400}.input-err{border:.5px solid rgb(255,28,28)}.required{color:#ff1c1c;font-size:.7rem;vertical-align:super;margin-left:2px}.textarea{min-width:500px;max-width:400px;min-height:30px;max-height:300px;color:var(--neutral-3);caret-color:var(--neutral-2);background-color:var(--primary-2);border-radius:8px;outline:none;border:none;padding:10px 16px}.contact-footer{display:flex;justify-content:flex-end;width:100%}.submit-btn{background-color:var(--primary-2);border:none;border-radius:12px;padding:8px 16px;color:var(--neutral-2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .3s ease}.submit-btn:hover{color:var(--neutral-3);transform:scale(1.06)}@media (max-width: 768px){.input,.textarea{min-width:300px;max-width:300px}}.education{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}.edu-date{display:flex;align-items:center;gap:10px;color:var(--contrast);font-size:.8rem}.edu-title{display:flex;align-items:center;gap:10px;color:var(--white);font-size:1.2rem;font-weight:800}.edu-institution{display:flex;align-items:center;gap:10px;color:var(--neutral-3);font-size:.9rem;font-weight:300}.experience{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}.exp-date{display:flex;align-items:center;gap:10px;color:var(--contrast);font-size:.8rem}.exp-company{display:flex;align-items:center;gap:10px;color:var(--white);font-size:1.2rem;font-weight:800}.exp-role{display:flex;align-items:center;gap:10px;color:var(--neutral-3);font-size:.9rem;font-weight:300}.hero{min-height:calc(100vh - 35px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.hero-title{color:var(--white);font-family:var(--font-main);font-size:2.25rem;font-weight:700}.hero-title__sub{color:var(--neutral-2);font-family:var(--font-main);font-size:2rem;font-weight:700;text-align:center}.hero-bio{display:flex;flex-direction:column;gap:4px;color:var(--neutral-2)}.hero-bio-line__1{display:flex;flex-direction:row;align-items:center;gap:6px}.hero-role-animate{position:relative;display:inline-block;min-width:20ch;min-height:18px;overflow:hidden;font-weight:700;top:-1px}.hero-role-animate span{position:absolute;top:0;left:0;width:100%;display:flex;align-items:center;animation:role-cycle 12s infinite;opacity:0;transform:translateY(20px);color:var(--contrast)}.hero-role-animate span:nth-child(1){animation-delay:0s}.hero-role-animate span:nth-child(2){animation-delay:3s}.hero-role-animate span:nth-child(3){animation-delay:6s}.hero-role-animate span:nth-child(4){animation-delay:9s}@keyframes role-cycle{0%{transform:translateY(100%);opacity:0}8%,25%{transform:translateY(0);opacity:1}33%,to{transform:translateY(-100%);opacity:0}}@media (min-width: 768px){.hero{min-height:calc(100vh - 50px)}.hero-title{font-size:5.5rem}.hero-title__sub{font-size:3.8rem}}.navbar{padding:6px 10px;position:sticky;top:0;background:var(--primary-4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:2px 1px 10px var(--primary-1);z-index:100;display:flex;flex-direction:row;justify-content:space-between;align-items:center;transition:transform .3s ease}.navbar-items{display:none;flex-direction:column;background:var(--primary-4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:fixed;top:0;right:0;width:250px;min-height:100vh;padding:60px 20px 20px;z-index:200;box-shadow:-2px 0 10px #0009}.navbar-items.show{display:flex}.navbar-title{white-space:nowrap}.navbar-title:hover{color:var(--contrast)}.navbar-item{padding:12px 8px;text-align:center;border-bottom:1px solid var(--contrast);transition:color .3s ease}.navbar-item:last-child{border-bottom:none}.hamburger{display:block;align-items:center;background:none;border:none;color:var(--neutral-2);cursor:pointer;z-index:210}@media (min-width: 768px){.navbar-items{display:flex;flex-direction:row;gap:12px;position:static;background:transparent;width:auto;min-height:auto;padding:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.navbar-item{padding:8px 6px;border-bottom:1px solid transparent;transition:all .2s ease-in-out}.navbar-item:hover{border-bottom:1px solid var(--contrast)}.hamburger{display:none}}.projects{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.projects-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:40px}.project-card{width:350px;background:var(--surface-color);border-radius:20px;overflow:hidden;border:1px solid var(--border-primary);transition:all .4s cubic-bezier(.4,0,.2,1);cursor:pointer;padding:12px;box-shadow:0 10px 30px #0000004d}.project-card:hover{transform:translateY(-10px) scale(1.02);border-color:var(--contrast);box-shadow:0 20px 40px var(--shadow-green),0 0 0 1px var(--contrast)}.video-card .media-container{height:200px;border-radius:16px;padding:4px 4px 0;position:relative;overflow:hidden;cursor:pointer;transition:all .3s ease;background:#0000004d}.image-card .media-container{height:200px;border-radius:16px;padding:4px 4px 0;overflow:hidden;cursor:pointer;transition:all .3s ease;background:#0000004d;display:flex;align-items:center;justify-content:center}.video-card .media-container:hover{transform:scale(1.01)}.demo-video{width:100%;height:100%;object-fit:contain;border-radius:16px}.media-container img{height:100%;width:auto}.video-controls{position:absolute;bottom:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;opacity:0;transition:opacity .3s ease}.video-card .media-container:hover .video-controls{opacity:1}.play-pause-btn{background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px;border:none;border-radius:50%;cursor:pointer;color:#fff;transition:all .3s ease}.play-pause-btn:hover{background:#000c;transform:scale(1.1)}.fullscreen-btn{background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px;border:none;border-radius:6px;cursor:pointer;color:#fff;transition:all .3s ease}.fullscreen-btn:hover{background:#0009;transform:scale(1.1)}.project-image{padding:4px;border-radius:16px;width:100%;height:200px;position:relative;overflow:hidden;background:var(--surface-color)}.project-image img{width:100%;height:100%;border-radius:16px;object-fit:cover;transition:transform .6s ease}.project-card:hover .project-image{transform:scale(1.1)}.project-content{padding:4px;margin-top:20px;display:flex;flex-direction:column;text-align:center;gap:15px}.project-header{display:flex;justify-content:space-between;text-align:center;align-items:center}.project-title{font-size:1.4rem;font-weight:600;color:var(--white);transition:color .3s ease;flex:1;text-align:center}.project-card:hover .project-title{color:var(--contrast)}.project-description{color:var(--neutral-2);padding:0 8px;font-size:.95rem;line-height:1.6;text-align:center}.tech-stack{display:flex;flex-wrap:wrap;gap:4px;justify-content:center}.project-code-btn{padding:12px 20px;border:none;border-radius:16px;background:var(--shadow-blue);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--neutral-1);transition:all .3s ease}.project-code-btn:hover{transform:translateY(-2px)}.project-code-btn a{font-size:.9rem;display:flex;align-items:center;gap:8px;color:var(--white);font-family:var(--font-main);text-decoration:none}.btn-tooltip-wrapper{position:relative;display:inline-block}.tooltip-message{visibility:hidden;background-color:#000;color:var(--neutral-1);font-size:.8rem;text-align:center;padding:4px 8px;border-radius:4px;position:absolute;bottom:125%;left:50%;transform:translate(-50%);overflow:hidden;opacity:0;transition:opacity .3s;z-index:1}.btn-tooltip-wrapper:hover .tooltip-message{visibility:visible;opacity:1}.skills{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}.skills-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));width:100%;gap:12px}.skill-card{background:var(--surface-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:16px;padding:20px;overflow:hidden;display:flex;flex-direction:column;gap:16px;transition:all .3s ease}.skill-card:hover{transform:scale(1.06);border:1px solid var(--neutral-2);z-index:1;box-shadow:0 2px 40px var(--border-primary)}.skills-head{display:flex;align-items:center;gap:10px}.skills-icon{background:rgba(var(--shadow-green));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50%;color:var(--accent-blue);padding:10px;display:flex;align-items:center}.skills-category{font-size:1.5rem;font-weight:600}.skills-list{display:flex;flex-wrap:wrap;padding:4px;gap:8px}@media (max-width: 768px){.skills-category{font-size:1.25rem}.skills-container{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}.footer-content{display:flex;justify-content:center;align-items:center;gap:16px}.account-content{display:flex;align-items:center;gap:4px;padding:4px;transition:all .3s ease}.account-content svg{width:30px;height:30px;padding:4px}.account-name{visibility:hidden;opacity:0;transition:max-width .8s ease,opacity .8s ease;max-width:0;overflow:hidden;white-space:nowrap}.account-content:hover .account-name{visibility:visible;opacity:1;max-width:24ch}