@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: rgb(146, 41, 41);box-sizing:border-box;width:100dvw}.tagline{display:grid;grid-template-rows:1fr 1fr;row-gap:.5em;margin:0 auto 1em;max-width:min(80ch,90dvw);font-family:Berserker-Regular}.tagline span.right-aligned{text-align:right}.mask{position:relative}.mask:after{position:absolute;content:"D";color:var(--text-accent);top:50%;left:50%;transform:translate(-50%,-50%);-webkit-mask-image:url(/utils/god-of-war-mask.svg);mask-image:url(/utils/god-of-war-mask.svg);mask-repeat:no-repeat;mask-position:15%;mask-size:contain;filter:brightness(1.5)}.gallery{padding:0;margin:0;list-style-type:none}.gallery .slide{position:relative;height:100vh;scroll-snap-align:start;box-sizing:border-box;view-timeline:--slide}.gallery .slide .content{width:100%;height:100%;box-sizing:border-box}.intro{display:grid;place-content:center}.background{--mask-size: 800px;box-sizing:border-box;position:absolute;inset:0;pointer-events:none;background:url(/utils/god-of-war-mask.svg);background-repeat:no-repeat;background-position:80% center;background-size:auto 150vh;opacity:.5;z-index:-1;font-family:Berserker-Regular;--drop-shadow-opacity: .75;filter:contrast(1.02) brightness(.99) drop-shadow(5px 5px 15px rgba(var(--text-raw),var(--drop-shadow-opacity)));display:flex;flex-direction:column;justify-content:end;align-items:center;padding:2em;gap:3em}.background .tagline-two{max-width:350px;width:100%;display:flex;flex-direction:column;font-size:1.15em}.background .tagline-two span:last-of-type{text-align:right}.background span.algiz{position:relative;display:block;width:0;height:.85lh;border:1.5px solid;color:red}.background span.algiz:before{position:absolute;top:-10%;left:-50%;width:1ch;aspect-ratio:1/1;content:"";border-top:3px solid;border-right:3px solid;transform:translate(-50%,-10%) rotate(135deg)}.background span.algiz:after{position:absolute;top:50%;left:-50%;width:1.5lh;aspect-ratio:1/1;content:"";transform:translate(-50%,-50%);border:3px double;border-radius:50%;opacity:.25}.background:before{position:absolute;inset:0;content:"";border:2.5px solid red;pointer-events:none}@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 (max-width: 480px){.tagline{font-size:1.8em}.background{background-position:20vw center}}@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;display:grid;grid-template-areas:"hero mosaic";grid-template-columns:1fr 1fr;padding:var(--padding);gap:2em;max-width:min(2048px,100dvw);margin:auto}.project .mosaic{position:relative;display:grid;grid-area:mosaic;min-height:0;min-width:0;gap:.25em;padding:5.5em 0 0;grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:repeat(5,minmax(0,1fr));width:100%;height:100%;box-sizing:border-box;perspective:4000px}.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{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:scale .5s ease;will-change:scale}.project .hero{grid-area:hero;background-color:var(--background-color);height:100%;overflow:hidden;max-width:max(500px,100%);box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:1em;padding-right:5em}.project .hero .title{font-size:var(--step-5);font-weight:600;line-height:1.15;margin:0 0 .5em;color:var(--text-accent)}.project .hero .title small{font-size:.35em;font-weight:200}.project .hero p,.project .hero ul{font-size:.9em;text-align:justify;max-width:100%}.project .hero ul{position:relative;margin-top:2em;list-style-type:square;display:flex;flex-direction:column;gap:1em}.project .hero ul li{position:relative;z-index:1}.project .hero ul li:before{--bg: color-mix(in oklab, var(--text-accent) 10%, var(--background-color));position:absolute;content:"";inset:-.25em -1em;background:linear-gradient(to right,transparent,var(--bg) 7.5%,transparent 75%);z-index:-1}.project .hero h3{font-size:1em}.project .hero .links{display:flex;gap:1em;align-items:end}.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{display:flex;flex-wrap:wrap;gap:1em}.project .tag{--color: var(--text-accent);--percentage: 40%;position:relative;overflow:hidden;background-color:color-mix(in oklab,var(--color) var(--percentage),transparent);padding-inline:.5em;border-radius:var(--border-radius)}.project .metric:after{position:absolute;inset:0;content:"";backdrop-filter:hue-rotate(180deg)}.project .mosaic .caption{grid-area:w;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;color:transparent;transition:color .5s ease;text-align:center;padding:.5em;font-family:Berserker-Regular;font-size:.85em}.project .mosaic .caption .name{position:relative;font-weight:bolder;text-transform:uppercase;margin-bottom:.5lh}.project .mosaic .caption .name:after{position:absolute;content:"•";left:50%;bottom:-.75lh;transform:translate(-50%);font-weight:bolder;text-transform:uppercase}.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-areas:"mosaic" "hero";grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:2em}.project .hero{min-height:0;min-width:0;height:100%;width:100%;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 (max-width: 1200px){.project .hero .title{font-size:2.25em}}@media screen and (max-width: 720px){.project .mosaic{display:flex;height:20vh}.project .mosaic figure:not(.main){display:none}.project .mosaic figure.main{position:absolute;inset:calc(var(--padding) * -1);bottom:0;border-radius:0;pointer-events:none;width:calc(100% + var(--padding) * 2);height:calc(100% + var(--padding))}.tilt{all:unset}.project .mosaic img{object-position:center}}@media screen and (max-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 (max-width: 385px){.project .hero .highlights{display:none}}@media (pointer: coarse),(prefers-reduced-motion: reduce){.project .mosaic figure img{transition:none;will-change:auto}.project .mosaic figure:hover img{scale:1}}.rune.svelte-134db95 .frame:where(.svelte-134db95){transform-origin:center;animation:svelte-134db95-spin 45s linear infinite}@keyframes svelte-134db95-spin{0%{rotate:0}to{rotate:-360deg}}.rune.raido.svelte-134db95 path.frame:where(.svelte-134db95){rotate:-60deg}.rune.sowilo.svelte-134db95 path.frame:where(.svelte-134db95){rotate:135deg}.rune.eihwaz.svelte-134db95 path.frame:where(.svelte-134db95){rotate:-105deg}.rune.tiwaz.svelte-134db95 path.frame:where(.svelte-134db95){rotate:120deg}.rune.ansuz.svelte-134db95 path.frame:where(.svelte-134db95){rotate:-45deg}.rune.wunjo.svelte-134db95 path.frame:where(.svelte-134db95){rotate:182deg}.rune.gebo.svelte-134db95 path.frame:where(.svelte-134db95){rotate:0}.rune.sowilo.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-sowilo){display:none}.rune.tiwaz.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-tiwaz){display:none}.rune.raido.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-raido){display:none}.rune.eihwaz.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-eihwaz){display:none}.rune.ansuz.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-ansuz){display:none}.rune.wunjo.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-wunjo){display:none}.rune.gebo.svelte-134db95 .letters:where(.svelte-134db95) path:where(.svelte-134db95):not(.letter-gebo){display:none}@media screen and (max-width: 720px){.rune.svelte-134db95{display:none}}.revo-realms{--text-accent: rgb(143, 116, 87)}.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: rgb(217, 101, 48)}.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: rgb(196, 6, 16)}.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: rgb(205, 156, 7)}.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: rgb(42, 156, 71)}.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]{display:none}: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: rgb(0, 100, 176)}.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}