#root{display:contents}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;font-family:Atkinson Hyperlegible}:root{background-color:#0b0705;color:#fff;font-size:14px;--accent: #cdaaff;--text-dark: rgb(180, 180, 180)}.text-dark{color:var(--text-dark)}body{background:url(/assets/dissolve-DLC5-cLn.png);background-size:256px;background-attachment:fixed;display:flex;flex-direction:row;justify-content:center;align-items:stretch}p{line-height:1.5}p,h1,h2,h3,h4,h5,h6{text-shadow:0 0 .1em rgba(0,0,0,.7)}main{margin:0;min-height:100vh;position:relative;padding:16em 0;display:flex;flex-direction:column;gap:10em;width:54em;max-width:100%}#left-column,#right-column{display:flex;align-items:center;justify-content:center;flex-grow:1;flex-shrink:1;position:relative;display:none}@media(max-width:1400px){#left-column,#right-column{display:none}main{padding:0}body{padding:8em 4em}}@media(max-width:900px){:root{font-size:14px}}h1{font-weight:400;font-size:2.3em}#intro{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:2rem;text-align:center}#intro .social{display:flex;flex-direction:row;gap:1.2em;font-size:1.5em;padding:1em 0}#intro .social svg{color:#fff;width:2em;height:2em}#intro h1{font-size:2.5em}#apple{width:20em;max-width:calc(100% - 12em);position:absolute;top:20em}#intro p{font-size:1.6em;max-width:30em}#intro p b{font-weight:400;color:#e6e6e6}#intro>div{display:flex;flex-direction:column;gap:inherit}.section-title{font-size:2em}p a{color:#fff;text-decoration:none}p a:hover{text-decoration:underline}#intro div.contact{font-size:1.2em;display:flex;flex-direction:column;gap:.5em}:root body svg{overflow:visible}@media(max-width:600px){:root{font-size:14px}body{padding:4rem 1.5rem;background:none}body:before{content:"";position:fixed;inset:0;height:100vh;height:100lvh;background:url(/assets/dissolve-DLC5-cLn.png) repeat;background-size:256px;pointer-events:none;z-index:-1}main{width:100%;min-width:0;min-height:100svh;gap:5rem}#intro h1{font-size:1.65rem;line-height:1.2}#intro p{font-size:1.125rem}#intro .social{font-size:1rem;gap:.8rem;padding:.4rem 0}#intro{gap:1.4rem}#intro div.contact{font-size:.95rem;overflow-wrap:anywhere}}.experience-container>h2{font-size:2.3em;font-weight:400}.experience-box>h3,.experience-item>div>h4{font-weight:400}@media(max-width:600px){.experience-container>h2{font-size:2rem}}@keyframes background-scroll{0%{background-position:0 0}to{background-position:100% 100%}}#background{width:100%;height:100vh;height:100lvh;overflow:hidden;position:fixed;opacity:1;z-index:-1;filter:saturate(.5);opacity:.75;top:0;left:0}#background>canvas{width:100%;height:100%;image-rendering:pixelated;background-color:transparent;position:absolute;inset:0;opacity:.5}@media(max-width:600px){#background{z-index:-2}}.experience-container{display:flex;flex-direction:column;gap:2rem}.experience{display:flex;flex-direction:column;justify-content:flex-start;gap:6em}.experience-box{width:100%;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start}.experience-box>h3{display:flex;align-items:center;gap:.5em}.experience-box>h3{text-transform:uppercase;font-size:2.1em}.experience-box>h3>span{font-size:.65em}.experience-box>h3 .date{font-size:.6em;font-weight:400}.experience-box>h3>svg,.experience-box>h3>.inline-svg>svg,.experience-item .bar,.experience-box>h3>img{width:3.2rem;flex-shrink:0}.experience-item{width:100%;min-width:0;display:flex;align-items:stretch}.experience-item:last-child .bar:before{height:1.6rem;top:0}.experience-item .bar{flex:0 0 3.2rem;position:relative;display:flex;align-items:center;justify-content:center;opacity:.75;overflow:hidden;margin-right:1rem}.experience-item .spacer{padding-bottom:.5rem}.experience-item:last-child .spacer{display:none}.experience-item .bar:before{content:"";position:absolute;height:100%;width:.2em;background-color:#3c3843}.experience-item .project-name{position:relative}.experience-item .project-name:before{content:"";position:absolute;width:.5rem;height:.5rem;left:-2.85rem;top:50%;transform:translateY(-50%);background:#fff;opacity:.75}.experience-item .title{position:relative;font-size:1.3em;display:flex;align-items:center;gap:.8rem;height:3.2rem}.experience-item .title>span:not(.project-name){font-size:.75em;text-transform:uppercase}.experience-item .description{width:100%;margin-top:-.8em;font-size:1.2em;max-width:35em}.experience-item .links{display:flex;align-items:center;justify-content:flex-start;gap:1rem}.experience-item .links .icon-link{font-size:1em}.experience-item>div:last-child{flex:1;min-width:0}.experience-item>div{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}.experience-item .screenshots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:.5rem;margin-top:.5rem;margin-bottom:.5rem}.experience-item .screenshots a{display:block;width:100%;height:auto;aspect-ratio:15 / 9.5;position:relative;min-width:0;align-self:start;filter:saturate(75%) brightness(85%);border-radius:.5em;border:.2em dashed rgba(255,255,255,.4);overflow:hidden}.experience-item .screenshots .screenshot-image,.experience-item .screenshots a video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.experience .technologies{display:flex;flex-wrap:wrap;gap:.5rem}.experience .screenshots:empty,.experience .technologies:empty,.experience .links:empty{display:none}@media(max-width:900px){.experience{gap:4rem;--timeline-width: 2.75rem;--timeline-gap: .6rem}.experience-box>h3{display:grid;grid-template-columns:var(--timeline-width) minmax(0,1fr);align-items:center;column-gap:var(--timeline-gap);row-gap:.45rem;width:100%;min-height:var(--timeline-width);position:relative}.experience-box>h3:after{content:"";position:absolute;left:calc(var(--timeline-width) / 2 - .1rem);top:var(--timeline-width);bottom:0;width:.2rem;background:#3c3843;opacity:.75}.experience-box>h3>svg,.experience-box>h3>.inline-svg>svg,.experience-box>h3>img{grid-column:1;grid-row:1 / span 2;align-self:start;width:var(--timeline-width);height:var(--timeline-width);object-fit:contain}.experience-box>h3>span:not(.inline-svg):not(.date){grid-column:2;grid-row:1;font-size:1.05rem;line-height:1.3}.experience-box>h3 .date{grid-column:2;grid-row:2;font-size:.8rem;line-height:1.3}.experience-box>h3{padding-bottom:1.1rem}.experience-item .bar{width:var(--timeline-width);flex:0 0 var(--timeline-width);margin-right:var(--timeline-gap)}.experience-item .project-name:before{left:calc(-1 * var(--timeline-gap) - var(--timeline-width) / 2 - .25rem)}.experience-item:last-child .bar:before{height:1.2475rem}.experience-item .title{height:auto;min-height:3.2rem;padding:.5rem 0;font-size:1.15rem;line-height:1.3;flex-wrap:wrap;gap:.45rem .6rem}.experience-item .title>span:not(.project-name){max-width:100%}.experience-item .description{font-size:1.05rem;margin-top:0;overflow-wrap:break-word}.experience-item .links{flex-wrap:wrap;gap:.75rem}.experience .technologies{font-size:.85rem;gap:.35rem}.experience-item .screenshots{gap:.35rem}.experience-item .screenshots a{border-width:.14em}}@media(max-width:600px){.experience-item .screenshots{grid-template-columns:minmax(0,1fr);width:13.5em;max-width:100%;gap:1rem;align-items:start}}@media(min-width:601px){.experience-item .screenshots a{background-size:auto 110%;background-position:center;transition:background-size .1s ease-out}.experience-item .screenshots .screenshot-image{display:none}.experience-item .screenshots a video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .1s ease-out}.experience-item .screenshots a:hover{background-size:auto 120%}.experience-item .screenshots a:hover video{transform:scale(1.2)}}@media(max-width:600px){.experience-item .screenshots a{background-size:0}}.icon-link{color:var(--text-dark);opacity:.75;transition:opacity .1s,color .1s;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:.5rem;text-transform:uppercase}.icon-link:hover{color:#fff;opacity:1}.icon-link svg{width:1.2em}.tech-badge{font-size:1em;display:flex;align-items:center;justify-content:center;color:var(--text-dark);gap:.5em;padding:.4em;border:.01em solid rgba(255,255,255,.1);background-color:#ffffff08}.tech-badge svg{height:1.2em}.tech-badge span{flex-grow:0;flex-shrink:0;display:flex;align-items:center;justify-content:center}