:root{--color-black: #000;--color-gray-dark: #555;--color-gray: #acabab;--color-gray-light: #dcdcdc;--color-blue: #107cff;--color-white: #fff;--font-mono: "Zalando Sans", sans-serif;--ease: cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}::selection{background-color:var(--color-blue);color:var(--color-white)}.portfolio{display:flex;height:100vh;width:100%;background:var(--color-white)}.left-panel{width:100%;height:100vh;overflow-y:auto;overflow-x:hidden;padding:3rem 5rem;padding-right:calc(50% + 5rem);scroll-behavior:smooth}.right-panel{width:50%;height:100vh;position:fixed;right:0;top:0;background:#fff;overflow:hidden;pointer-events:none}.header{margin-bottom:10rem}.header .h1{font-size:1.1rem;line-height:1.5rem;letter-spacing:-.02em;font-weight:600;margin-top:1.5rem;margin-bottom:1rem;color:var(--color-black)}.header .bio{font-size:1rem;color:var(--color-black);margin-bottom:.7rem;line-height:1.5;letter-spacing:0em;font-weight:400}.contact-links{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem;align-items:flex-start}.contact-links a{font-size:.8rem;color:var(--color-blue);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;letter-spacing:.04em}.contact-links a:hover{border-bottom-color:var(--color-blue)}.section-header{font-size:1rem;color:var(--color-gray);letter-spacing:0em;font-weight:400;margin-bottom:1.5rem;margin-top:4rem}.section-header:first-of-type{margin-top:4rem;margin-bottom:1rem}.project{min-height:200px;transition:opacity .15s var(--ease)}.project{min-height:200px;padding-top:1rem;padding-bottom:6rem;transition:opacity .15s var(--ease)}.project.dimmed{opacity:.4}.project.focused{opacity:1}.project h2{font-size:1.4rem;line-height:1.33333;color:var(--color-black);margin-bottom:.5rem;font-weight:600;letter-spacing:-.02em}.project p{font-size:.8rem;color:var(--color-gray-dark);line-height:1.5;margin-bottom:1rem;font-weight:400;letter-spacing:.04em}.project-link{margin-top:0rem}.project-link a{font-size:.8rem;color:var(--color-blue);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;letter-spacing:.04em}.project-link a:hover{border-bottom-color:var(--color-blue)}.project-meta{font-size:.8rem;color:var(--color-gray);margin-bottom:.5rem;letter-spacing:.04em;font-weight:400}.skills-section,.tools-section{margin-bottom:4rem}.skills-section{margin-top:8rem}.skills-list{display:grid;gap:.5rem}.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}.tools-column{display:flex;flex-direction:column;gap:0rem}.tools-column-header{font-size:.8rem;color:var(--color-gray);font-weight:400;letter-spacing:.04em;margin-bottom:.5rem}.tools-column p{font-size:1rem;color:var(--color-black);line-height:1.5;font-weight:400;letter-spacing:0em}.skills-list p,.tools-list p{font-size:1rem;color:var(--color-black);line-height:1;font-weight:400;letter-spacing:0em}.contact-section{margin-bottom:1.7rem}.contact-info{display:flex;flex-direction:column;gap:.5rem}.contact-info a{font-size:1rem;color:var(--color-blue);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s ease;letter-spacing:0em;width:fit-content}.contact-info a:hover{border-bottom-color:var(--color-blue)}.footer{margin-top:4rem;padding-top:2rem;padding-bottom:3rem;border-top:1px solid var(--color-gray-light);font-size:.8rem;color:var(--color-gray);text-align:center;letter-spacing:.04em}.image-container{position:relative;width:100%;height:100%;transition:opacity .6s var(--ease)}.image-container.hidden{opacity:0;pointer-events:none}.image-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:3rem;opacity:0;transition:opacity .6s var(--ease)}.image-wrapper.active{opacity:1}.image-wrapper img{max-width:85%;max-height:85%;object-fit:contain;box-shadow:0 20px 60px #00000026;border-radius:4px}.image-overlay{position:absolute;bottom:3rem;left:3rem;right:3rem;z-index:10;display:none}.left-panel::-webkit-scrollbar{display:none}.left-panel{-ms-overflow-style:none;scrollbar-width:none}@keyframes fadeInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.header .bio,.header .h1,.contact-links,.section-header,.clients-section,.contact-section,.footer{opacity:0;animation:fadeInRight .8s var(--ease) forwards}.header .bio:nth-child(1){animation-delay:.1s}.header .bio:nth-child(2){animation-delay:.2s}.header .bio:nth-child(3){animation-delay:.3s}.header .h1{animation-delay:.4s}.contact-links{animation-delay:.5s}.section-header:first-of-type{animation-delay:.6s}.project:nth-child(1),.project:nth-child(2){opacity:0}.project:nth-child(1){animation:fadeInRight .8s var(--ease) .7s forwards}.project:nth-child(2){animation:fadeInRight .8s var(--ease) .8s forwards}.project.dimmed{opacity:.4!important}.skills-section{animation-delay:1.2s}.tools-section{animation-delay:1.3s}.contact-section{animation-delay:1.4s}.project-image{display:none}@media(max-width:968px){.portfolio{flex-direction:column}.left-panel{width:100%;height:auto;padding:2rem}.right-panel{display:none}.project{display:flex;flex-direction:column}.project.dimmed{opacity:1!important}.project-image{display:block;width:100%;height:auto;margin-bottom:1.5rem;border-radius:4px;box-shadow:0 10px 30px #0000001a}.project:nth-child(1):before{background-image:url("streak society cover.png")}.project:nth-child(2):before{background-image:url(duocon\ cover.png)}.project:nth-child(3):before{background-image:url(duos\ cover.png)}.project:nth-child(4):before{background-image:url(meta\ cover.png)}.project:nth-child(5):before{background-image:url(spotify\ cover.png)}.project:nth-child(6):before{background-image:url(s2p\ cover.png)}.project:nth-child(7):before{background-image:url(webcat\ cover.gif)}.tools-grid{grid-template-columns:repeat(2,1fr)}.header{margin-bottom:4rem}.section-header:first-of-type{margin-top:2rem}}