@font-face{font-family:Berserker-Regular;src:url(/fonts/Berserker-Regular.woff2)format("woff2");font-display:swap}html{scroll-snap-type:y mandatory;scroll-behavior:smooth}.wrapper{--text-accent:#922929;box-sizing:border-box;width:100dvw}.tagline{grid-template-rows:1fr 1fr;row-gap:.5em;max-width:min(80ch,90dvw);margin:0 auto 1em;font-family:Berserker-Regular;display:grid}.tagline span.right-aligned{text-align:right}.mask{position:relative}.mask:after{content:"D";color:var(--text-accent);filter:brightness(1.5);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);mask-image:url(/utils/god-of-war-mask.svg);mask-position:15%;mask-size:contain;mask-repeat:no-repeat}.gallery{margin:0;padding:0;list-style-type:none}.gallery .slide{scroll-snap-align:start;box-sizing:border-box;view-timeline:--slide;height:100vh;position:relative}.gallery .slide .content{box-sizing:border-box;width:100%;height:100%}.intro{place-content:center;display:grid}.background{--mask-size:800px;box-sizing:border-box;pointer-events:none;opacity:.5;z-index:-1;--drop-shadow-opacity:.75;filter:contrast(1.02) brightness(.99) drop-shadow(5px 5px 15px rgba(var(--text-raw), var(--drop-shadow-opacity)));background:url(/utils/god-of-war-mask.svg) 80%/auto 150vh no-repeat;flex-direction:column;justify-content:end;align-items:center;gap:3em;padding:2em;font-family:Berserker-Regular;display:flex;position:absolute;inset:0}.background .tagline-two{flex-direction:column;width:100%;max-width:350px;font-size:1.15em;display:flex}.background .tagline-two span:last-of-type{text-align:right}.background span.algiz{color:red;border:1.5px solid;width:0;height:.85lh;display:block;position:relative}.background span.algiz:before{aspect-ratio:1;content:"";border-top:3px solid;border-right:3px solid;width:1ch;position:absolute;top:-10%;left:-50%;transform:translate(-50%,-10%)rotate(135deg)}.background span.algiz:after{aspect-ratio:1;content:"";opacity:.25;border:3px double;border-radius:50%;width:1.5lh;position:absolute;top:50%;left:-50%;transform:translate(-50%,-50%)}.background:before{pointer-events:none;content:"";pointer-events:none;border:2.5px solid red;position:absolute;inset:0}@supports (animation-timeline:scroll()){@keyframes fade{0%,to{opacity:0;scale:.9}50%{opacity:1;scale:1}}.gallery .slide .content{animation-name:fade;animation-timing-function:ease-in-out;animation-direction:both;animation-timeline:--slide}}@media screen and (width<=480px){.tagline{font-size:1.8em}.background{background-position:20vw}}@media (pointer:coarse){.background{--mask-size:75%;--x:50%;--y:0%}}:root[data-theme=dark]{& .background{--drop-shadow-opacity:0}}.project{--border-radius:.25em;--padding:2em;padding:var(--padding);grid-template-columns:1fr 1fr;grid-template-areas:"hero mosaic";gap:2em;max-width:min(2048px,100dvw);margin:auto;display:grid}.project .mosaic{box-sizing:border-box;perspective:4000px;grid-area:mosaic;grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:repeat(5,minmax(0,1fr));gap:.25em;width:100%;min-width:0;height:100%;min-height:0;padding:5.5em 0 0;display:grid;position:relative}.project .mosaic figure{border-radius:var(--border-radius);overflow:hidden;box-shadow:1px 1px 1px #00000008,2px 2px 4px #0000000f,5px 5px 9px #00000017,10px 10px 15px #0000001f,15px 15px 24px #00000026}.project .mosaic figure:hover img{scale:1.05}.project .mosaic img{object-fit:cover;object-position:center;will-change:scale;width:100%;height:100%;transition:scale .5s;display:block}.project .hero{background-color:var(--background-color);box-sizing:border-box;flex-direction:column;grid-area:hero;justify-content:space-between;gap:1em;max-width:max(500px,100%);height:100%;padding-right:5em;display:flex;overflow:hidden}.project .hero .title{font-size:var(--step-5);color:var(--text-accent);margin:0 0 .5em;font-weight:600;line-height:1.15}.project .hero .title small{font-size:.35em;font-weight:200}.project .hero p,.project .hero ul{text-align:justify;max-width:100%;font-size:.9em}.project .hero ul{flex-direction:column;gap:1em;margin-top:2em;list-style-type:square;display:flex;position:relative}.project .hero ul li{z-index:1;position:relative}.project .hero ul li:before{--bg:color-mix(in oklab, var(--text-accent) 10%, var(--background-color));content:"";background:linear-gradient(to right, transparent, var(--bg) 7.5%, transparent 75%);z-index:-1;position:absolute;inset:-.25em -1em}.project .hero h3{font-size:1em}.project .hero .links{align-items:end;gap:1em;display:flex}.project .icon-github{width:1.75em}.project .icon-demo{width:1.5em}.project a:has(.icon-demo){margin-bottom:.1em}.project .highlight{filter:grayscale(.25)saturate(3)}.project .hero .tags{flex-wrap:wrap;gap:1em;display:flex}.project .tag{--color:var(--text-accent);--percentage:40%;background-color:color-mix(in oklab, var(--color) var(--percentage), transparent);border-radius:var(--border-radius);padding-inline:.5em;position:relative;overflow:hidden}.project .metric:after{content:"";backdrop-filter:hue-rotate(180deg);position:absolute;inset:0}.project .mosaic .caption{color:#0000;text-align:center;flex-direction:column;grid-area:w;justify-content:center;align-items:center;padding:.5em;font-family:Berserker-Regular;font-size:.85em;transition:color .5s;display:flex;position:relative}.project .mosaic .caption .name{text-transform:uppercase;margin-bottom:.5lh;font-weight:bolder;position:relative}.project .mosaic .caption .name:after{content:"•";text-transform:uppercase;font-weight:bolder;position:absolute;bottom:-.75lh;left:50%;transform:translate(-50%)}.project .mosaic:has(.rune:hover) .caption{color:var(--text-accent);border-color:var(--text-accent)}.project .mosaic .rune{color:var(--text-accent);grid-area:r}@media (orientation:portrait){.project{grid-template:"mosaic""hero"1fr/1fr;gap:2em}.project .hero{width:100%;min-width:0;height:100%;min-height:0;padding:0}.project .hero .title{font-size:2.25em}.project .hero .description{max-width:100%}.project .mosaic{height:40vh;padding-top:0}}@media screen and (width<=1200px){.project .hero .title{font-size:2.25em}}@media screen and (width<=720px){.project .mosaic{height:20vh;display:flex}.project .mosaic figure:not(.main){display:none}.project .mosaic figure.main{inset:calc(var(--padding) * -1);pointer-events:none;width:calc(100% + var(--padding) * 2);height:calc(100% + var(--padding));border-radius:0;position:absolute;bottom:0}.tilt{all:unset}.project .mosaic img{object-position:center}}@media screen and (width<=430px){.project .mosaic{height:30vh}.project .hero .highlights{padding-inline-start:0}.project .hero ul li:before{background:linear-gradient(to right, transparent, var(--bg) 37.5%, transparent 100%)}.project .hero .highlights li:not(.performance){display:none}}@media screen and (width<=385px){.project .hero .highlights{display:none}}@media (pointer:coarse),(prefers-reduced-motion:reduce){.project .mosaic figure img{will-change:auto;transition:none}.project .mosaic figure:hover img{scale:1}}.rune.svelte-ok2c6d .frame:where(.svelte-ok2c6d){transform-origin:50%;animation:45s linear infinite svelte-ok2c6d-spin}@keyframes svelte-ok2c6d-spin{0%{rotate:0}to{rotate:-360deg}}.rune.jera.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:-90deg}.rune.raido.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:-60deg}.rune.sowilo.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:135deg}.rune.eihwaz.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:-105deg}.rune.tiwaz.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:120deg}.rune.ansuz.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:-45deg}.rune.wunjo.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:182deg}.rune.gebo.svelte-ok2c6d path.frame:where(.svelte-ok2c6d){rotate:0}.rune.sowilo.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-sowilo),.rune.tiwaz.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-tiwaz),.rune.jera.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-jera),.rune.raido.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-raido),.rune.eihwaz.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-eihwaz),.rune.ansuz.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-ansuz),.rune.wunjo.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-wunjo),.rune.gebo.svelte-ok2c6d .letters:where(.svelte-ok2c6d) path:where(.svelte-ok2c6d):not(.letter-gebo){display:none}@media screen and (width<=720px){.rune.svelte-ok2c6d{display:none}}.revo-realms{--text-accent:#8f7457}.revo-realms .mosaic{grid-template-areas:".d d b b""c c r b b""c c a a a""c c a a a""w w a a a"}.revo-realms .mosaic img{object-position:top;filter:brightness(1.5)}.zanka-no-tachi{--text-accent:#d96530}.zanka-no-tachi .mosaic{grid-template-areas:"r r b b b""w w b b b""a a a a.""a a a a.""a a a a."}.zanka-no-tachi .mosaic img{filter:saturate(1.25)}.unshaken{--text-accent:#c40610}.unshaken .mosaic{grid-template-areas:"a a a a.""a a a a.""w w w r r"".d d d d"".d d d d"}.unshaken .mosaic img{filter:saturate(1.25)}.cosmic-canvas{--text-accent:#cd9c07}.cosmic-canvas .mosaic{grid-template-areas:"r r c c c""b b c c c""b b a a a""b b a a a""w w a a a"}.whisper-world{--text-accent:var(--text-color)}.whisper-world .mosaic{grid-template-areas:"a a a a a""a a a a a""a a a a a""a a a a a""w w w r r"}.whisper-world .mosaic img{object-fit:fill}.futbob{--text-accent:#2a9c47}.futbob .mosaic{grid-template-areas:"b b b b.""b b b b.""d d r w w""d d a a a"". .a a a"}:root[data-theme=dark] .futbob .mosaic img[data-mode=light],:root[data-theme=light] .futbob .mosaic img[data-mode=dark]{display:none}.futbob .mosaic img{object-position:top}.futbob .mosaic .card img{object-position:80%}.futbob .mosaic .main img{object-position:top right}.ddreamkol{--text-accent:#0064b0}.ddreamkol .mosaic{grid-template-areas:"a a a w w""a a a b b"". .r b b""c c c c c""c c c c c"}.ddreamkol .mosaic img{object-position:top}.pluton-2d{--text-accent:#7eb6ad}.pluton-2d .mosaic{grid-template-areas:"a a a c c""a a a r r""a a a d d""b b b d d""b b b w w"}.pluton-2d .mosaic img{object-position:center;background-color:#fff}