*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;line-height:var(--leading-standard)}h1,h2,h3,h4,button,input,label{line-height:var(--leading-fine)}h1,h2,h3,h4{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;color:currentColor}img,picture,video{max-width:100%;block-size:auto;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}@font-face{font-family:cartridge;src:url(../../fonts/Cartridge-Regular.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:cartridge;src:url(../../fonts/Cartridge-Bold.woff2)format("woff2");font-weight:700;font-style:normal}@font-face{font-family:neue-haas-grotesk;src:url(../../fonts/neue-haas-grotesk-regular.woff2)format("woff2");font-weight:400;font-style:normal}@font-face{font-family:neue-haas-grotesk;src:url(../../fonts/neue-haas-grotesk-medium.woff2)format("woff2");font-weight:500;font-style:normal}:root{--cartridge:cartridge,sans-serif;--neue-haas:neue-haas-grotesk,sans-serif;--monospace:ui-monospace,Menlo,monospace;--font-normal:400;--font-medium:500;--font-bold:700;--leading-flat:1;--leading-fine:1.15;--leading-standard:1.5;--leading-loose:1.7;--uppercase-kerning:.04ch;--black:hsl(var(--black-values));--black-50:hsla(var(--black-values),50%);--white:#f2f2f2;--grey:#e2dfdf;--grey-overlay:#cac4c480;--yellow:#efb43e;--orange:#e38935;--red:#d7582d;--black-values:1,8%,14%;--background-noise:url(https://res.cloudinary.com/drumrole/image/upload/v1701013077/personal_site/static_yogxg6.webp);--step-000:clamp(.7813rem,.7217rem + .2979vw,.96rem);--step-00:clamp(.9375rem,.85rem + .4375vw,1.2rem);--step-0:clamp(1.125rem,1rem + .625vw,1.5rem);--step-1:clamp(1.35rem,1.175rem + .875vw,1.875rem);--step-2:clamp(1.62rem,1.3788rem + 1.2063vw,2.3438rem);--step-3:clamp(1.9438rem,1.615rem + 1.6438vw,2.93rem);--step-4:clamp(2.3325rem,1.8894rem + 2.2156vw,3.6619rem);--step-5:clamp(2.7994rem,2.2067rem + 2.9635vw,4.5775rem);--step-9:clamp(5.805rem,4.0148rem + 8.951vw,11.1756rem);--space-3xs:clamp(.3125rem,.2917rem + .1042vw,.375rem);--space-2xs:clamp(.5625rem,.5rem + .3125vw,.75rem);--space-xs:clamp(.875rem,.7917rem + .4167vw,1.125rem);--space-s:clamp(1.125rem,1rem + .625vw,1.5rem);--space-m:clamp(1.6875rem,1.5rem + .9375vw,2.25rem);--space-l:clamp(2.25rem,2rem + 1.25vw,3rem);--space-xl:clamp(3.375rem,3rem + 1.875vw,4.5rem);--space-2xl:clamp(4.5rem,4rem + 2.5vw,6rem);--space-3xl:clamp(6.75rem,6rem + 3.75vw,9rem);--space-3xs-2xs:clamp(.3125rem,.1667rem + .7292vw,.75rem);--space-2xs-xs:clamp(.5625rem,.375rem + .9375vw,1.125rem);--space-xs-s:clamp(.875rem,.6667rem + 1.0417vw,1.5rem);--space-s-m:clamp(1.125rem,.75rem + 1.875vw,2.25rem);--space-m-l:clamp(1.6875rem,1.25rem + 2.1875vw,3rem);--space-l-xl:clamp(2.25rem,1.5rem + 3.75vw,4.5rem);--space-xl-2xl:clamp(3.375rem,2.5rem + 4.375vw,6rem);--space-2xl-3xl:clamp(4.5rem,3rem + 7.5vw,9rem);--space-s-l:clamp(1.125rem,.5rem + 3.125vw,3rem);--space-m-xl:clamp(1.6875rem,.75rem + 4.6875vw,4.5rem);--space-m-2xl:clamp(1.6875rem,.25rem + 7.1875vw,6rem);--space-xl-3xl:clamp(3.375rem,1.5rem + 9.375vw,9rem);--gutter:var(--space-s-l);--transition-cubic:cubic-bezier(.4,0,.2,1);--prose-width:60ch}html{scroll-behavior:smooth}body{font-family:var(--neue-haas);font-size:var(--step-0);color:var(--white);background:var(--black)var(--background-noise)}:is(header,main){background:var(--black)var(--background-noise);position:relative}header{z-index:3;line-height:var(--leading-flat)}header a{text-decoration:none}main{z-index:2;overflow:hidden}footer{color:var(--black);background:var(--red)var(--background-noise);z-index:1;position:sticky;bottom:0}footer ::selection{color:var(--yellow);background:var(--black)}:is(h1,h2,h3){font-family:var(--cartridge);font-weight:var(--font-bold);text-wrap:pretty;max-width:30ch}h1{font-size:var(--step-5);text-transform:uppercase}h2{font-size:var(--step-3);text-transform:uppercase}h3{font-size:var(--step-2)}small{font-size:var(--step-00)}figcaption{text-align:center;padding-block-start:.5em;padding-inline:var(--space-s);font-size:.8em}:is(code,kbd,samp){font-family:var(--monospace);-webkit-hyphens:none;hyphens:none;tab-size:2;text-align:left;word-spacing:normal;word-break:normal;word-wrap:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}@supports not (font-size-adjust:from-font){:is(code,kbd,samp){font-size:.8em}}pre:has(code){width:max-content;max-width:100%;overflow-x:auto}pre code{background:0 0;border:none;padding:0}kbd{border:1px solid;padding-block-end:.1em}var{font-style:normal;font-weight:var(--font-medium)}q{font-style:italic}pre{font-size:var(--step-00)}:not(pre)>code{font-weight:600}p,li,blockquote:not([class]){text-wrap:pretty;max-width:60ch}blockquote:not([class]){padding-inline:var(--gutter);margin-inline:0;position:relative}blockquote:not([class]):before{content:"“";color:var(--black-50);font-family:var(--cartridge);font-size:var(--step-5);top:0;left:calc(var(--space-3xs)*-1);line-height:.8;position:absolute}a{color:currentColor;text-decoration-thickness:.08em}a:hover{-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red)}time{color:var(--black);text-align:right}aside{background:var(--grey);border-radius:var(--space-2xs);padding:var(--space-s-m);box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}svg:not([width]):not([height]){width:auto;height:1.5ex}[role=list]{margin:0;padding:0}::selection{color:var(--black);background:var(--red)}.cluster{align-items:var(--cluster-vertical-alignment,center);gap:var(--gutter,var(--space-s-m));justify-content:var(--cluster-horizontal-alignment,flex-start);flex-wrap:wrap;display:flex}.flow>*+*{margin-block-start:var(--flow-space,1em)}.grid{grid-gap:var(--grid-gap,1rem);grid-template-columns:repeat(auto-fit,minmax(min(var(--grid-min,250px),100%),1fr));display:grid}.prose{--flow-space:var(--space-s-m);line-height:var(--leading-loose)}.prose li:not(:first-child,[class]){margin-block-start:var(--_list-flow,.75em)}.prose :is(h2,h3,h4){--flow-space:var(--space-l-xl)}.prose :is(pre,pre+*,figure){--flow-space:var(--space-m-l)}.prose figure+*{--flow-space:var(--space-l-xl)}.prose :is(h2+*,h3+*,h4+*):not(figure){--flow-space:var(--space-s)}.prose :is(h1,h2,h3,h4,h5,p,ul,ol,blockquote){max-width:60ch}.region{padding-block-start:var(--space-xl-2xl);padding-block-end:var(--space-2xl-3xl)}.repel{align-items:var(--repel-vertical-alignment,center);gap:var(--gutter,var(--space-m-l));flex-wrap:wrap;justify-content:space-between;display:flex}.sidebar{align-items:var(--sidebar-vertical-alignment,center);gap:var(--sidebar-gap,var(--space-m-l));flex-wrap:wrap;display:flex}.sidebar>:first-child{flex-basis:var(--sidebar-target-width,20rem);flex-grow:1}.sidebar>:last-child{min-inline-size:var(--sidebar-content-min-width,50%);flex-grow:666;flex-basis:0}.wrapper{max-width:var(--wrapper-max-width,80rem);padding-inline:var(--gutter);margin-inline:auto;position:relative}.header{padding-block:var(--space-xs);border-bottom:solid 1px var(--white)}.header__logo{color:var(--white)}.header__logo:hover{color:var(--red)}.header__logo svg{height:var(--step-0);width:auto}.menu{font-family:var(--cartridge);font-size:var(--step-00);text-transform:uppercase}.menu__link:hover{color:var(--red)}.hero.sidebar{--sidebar-target-width:28rem;--sidebar-content-min-width:40%;--sidebar-gap:var(--space-l-xl)}.line-yellow,.line-orange,.line-red{background-image:var(--background-noise);inline-size:100%}.line-yellow{background-color:var(--yellow)}.line-orange{block-size:var(--space-s-m);background-color:var(--orange)}.line-red{block-size:var(--space-xs-s);background-color:var(--red)}.projects{color:var(--black);background-color:var(--grey);background-image:var(--background-noise)}.projects__title{color:var(--black);line-height:var(--leading-flat);padding-block:var(--space-2xs)}.project{color:var(--black);padding:var(--space-m-2xl);background:var(--grey-overlay);border-radius:var(--space-s-m);transition:box-shadow var(--transition-cubic).2s;text-decoration:none;display:block}.project:hover{box-shadow:0 0 0 4px var(--red)}.project:not(:first-of-type){margin-block-start:var(--space-xl-2xl)}.project__image,.project__screenshot,.project__video{border-radius:var(--space-2xs-xs);margin-inline:auto}.project__image{border:solid 2px var(--black);max-inline-size:min(100%,40rem)}.project__screenshot,.project__video{border:solid 4px var(--red);max-inline-size:min(100%,46rem)}.project>.sidebar{--sidebar-target-width:20rem;--sidebar-content-min-width:55%}.project__title-block{text-align:center;margin-block-end:var(--space-m-l)}.project__subtitle{font-family:var(--cartridge);font-size:var(--step-0);text-transform:uppercase;letter-spacing:.04ch;text-align:center;margin-inline:auto}.project__header-image{border:solid 4px var(--red);border-radius:var(--space-xs)}.tech-stack{gap:var(--space-s);border:solid 4px var(--yellow);border-radius:var(--space-2xs);padding:var(--space-s-l);flex-wrap:wrap;justify-content:center;margin-block-start:var(--space-3xs);display:flex}.tech-stack>*{flex:9rem}.tech-stack__text{font-family:var(--cartridge);text-transform:uppercase;letter-spacing:var(--uppercase-kerning);text-align:center;line-height:var(--leading-fine)}.tech-stack__text svg{color:var(--orange);height:var(--step-3);width:auto}.tech-stack__text a{text-decoration:none}.tech-stack__text a:hover{color:var(--red)}.tech-stack__text a:hover svg{color:var(--red)}.tech-stack__title{font-size:var(--step-2);color:var(--red);text-transform:lowercase;font-weight:400}.blog-preview{--_article-border-radius:var(--space-2xs);--grid-gap:var(--space-xl-3xl);--grid-min:300px;margin-block-start:var(--space-l-xl)}.blog-preview__wrapper{grid-row:auto/span 1;grid-template-rows:subgrid;border:solid 2px var(--white);border-radius:var(--space-3xs);max-inline-size:32.5rem;padding:var(--space-s);background-color:var(--black-50);transition:all var(--transition-cubic).2s;padding-block-end:var(--space-xl-2xl);text-decoration:none;display:grid}.blog-preview__wrapper:hover{border-color:var(--yellow);transform:translateY(-1rem)}.blog-preview__article{background:var(--grey)var(--background-noise);border-radius:var(--_article-border-radius);flex-direction:column;justify-content:space-between;height:100%;display:flex}.blog-preview__title{color:var(--black);font-size:var(--step-1);font-weight:var(--font-normal);text-transform:uppercase;padding:var(--space-s);padding-block-end:var(--space-l-xl)}.blog-preview__date{font-size:var(--step-000);padding-inline:var(--space-s);text-transform:uppercase;margin-block-start:auto;margin-block-end:var(--space-3xs)}.blog-preview__label{height:var(--space-m-l);background:var(--red)var(--background-noise);border-bottom-left-radius:var(--_article-border-radius);border-bottom-right-radius:var(--_article-border-radius)}.blog__header{padding-block-start:var(--space-xl-2xl)}.blog__title-wrapper{box-sizing:content-box;--wrapper-max-width:var(--prose-width)}.blog__title{text-transform:none;background:linear-gradient(to bottom,var(--red)25%,var(--orange)25% 50%,var(--yellow)50% 75%,var(--white)75%);background-size:1rem calc((var(--step-5)*4*var(--leading-fine)) + .5rem);color:#0000;filter:drop-shadow(0px 2px 3px var(--black));background-position:0 0;-webkit-background-clip:text;background-clip:text;margin-inline:auto}.blog__grid{max-block-size:25vh;min-inline-size:100%;margin-block-start:calc(-.45*var(--step-5))}.blog__article{background-color:var(--white)}:is(.blog__image,.blog__video){width:100%;max-width:var(--_blog-image-max-width,36rem);border:solid 2px var(--grey-overlay);border-radius:.5rem;margin-inline:auto}:is(.blog__image,.blog__video):not(:has(+figcaption)){margin-block:var(--space-m-l)}.blog__image-narrow{--_blog-image-max-width:20rem}.blog__video{--_blog-image-max-width:42rem}.blog__date{font-size:var(--step-000);text-transform:uppercase;inline-size:100%;display:block}.prose-blog{color:var(--black);max-inline-size:var(--prose-width)}.prose-blog :is(h1,h2){text-transform:none}.prose-blog h3{font-weight:400}.prose-project{max-width:var(--prose-width);margin-block-start:var(--space-l-xl);margin-inline:auto}.footer{padding-block-start:var(--space-l-xl)}.footer__line{height:var(--space-3xs-2xs)}.footer__line:first-child{background:var(--yellow)var(--background-noise)}.footer__line:nth-child(2n){background:var(--orange)var(--background-noise)}.footer__links{--cluster-vertical-alignment:start;--gutter:var(--space-l)}.footer__links div{width:16rem}.footer__links p{font-size:var(--step-000);text-transform:uppercase}.footer__links li:not(:first-child){margin-block-start:var(--space-3xs)}.footer__links a{font-size:var(--step-00);font-weight:500;text-decoration:none}.footer__links a:hover{text-underline-offset:.2ex;text-decoration:underline;text-decoration-thickness:2px}.footer__copyright{margin-block-start:var(--space-xl-3xl)}.footer__copyright svg{width:100%;height:auto}.footer-blog{background-color:var(--yellow)}.footer-blog .footer__line:first-child{background-color:var(--red)}.error-page{block-size:calc(100vh - var(--space-l));justify-content:center;align-items:center;display:flex}.error-page h1{color:var(--red);font-size:var(--step-9);text-align:center}.error-page>*{margin-block-start:-10vh}.center{margin-inline:auto}.prose-width{max-inline-size:var(--prose-width)}.repel-end{--repel-vertical-alignment:end}