@font-face{font-family:Host Grotesk;src:url(/fonts/HostGrotesk.woff2) format("truetype");font-display:swap}@font-face{font-family:Lexend;src:url(/fonts/Lexend.woff2) format("truetype");font-display:swap;font-weight:500}@font-face{font-family:Noto Sans;src:url(/fonts/NotoSans-VariableFont.woff2) format("truetype");font-display:swap}@font-face{font-family:Unica One;src:url(/fonts/UnicaOne-Regular.woff2) format("truetype");font-display:swap}@view-transition{navigation: auto;}::view-transition-group(main){animation-duration:.5s}::view-transition-old(main){animation-name:fade-out}::view-transition-new(main){animation-name:fade-in}:root{--background: #16161d;--foreground: #ededed;--link: var(--blue);--rgb-foreground: 237, 237, 237;--rgb-background: 22, 22, 29;--spotlight-color-1: rgba(var(--rgb-blue), .2);--spotlight-color-2: rgba(var(--rgb-blue-light), .15);--spotlight-color-3: rgba(var(--rgb-blue-lighter), .05);--accent: #94a2e1;--blue: rgb(var(--rgb-blue));--rgb-blue: 121, 178, 210;--rgb-blue-light: 186, 229, 233;--rgb-blue-lighter: 222, 242, 235;--rgb-accent: 148, 162, 225;--transition-zip: cubic-bezier(1, 0, 0, 1);--transition-short: .2s;--transition-long: .5s;--transition-longest: 3s;--font-unica-one: "Unica One", sans-serif;--font-lexend: "Lexend", sans-serif;--font-noto-sans: "Noto Sans", sans-serif;--font-host-grotesk: "Host Grotesk", sans-serif}*{box-sizing:border-box;padding:0;margin:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{color-scheme:dark}html,body{scroll-behavior:smooth}body{font-family:var(--font-noto-sans),sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;background:var(--background)}body:has(header.open) main:after{opacity:.5}body:has(header.open) .hamburger svg{transform:translate(3px,-4px) rotate(45deg)}body:has(header.open) .hamburger path{stroke-dashoffset:-90;stroke-dasharray:60 105 60 300}main{view-transition-name:main;transform-origin:top center;width:100%;padding-inline:16px}main:after{content:"";pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--background);opacity:0;transition:opacity .5s}@media (min-width: 768px){main{padding-inline:32px}}h1,h2,h3,h4,h5,h6{font-family:Host Grotesk,sans-serif}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.75rem}a{color:var(--accent);text-decoration:none;position:relative;display:inline-block;transition:var(--transition-short) color}a:after{content:"";position:absolute;inset:auto 0 0;width:0;height:.1em;background-color:currentColor;transition:var(--transition-short) width}a:hover,a:focus-visible{color:inherit}a:hover:after,a:focus-visible:after{width:100%}button:not(:disabled){cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.wrapper{max-width:1024px;margin-inline:auto}.wrapper section{margin-block:80px}.wrapper section h2{margin-bottom:32px}.intro{--heading-font-size: max(18vw, 3rem);--subheading-font-size: calc(var(--heading-font-size) * .26);min-height:100svh;display:grid;padding-block:120px}.intro .text{text-align:center}.intro .text h1{font-size:var(--heading-font-size);font-family:var(--font-unica-one);position:relative}.intro .text h1:after{content:attr(data-text);position:absolute;top:0;right:0;bottom:0;left:0;color:var(--accent);animation:wave 30s linear infinite;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='wave' x='0' y='1' width='100%25' height='110%25' patternUnits='userSpaceOnUse'%3E%3Cpath id='wavePath' d='M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z' fill='%23fff' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100' height='20' fill='url(%23wave)' /%3E%3C/svg%3E%0A");-webkit-mask-size:200%;mask-size:200%;-webkit-mask-position:0%;mask-position:0%}.intro .text h2{font-size:var(--subheading-font-size);letter-spacing:.285em;font-family:var(--font-lexend);font-weight:500}.intro .point-down{margin:auto auto 0;background-color:#0000;border:3px solid;position:relative;transition:background-color var(--transition-long);border-radius:1in;overflow:clip;width:40px;height:80px}.intro .point-down:hover,.intro .point-down:focus-visible{background-color:rgba(var(--rgb-accent),.5)}.intro .point-down .arrow{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;mask:url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke-width='0'%3E%3C/g%3E%3Cg stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg %3E%3Cpath d='M5.293,16.707a1,1,0,0,1,1.414-1.414L11,19.586V2a1,1,0,0,1,2,0V19.586l4.293-4.293a1,1,0,0,1,1.414,1.414l-6,6a1,1,0,0,1-1.414,0Z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") 50%/100% 200%;background:var(--foreground);transition:background-color var(--transition-long)}.intro .point-down.animate .arrow{background:var(--accent);animation:shiftDown 1s cubic-bezier(.83,.62,0,1) infinite}.intro .point-down.animate:hover .arrow,.intro .point-down.animate:focus-visible .arrow{background:var(--foreground)}@media (min-width: 1024px){.intro{--heading-font-size: max(12vw, 3rem)}}@media (min-width: 1851px){.intro{--heading-font-size: max(11vw, 3rem)}}.canvas{position:fixed;z-index:-1;top:0;right:0;bottom:0;left:0;background:var(--background)}.hamburger{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);top:8px;right:8px;z-index:3;width:3.5rem;height:3.5rem;position:fixed;border-radius:50%;border:1px solid;background:rgba(var(--rgb-background),.5)}.hamburger svg{transition:rotate .8s,transform .8s}.hamburger path{fill:none;stroke:var(--foreground);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60 31 60 300;transition-property:stroke-dasharray,stroke-dashoffset;transition-duration:var(--transition-long);transition-timing-function:var(--transition-zip)}@media (min-width: 1024px){.hamburger{display:none}}.header{-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);display:grid;top:0;right:0;bottom:0;left:0;border-inline:2px solid currentColor;z-index:2;position:fixed;transform:translate(100vw);transition:transform var(--transition-long) var(--transition-zip)}.header.open{transform:none}@media (min-width: 1024px){.header{position:unset;transform:unset;text-align:start;align-items:start}}.nav{text-align:center;align-items:center;gap:32px;padding:32px;font-size:1.5rem;display:flex;flex-direction:column;justify-content:flex-start}.nav *{text-align:inherit}@media (min-width: 1024px){.nav{text-align:start;align-items:start;position:sticky;top:0;min-height:100svh;width:20ch}}.pig{margin-block:auto 32px;display:block;margin-inline:auto;max-width:175px;background-color:#0000;border:none;transition-property:filter,opacity;transition-duration:var(--transition-longest)}.pig.disappear{opacity:0;filter:blur(10px)}.pig:hover svg path,.pig:focus-visible svg path{filter:drop-shadow(10px 10px rgba(255,0,0,.5)) drop-shadow(-10px -10px rgba(0,0,255,.5))}.pig svg{overflow:visible;min-width:175px}.pig svg path{transition:filter var(--transition-short);fill:var(--foreground)}@media (min-width: 1024px){.pig{margin-inline:0}}.menu-item{display:inline-block;width:max-content;padding:8px 16px;color:unset;text-transform:uppercase;letter-spacing:.2em}a.menu-item{position:relative}a.menu-item:before,a.menu-item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;width:0;height:2px;background-image:linear-gradient(90deg,var(--background),var(--foreground) 33%);transition:width var(--transition-short) var(--transition-zip)}a.menu-item:after{top:auto;left:auto;scale:-1}a.menu-item:hover:before,a.menu-item:hover:after,a.menu-item:focus-visible:before,a.menu-item:focus-visible:after{width:100%}.expandable::details-content{content-visibility:visible}.expandable[open] .expandable-content{grid-template-rows:1fr}.expandable[open] summary .chevron{transform:scaleY(-1)}.expandable-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:24px}.expandable-trigger::selection{background-color:#0000}.expandable-trigger:hover .chevron,.expandable-trigger:focus-visible .chevron{animation-iteration-count:infinite}.expandable-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--transition-short) var(--transition-zip)}.expandable-content-inner{overflow:clip;min-height:0;margin-left:12px;width:max-content}.expandable-content-inner a{width:100%;display:block;margin-inline:0;padding-inline:0;font-size:1rem}.expandable .chevron{display:grid;place-items:center;animation:thingy 1s;animation-iteration-count:1;transition:transform var(--transition-short)}.expandable .chevron i{position:absolute;width:2px;height:12px;background-color:currentColor;transition:transform var(--transition-short);transform-origin:center bottom}.expandable .chevron .top{rotate:-45deg}.expandable .chevron .bottom{rotate:45deg}.projects,.blog-section{container-type:inline-size;display:grid;gap:5rem;grid-template-columns:100%}@media screen and (min-width: 500px){.projects,.blog-section{grid-template-columns:repeat(auto-fill,minmax(50ch,1fr))}}.projects .project,.projects .blog-post,.blog-section .project,.blog-section .blog-post{display:flex;flex-direction:column;align-items:center}.projects .project h3,.projects .blog-post h3,.blog-section .project h3,.blog-section .blog-post h3{margin-bottom:12px;width:100%}.projects .project p,.projects .blog-post p,.blog-section .project p,.blog-section .blog-post p{margin-bottom:2rem;line-height:1.8}.projects .project p+*,.projects .blog-post p+*,.blog-section .project p+*,.blog-section .blog-post p+*{margin-top:auto}.projects .project .projectWrapper,.projects .blog-post .projectWrapper,.blog-section .project .projectWrapper,.blog-section .blog-post .projectWrapper{border:1px solid var(--foreground);border-radius:4px;min-height:500px;position:relative;width:100%;background:#000}.projects .project iframe,.projects .blog-post iframe,.blog-section .project iframe,.blog-section .blog-post iframe,.projects .project video,.projects .blog-post video,.blog-section .project video,.blog-section .blog-post video{border:none;width:100%;height:100%}.projects .project video,.projects .blog-post video,.blog-section .project video,.blog-section .blog-post video{cursor:pointer}.projects .project video::-webkit-media-controls,.projects .blog-post video::-webkit-media-controls,.blog-section .project video::-webkit-media-controls,.blog-section .blog-post video::-webkit-media-controls{display:none}.projects .project .play-icon,.projects .blog-post .play-icon,.blog-section .project .play-icon,.blog-section .blog-post .play-icon{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:64px;height:64px;fill:var(--accent);transition-property:filter,opacity;transition-duration:var(--transition-long);transition-timing-function:var(--transition-zip)}.projects .project .play-icon.hide,.projects .blog-post .play-icon.hide,.blog-section .project .play-icon.hide,.blog-section .blog-post .play-icon.hide{opacity:0;filter:blur(32px)}.projects .project .loader,.projects .blog-post .loader,.blog-section .project .loader,.blog-section .blog-post .loader{position:absolute;display:grid;place-items:center;width:100%;height:100%;background:var(--background) radial-gradient(circle,rgba(var(--rgb-background),.9),rgba(var(--rgb-accent),.3));border-radius:4px;overflow:clip;z-index:1;transition:opacity var(--transition-long)}.projects .project .loader svg,.projects .blog-post .loader svg,.blog-section .project .loader svg,.blog-section .blog-post .loader svg{width:145%;position:absolute;pointer-events:none;animation:spin linear 5s infinite}.projects .project .loader svg path,.projects .blog-post .loader svg path,.blog-section .project .loader svg path,.blog-section .blog-post .loader svg path{stroke:rgba(var(--rgb-accent),.4);stroke-width:50;stroke-dasharray:333000 690000;animation:spiral cubic-bezier(.16,.72,.88,.26) 40s infinite;animation-direction:alternate}.projects .project .loader svg g,.projects .blog-post .loader svg g,.blog-section .project .loader svg g,.blog-section .blog-post .loader svg g{fill:#0000}.projects .project .loader.hide,.projects .blog-post .loader.hide,.blog-section .project .loader.hide,.blog-section .blog-post .loader.hide{opacity:0;pointer-events:none}.projects .project .loading,.projects .blog-post .loading,.blog-section .project .loading,.blog-section .blog-post .loading{opacity:0}.contact{display:flex;flex-wrap:wrap;gap:32px}.contact a{display:grid;place-items:center;font-size:1.25rem}.contact a:after{content:none}.about{max-width:60ch;font-size:1.125rem;margin-bottom:64px}.about p{margin-bottom:16px;line-height:1.8}.quote{position:relative;cursor:pointer;background:#0000;border:none;width:100%;text-align:left;font-size:1.125rem;max-width:min(40ch,100%);min-height:20ch}.quote p{position:absolute;line-height:2em;top:0;left:0;opacity:0;transition-property:filter,opacity;transition-duration:.5s;filter:blur(4px)}.quote p.active{opacity:1;filter:none}.blog ul,.blog ol{margin-left:2ch;margin-block:1ch}.blog ul ul,.blog ul ol,.blog ol ul,.blog ol ol{margin-left:1ch;margin-block:1ch}.blog p{margin-bottom:1ch}.blog em{color:rgb(var(--rgb-foreground),.7)}.blog article:not(:last-child):after{content:"";display:block;width:100%;height:1px;background-image:linear-gradient(to right,transparent,var(--foreground),transparent);margin-block:2rem}.blog-intro h2{margin-bottom:.5rem}.blog-section{display:flex}.blog-post h3{color:var(--accent)}.blog-post img{max-width:100%;height:auto;margin-block:1rem}.blog .code{margin-block:1rem;font-family:monospace;background:#000000b3;color:rgb(var(--rgb-blue));padding:1rem;border-radius:.5rem;border:1px solid var(--foreground);font-size:.875rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;-moz-tab-size:2;tab-size:2}.blog .code-inline{display:inline-block;padding:.2rem .4rem;border:none;margin-block:0}@keyframes fade-in{0%{filter:blur(40px);opacity:0}}@keyframes fade-out{to{filter:blur(40px);opacity:0}}@keyframes shiftDown{to{-webkit-mask-position:50% -150%;mask-position:50% -150%}}@keyframes wave{0%{-webkit-mask-position:0;mask-position:0}to{-webkit-mask-position:-200%;mask-position:-200%}}@keyframes thingy{0%{filter:drop-shadow(0 0) drop-shadow(0 0)}to{filter:drop-shadow(0 12px rgba(0,0,0,0)) drop-shadow(0 24px rgba(0,0,0,0))}}@keyframes shimmer{to{background-position:150% -150%}}@keyframes spiral{to{stroke-dasharray:690000}}@keyframes spin{to{rotate:1turn}}