@import"https://fonts.googleapis.com/css2?family=Dongle:wght@300;400;700&display=swap";/*!* Reset *!*//*!* Main container *!*//*!* Sidebar *!*//*!* Scrollbar for Chrome *!*//*!* List item *!*//*!* Hover and selected effect *!*//*!* Content area *!*//*!* Project popup *!*//*!* Overlay for popup background *!*//*!* When popup is pinned, enable pointer events on overlay so clicks close it *!*//*!* Mobile menu button *!*//*!* Mobile project overlay/popup *!*//*!* Responsive styles *!*/.portfolio-container{display:grid;grid-template-columns:minmax(25%,320px) 1fr;min-height:100vh;width:100%;transition:background-color .3s,color .3s}*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body,html{height:100%;width:100%;overflow:hidden}.sidebar{padding:10vh 5% 5% clamp(15%,30%,40%);overflow-y:auto;height:100vh;width:100%;scrollbar-width:none;-ms-overflow-style:none}.sidebar::-webkit-scrollbar{display:none}.project-list{display:flex;flex-direction:column;gap:.8em;width:100%;min-width:280px}.project-item:hover,.project-item.active{box-shadow:0 .25em .625em #0003;transform:translate(.3em)}.project-name{font-size:1rem;margin-right:2em;flex:1;white-space:nowrap;font-weight:450;text-overflow:ellipsis;max-width:70%}.project-year{font-size:1rem;opacity:.6;flex-shrink:0;min-width:2em}.content-area{display:flex;justify-content:center;align-items:center;width:100%;height:100vh;padding:5%;box-sizing:border-box;text-align:center}.about-content{max-width:90%;width:100%}.name-title{font-size:clamp(1.75rem,4vw,2.625rem);font-weight:700;text-align:left;margin-bottom:.2em}.job-title{font-size:clamp(1.125rem,2vw,1.5rem);text-align:left;opacity:1;margin-bottom:.5em;color:#666}.nav-links{display:flex;text-align:left;gap:1.25em;justify-content:left;flex-wrap:wrap}.nav-link{text-decoration:none;text-align:left;color:inherit;opacity:.7;font-size:1rem;transition:opacity .3s}.nav-link:hover{opacity:1;text-decoration:underline}.project-popup{position:fixed;top:50%;left:60%;transform:translate(-50%,-50%) scale(.95);width:90%;max-width:50rem;height:80vh;max-height:85vh;background-color:#fff;border-radius:1rem;box-shadow:0 .625em 2.5em #0003;z-index:1000;overflow:hidden;opacity:0;visibility:hidden;will-change:transform,opacity,left;display:flex;flex-direction:column;pointer-events:none;transition:transform .2s ease-out,opacity .25s ease,visibility .25s ease,left .3s ease}.project-popup.active{opacity:1;visibility:visible;pointer-events:auto;top:50%;left:50%;transform:translate(-50%,-50%) scale(1)}.project-item{display:flex;justify-content:space-between;align-items:center;padding:.8em 1.2em;border-radius:.75em;cursor:pointer;transition:all .2s ease;position:relative;width:95%;box-sizing:border-box}.project-popup-header{padding:1.25em 1.875em;border-bottom:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center;pointer-events:auto}.project-title{font-size:1.5rem;font-weight:600;margin:0}.close-popup{border:none;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;transition:background-color .2s}.close-popup:hover{background-color:#0000000d}.pin-indicator{font-size:.875rem;color:#888;display:flex;align-items:center}.project-popup-content{flex:1;padding:1.875em;overflow-y:auto}.project-description{font-size:1rem;line-height:1.6;color:#333}.project-popup-footer{padding:.9375em 1.875em;border-top:1px solid rgba(0,0,0,.1);display:flex;justify-content:space-between;align-items:center}.project-year-tag{font-size:.875rem;color:#666}.project-links{display:flex;gap:.9375em}.project-link{padding:.375em .75em;background-color:#f5f5f7;border-radius:.375em;text-decoration:none;color:#333;font-size:.875rem;transition:background-color .2s}.project-link:hover{background-color:#e5e5e7}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease,background-color .25s ease;pointer-events:none;background-color:#0000}.popup-overlay.active{opacity:1;visibility:visible}.popup-overlay.pinned{background-color:#0000004d}.project-popup.pinned+.popup-overlay{pointer-events:auto}.blinking-cursor{font-weight:100;font-size:inherit;color:inherit;animation:blink 1s infinite}.model-viewer-container{margin:20px 0;width:100%}.model-placeholder{position:relative;overflow:hidden;padding-top:75%;border-radius:8px;box-shadow:0 4px 12px #0000001a;background-color:#f0f0f0;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease}.model-placeholder:hover{background-color:#e0e0e0}.placeholder-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;font-weight:500;color:#666;text-align:center;width:100%}.iframe-container{position:relative;overflow:hidden;padding-top:75%;border-radius:8px;box-shadow:0 4px 12px #0000001a;background-color:#f5f5f7}.iframe-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;transition:opacity .3s ease}.iframe-container:before{content:"Loading 3D model...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:#666;z-index:0}.video-container{margin:20px 0;width:100%}.video-player{width:100%;border-radius:8px;overflow:hidden}.video-player video{display:block;width:100%;height:auto;transition:all .2s ease}.video-player video:hover:not([controls]){transform:scale(1.01);box-shadow:0 6px 16px #00000026}.mobile-play-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;z-index:2;pointer-events:none}.video-player{position:relative;width:100%;border-radius:8px;overflow:hidden}.project-image-container{margin:30px 0 20px;width:100%}.project-image-container img{display:block;max-width:100%;height:auto;border-radius:8px;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease}.project-image-container img:hover{transform:scale(1.02)}.cursor{position:fixed;background:#2128bd;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;will-change:transform;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:10000;transition:width .3s,height .3s,margin .3s,background-color .3s}a:hover~.cursor,button:hover~.cursor,.project-item:hover~.cursor,.nav-link:hover~.cursor,.close-popup:hover~.cursor,.project-link:hover~.cursor{width:20px;height:20px;margin:-10px 0 0 -10px;background-color:#2128bdcc}.shape{will-change:transform;position:fixed;border-radius:50%;pointer-events:none;z-index:-1;opacity:.6;mix-blend-mode:screen}.shape-1{background:#005ffe;width:450px;height:450px;margin:-225px 0 0 -225px;top:0;left:0;opacity:.3}.shape-2{background:#ffe5e3;width:300px;height:300px;margin:-150px 0 0 -150px;top:0;left:0;opacity:.4}.shape-3{background:#ffcc57;width:150px;height:150px;margin:-75px 0 0 -75px;top:0;left:0;opacity:.5}::selection{color:#fff;background:#2128bd}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}@media (max-width: 48em){.iframe-container{padding-top:120%}.portfolio-container{grid-template-columns:1fr;grid-template-rows:auto 1fr;overflow-y:auto}.sidebar{display:none}.content-area{padding:2.5em 1.25em;height:auto;min-height:100vh}.name-title,.job-title{text-align:center}.nav-links{justify-content:center;margin-bottom:2.5em}.mobile-projects-section{width:100%;margin-top:1.875em}.mobile-projects-title{font-size:1.25rem;font-weight:600;margin-bottom:1.25em;text-align:center}.mobile-projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75em;width:100%;margin:0 auto}.mobile-project-card{background-color:#f5f5f7;background-color:#fff;box-shadow:0 0 10px #0000001a;border-radius:.8em;padding:1.2em;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column}.mobile-project-card:hover,.mobile-project-card:active{background-color:#fff;background-color:#0000001a;transform:translateY(.125em);box-shadow:0 .25em .5em #0000001a}.mobile-project-name{font-size:1rem;font-weight:500;margin-bottom:.3125em}.mobile-project-year{font-size:.875rem;opacity:.6}.project-popup{left:50%;right:50%}}@media (max-width: 30em){.mobile-projects-grid{grid-template-columns:1fr 1fr}.project-popup{width:95%;height:85vh}}@media (min-width: 95em){.portfolio-container{max-width:120em;margin:0 auto;grid-template-columns:minmax(480px,320px) 1fr}.about-content{max-width:40em}.sidebar{padding:10vh 0 5% 40%}.project-list{min-width:16em;max-width:22em}.project-item{padding:.8em 1em;margin-right:1em}.project-name{padding-left:1em}body,html{height:100%;width:100%;overflow:hidden}}@media (max-width: 95em) and (min-width: 75em){.sidebar{padding:10vh 0 5% 35%}.portfolio-container{grid-template-columns:minmax(30%,300px) 1fr}.content-area{padding:5% 10% 5% 15%;transform:translate(5%)}.name-title{font-size:clamp(1.5rem,3.5vw,2.3rem)}.job-title{font-size:clamp(1rem,1.8vw,1.3rem)}.project-list{min-width:15em}.project-name{margin-right:1.5em}.project-item{padding:.8em 1em}body,html{height:100%;width:100%;overflow:hidden}}@media (max-width: 75em) and (min-width: 62em){body,html{height:100%;width:100%;overflow:hidden}.project-popup{max-width:40rem;height:85vh;left:65%;transition:transform .2s ease-out,opacity .25s ease,visibility .25s ease,left .3s ease}.project-popup.active:not(.pinned){transform:translate(-50%,-50%) scale(.95)}.sidebar{padding:10vh 0 5% 30%}.project-list{min-width:14em}.project-name{margin-right:1.2em}.project-item{padding:.8em}.content-area{padding:5% 10% 5% 15%;transform:translate(5%)}.name-title{font-size:clamp(1.5rem,3.5vw,2.3rem)}.job-title{font-size:clamp(1rem,1.8vw,1.3rem)}}@media (max-width: 62em) and (min-width: 48em){.portfolio-container{grid-template-columns:minmax(30%,18em) 1fr}.sidebar{padding:10vh 0 5% 20%}.project-list{min-width:13em}.project-name{margin-right:1em;font-size:.9rem}.project-year{font-size:.9rem}.project-item{padding:.7em}.name-title{font-size:clamp(1.5rem,3.5vw,2.3rem)}.job-title{font-size:clamp(1rem,1.8vw,1.3rem)}.content-area{padding:5% 10% 5% 15%;transform:translate(5%)}body,html{height:100%;width:100%;overflow:hidden}@media (max-width: 62em){.project-popup{max-width:35rem;height:88vh;left:68%}}@media (max-width: 55em){.project-popup{max-width:32rem;left:70%}.project-popup-content{padding:1.5em}.project-title{font-size:1.3rem}.project-description{font-size:.95rem}}.project-popup.active{opacity:1;visibility:visible;pointer-events:auto}@media (max-width: 75em){.project-technologies div{flex-wrap:wrap;gap:6px}.project-technologies span{padding:3px 8px;font-size:.85rem}}}html{font-family:Dongle,sans-serif;margin:0;padding:0;overflow:auto!important;height:auto!important}body{font-family:Dongle,sans-serif;margin:0;padding:0;background:transparent;overflow:auto!important;height:auto!important}.text-container{z-index:100;width:100vw;height:100vh;display:flex;position:absolute;top:0;left:0;justify-content:center;align-items:center;font-size:96px;color:#000;opacity:.8;-webkit-user-select:none;user-select:none;text-shadow:1px 1px rgba(0,0,0,.1)}:root{--color-bg1: rgb(255, 255, 255);--color-bg2: rgb(255, 255, 255);--color1: 173, 216, 230;--color2: 255, 182, 193;--color3: 144, 238, 144;--color4: 255, 239, 184;--color5: 221, 160, 221;--color-interactive: 135, 206, 250;--circle-size: 50%;--blending: soft-light}@keyframes moveInCircle{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}@keyframes moveVertical{0%{transform:translateY(-50%)}50%{transform:translateY(50%)}to{transform:translateY(-50%)}}@keyframes moveHorizontal{0%{transform:translate(-50%) translateY(-10%)}50%{transform:translate(50%) translateY(10%)}to{transform:translate(-50%) translateY(-10%)}}.gradient-bg{width:100vw;height:100vh;position:fixed;overflow:hidden;background:linear-gradient(40deg,var(--color-bg1),var(--color-bg2));top:0;left:0;z-index:-1}.gradient-bg svg{position:fixed;top:0;left:0;width:0;height:0}.gradient-bg .gradients-container{filter:url(#goo) blur(40px);width:100%;height:100%}.gradient-bg .g1{position:absolute;background:radial-gradient(circle at center,rgba(var(--color1),.8) 0,rgba(var(--color1),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size) / 2);left:calc(50% - var(--circle-size) / 2);transform-origin:center center;animation:moveVertical 30s ease infinite;opacity:1}.gradient-bg .g2{position:absolute;background:radial-gradient(circle at center,rgba(var(--color2),.8) 0,rgba(var(--color2),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size) / 2);left:calc(50% - var(--circle-size) / 2);transform-origin:calc(50% - 400px);animation:moveInCircle 20s reverse infinite;opacity:1}.gradient-bg .g3{position:absolute;background:radial-gradient(circle at center,rgba(var(--color3),.8) 0,rgba(var(--color3),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size) / 2 + 200px);left:calc(50% - var(--circle-size) / 2 - 500px);transform-origin:calc(50% + 400px);animation:moveInCircle 40s linear infinite;opacity:1}.gradient-bg .g4{position:absolute;background:radial-gradient(circle at center,rgba(var(--color4),.8) 0,rgba(var(--color4),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:var(--circle-size);height:var(--circle-size);top:calc(50% - var(--circle-size) / 2);left:calc(50% - var(--circle-size) / 2);transform-origin:calc(50% - 200px);animation:moveHorizontal 40s ease infinite;opacity:.7}.gradient-bg .g5{position:absolute;background:radial-gradient(circle at center,rgba(var(--color5),.8) 0,rgba(var(--color5),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:calc(var(--circle-size) * 2);height:calc(var(--circle-size) * 2);top:calc(50% - var(--circle-size));left:calc(50% - var(--circle-size));transform-origin:calc(50% - 800px) calc(50% + 200px);animation:moveInCircle 20s ease infinite;opacity:1}.gradient-bg .interactive{position:absolute;background:radial-gradient(circle at center,rgba(var(--color-interactive),.8) 0,rgba(var(--color-interactive),0) 50%) no-repeat;mix-blend-mode:var(--blending);width:100%;height:100%;top:-50%;left:-50%;opacity:.7}.gradient-bg .cv-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:1000px;display:flex;z-index:10}.gradient-bg .cv-card{background-color:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px;box-shadow:0 8px 32px #0000001a;padding:40px;width:100%;display:flex;flex-direction:row;gap:30px}.gradient-bg .profile-section{flex:0 0 250px;display:flex;flex-direction:column;align-items:center;text-align:center}.gradient-bg .profile-img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:5px solid white;box-shadow:0 4px 10px #0000001a;margin-bottom:20px}.gradient-bg .name{font-size:36px;font-weight:700;margin:0;line-height:1.1}.gradient-bg .title{font-size:22px;color:#555;margin:8px 0 20px}.gradient-bg .contact-info{width:100%;text-align:left;margin-top:20px}.gradient-bg .contact-item{display:flex;align-items:center;margin-bottom:10px;font-size:18px}.gradient-bg .contact-icon{width:24px;height:24px;margin-right:10px;opacity:.7}.gradient-bg .content-section{flex:1;display:flex;flex-direction:column}.gradient-bg .section{margin-bottom:30px}.gradient-bg .section-title{font-size:28px;font-weight:700;margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid rgba(var(--color-interactive),.5)}.gradient-bg .section-content{font-size:18px;line-height:1.5}.gradient-bg .skill-list{display:flex;flex-wrap:wrap;gap:10px}.gradient-bg .skill-item{background-color:rgba(var(--color1),.2);padding:6px 12px;border-radius:20px;font-size:16px}.gradient-bg .experience-item{margin-bottom:20px}.gradient-bg .experience-title{font-size:20px;font-weight:700;margin-bottom:5px}.gradient-bg .experience-place,.gradient-bg .experience-date{font-size:16px;color:#666;margin-bottom:5px}.gradient-bg .experience-description{font-size:16px;margin-top:10px}@media (max-width: 768px){.gradient-bg .cv-card{flex-direction:column;padding:25px}.gradient-bg .profile-section{flex:none;width:100%;margin-bottom:30px}.gradient-bg .profile-img{width:150px;height:150px}}*{font-family:-apple-system,BlinkMacSystemFont,sans-serif}html{font-family:Dongle,sans-serif;margin:0;padding:0;scroll-behavior:smooth;overflow:auto!important;height:auto!important}body{font-family:Dongle,sans-serif;margin:0;padding:0;background:transparent;position:relative;overflow:auto!important;height:auto!important}.gradient-bg{position:fixed;width:100vw;height:100vh;overflow:hidden;background:linear-gradient(40deg,var(--color-bg1),var(--color-bg2));top:0;left:0;z-index:-1}.cv-container{position:relative;width:85%;max-width:1100px;margin:150px auto 50px;display:flex;z-index:10}.cv-card{background-color:#fff9;-webkit-backdrop-filter:blur(5px) saturate(180%);backdrop-filter:blur(5px) saturate(180%);border-radius:10px;box-shadow:0 25px 45px #0000001a;border:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);padding:40px;width:100%;display:flex;flex-wrap:wrap;gap:30px}.profile-section{flex:0 0 250px;display:flex;flex-direction:column;align-items:center;text-align:center}.profile-header{display:flex;flex-direction:column;align-items:center;width:100%}.profile-img{width:180px;border-radius:20%;height:180px;object-fit:cover;box-shadow:0 4px 10px #0000001a;margin-bottom:20px}.name{font-size:25px;font-weight:700;margin:0;line-height:1}.title{font-size:24px;color:#555;margin:8px 0 20px}.contact-info{width:100%;text-align:left;margin-top:20px}.contact-item{display:flex;align-items:center;margin-bottom:10px;font-size:22px}.contact-icon{width:24px;height:24px;margin-right:10px;opacity:.7}.content-section{flex:1;display:flex;flex-direction:column}.section{margin-bottom:30px}.section-title{font-size:34px;font-weight:700;margin-bottom:15px;padding-bottom:8px;border-bottom:2px solid rgba(135,206,250,.5)}.section-content-detail{font-size:22px;line-height:1;margin-bottom:10px;color:#666}.section-content{font-size:20px;line-height:1}.skill-list{display:flex;flex-wrap:wrap;gap:10px}.skill-item{background-color:#fff3;box-shadow:0 25px 45px #0000001a;border:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2);padding:8px 16px;border-radius:20px;font-size:20px}.experience-item{margin-bottom:20px}.experience-title{font-size:24px;font-weight:700;margin-bottom:5px}.experience-place,.experience-date{font-size:20px;color:#666;margin-bottom:5px}.experience-description{font-size:20px;margin-top:10px}.back-button{position:fixed;top:30px;left:30px;background-color:#ffffff80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #00000014;transition:all .3s ease;z-index:100;border:none;cursor:pointer}.back-button:hover{background-color:#ffffffb3;transform:translateY(-2px);box-shadow:0 6px 20px #0000001f}.back-button:active{transform:translateY(0);box-shadow:0 4px 10px #0000001a}.back-button svg{width:24px;height:24px;stroke:#333;transition:all .3s ease}.back-button:hover svg{stroke:#87cefae6}.about-page-wrapper{width:100%;min-height:100vh;position:relative;overflow-y:auto;overflow-x:hidden}@media (max-width: 768px){.cv-container{position:relative;top:auto;left:auto;transform:none;width:90%;margin:100px auto 50px;padding-bottom:50px}.cv-card{flex-direction:column;padding:25px}.profile-section{width:100%;display:flex;flex-direction:column}.profile-img{width:150px;height:150px}.contact-info{order:2;width:100%;margin-top:40px;padding-top:30px;border-top:1px solid rgba(135,206,250,.3)}.profile-header{margin-bottom:10px;text-align:center}.profile-section{margin-bottom:0}.content-section{order:1}.back-button{top:20px;left:20px;width:40px;height:40px}.back-button svg{width:20px;height:20px}}