:root {
	--color-main-dark: hsl(201, 38%, 21%);

	--color-main-1: hsl(170, 100%, 95%);
	--color-main-2: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 10%) h calc(s * 0.8) l);
	--color-main-3: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 45%) h calc(s * 0.6) l);
	--color-main-4: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 60%) h calc(s * 0.5) l);
	--color-main-5: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 90%) h calc(s * 0.8) l);

	--color-accent-1: hsl(49, 100%, 64%);

	--color-navbar-dark: var(--color-main-dark);
	--color-navbar-light: var(--color-main-1);

	--work-tile-hover-shadow: inset -1px -1px 2px rgb(from var(--color-main-1) r g b / 50%), 1px 2px 4px #00000044, 2px 4px 8px #00000066;

	--color-post-it: #f7ffd3;
	--color-post-it2: #ffe1d3;
	--post-it-shadow: 1px 3px 2px #00000022, 3px 6px 16px #00000033;

	--card-effect: inset 2px 2px 0px hsl(from var(--color-main-1) h calc(s * 1.2) l / 80%), inset 0px -16px 64px hsl(from var(--color-main-4) h calc(s * 1.2) l / 30%), 2px 2px 4px #00000055, 2px 2px 8px #00000011;

	--card-gradient-1: linear-gradient(175deg, rgb(from var(--color-main-1) r g b / 100%) 20%, hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-3) 60%) h calc(s * 0.5) l) 95%);
	--card-gradient-2: linear-gradient(175deg, rgb(from var(--color-main-1) r g b / 75%), rgb(from var(--color-main-1) r g b / 0%) 40%);

	--hover-brightness: 115%;

	--nav-arrow-button-width: 40px;

	--banner-fade-distance: 50px;
	--banner-blur-radius: 16px;

	--container-max-width: 1300px;
	--container-paddingY-default: 70px;
	--container-paddingX-default: 50px;
	--container-paddingX-negation: calc(-1 * var(--container-paddingX-default));

	--rounded-box-radius: 20px;
	--rounded-box-padding: calc(var(--rounded-box-radius) * 2);

	--paragraph-padding: 20px;

	--footer-gradient-distance: 20px;
	--footer-gradient-strength: 25%;
	--footer-end-spacing: 50px;

	--current-content-bgColor: hsl(from color-mix(in hsl, var(--color-main-2), var(--color-main-3) 70%) h calc(s * 0.8) l );
	--current-content-fgColor: white;

}

.enshrouded-colors {
	--color-main-1: hsl(212, 57%, 89%);
	--color-main-dark: hsl(224, 26%, 23%);
	--color-main-2: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 20%) h calc(s * 0.9) l);
	--color-main-3: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 35%) h calc(s * 0.9) calc(l * 0.9));
	--color-main-4: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 60%) h calc(s * 0.7) l);
	--color-main-5: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 90%) h calc(s * 0.9) l);

	--color-navbar-dark: var(--color-main-5);
	--color-navbar-light: var(--color-main-2);
	--current-content-bgColor: var( --color-main-2 );
}

.pk-colors {
	--color-main-1: hsl(44, 100%, 95%);
	--color-main-dark: #503215;
	--color-main-2: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 20%) h calc(s * 0.9) l);
	--color-main-3: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 40%) h calc(s * 0.7) calc(l * 0.8));
	--color-main-4: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 70%) h calc(s * 0.5) l);
	--color-main-5: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 80%) h calc(s * 0.5) l);

	--color-navbar-dark: hsl(from var(--color-main-dark) h s l);
	--color-navbar-light: hsl(51, 100%, 65%);
	--current-content-bgColor: color-mix(in hsl, var(--color-main-2), var(--color-main-3) 50%);
}

.hm-colors {
	--color-main-1: hsl(97, 100%, 95%);
	--color-main-dark: #23522d;
	--color-main-2: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 20%) h calc(s * 0.5) calc(l * 0.8));
	--color-main-3: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 30%) h calc(s * 0.7) calc(l * 0.9));
	--color-main-4: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 60%) h calc(s * 0.5) l);
	--color-main-5: hsl(from color-mix(in hsl, var(--color-main-1), var(--color-main-dark) 80%) h calc(s * 0.4) l);

	--color-navbar-dark: var(--color-main-5);
	--color-navbar-light: hsl(56, 100%, 50%);
	--current-content-bgColor: var( --color-main-3 );
}

.landing-page {
	--container-paddingY-default: 100px;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-family: "Sofia Sans", sans-serif;
	font-optical-sizing: auto;
	font-size: 62.5%;
}

a {
	color: inherit;
	font-weight: 500;
	text-decoration-color: rgb(from currentColor r g b / 30%);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

@media (hover: hover) and (pointer: fine) {
	a:hover {
		color: inherit;
		text-decoration-color: rgb(from currentColor r g b / 100%);
		text-decoration-thickness: 4px;
	}
}

img {
	max-width: 100%;
}

button {
	font: inherit;
	font-weight: 600;
	text-transform: uppercase;
}

svg {
	display: block;
}

/* ----------------------------------------- */

.container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: var(--container-paddingY-default) var(--container-paddingX-default);
	container-type: inline-size;

	video {
		width: 100%;
	}
}

/* text ----------------------------------------- */

body {
	color: var(--color-main-dark);
	font-size: 2rem;
	font-weight: 350;
	font-style: normal;
	line-height: 130%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	break-after: avoid;
}

h1 {
	font-size: 4rem;
	font-weight: 800;
	font-style: normal;
	line-height: 100%;

	&:has(~ *) {
		margin-bottom: 20px;
	}
}

h2 {
	font-size: 2.5rem;
	font-weight: 800;
	font-style: normal;
	margin-bottom: 15px;
}

h3 {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	word-spacing: 0.3rem;
	text-transform: uppercase;
}

summary {
	text-align: center;
	cursor: pointer;
}

summary h3 {
	display: inline;
}

h4 {
	font-size: 1.68rem;
	font-weight: 650;
	word-spacing: 0.3rem;
	text-transform: uppercase;
}

li {
	margin-left: 25px;
	break-inside: avoid;
}

li:not(:last-child) {
	margin-bottom: var(--paragraph-padding);
}

.section-header {
	text-align: center;
}

.section-subheader {
	text-align: center;
}

.section-header + .section-subheader {
	margin-top: 30px;
}


.legal {
	background-image: linear-gradient(to bottom, 
		rgb(from var(--color-main-2) r g b / 80%) 0%, 
		rgb(from var(--color-main-2) r g b / 40%) 50px, rgb(from var(--color-main-2) r g b / 0%) 100px);

	h2 {
		margin-top: 100px;

		h1 + & {
			margin-top: 50px;
		}
	}

	&.impressum h2 {
		margin-top: 40px;
	}
	
	h3 {
		margin-top: 20px;
		p + & {
			margin-top: 40px;
		}
		font-weight: 700;
	}

	h4 {
		margin-top: 30px;

		h3 + & {
			margin-top: 10px;
		}

		p + & {
			margin-top: 30px;
		}

		font-weight: 700;
		font-size: 2rem;
		text-transform: none;
	}

	h6 {
		font-size: 2rem;
		font-style: italic;
		font-weight: 400;
		color: var(--color-main-4);
		margin-top: 0px;
		margin-bottom: 20px;
	}
}

#email {
	display: inline-flex;
	& span:nth-child( even ) {
		display: none;
	}
}

/* navbar ----------------------------------------- */

html {
	scrollbar-gutter: stable;
}

body:has( #sidebar-active:checked ) {
	overflow: hidden;
}

.navbar {
	position: fixed;
	z-index: 10;
	right: 20px;
	top: 20px;

	@media (max-width: 750px ) {
		top: unset;
		bottom: 20px;
	}

	pointer-events: none;
	
	display: block;
	isolation: isolate;

	font-size: 2.2rem;
	font-style: normal;
	font-weight: 600;

	--menu-transition-duration: 200ms;
	--menu-link-hover-color: rgb( from var(--color-main-3) r g b / 20% );
	--line-color: hsl( from var( --color-main-4 ) h s l / 20% );

	a {
		text-decoration: none;
	}

	svg {
		fill: currentColor;
	}

	ul li {
		list-style: none;
		margin-left: 0px;
		margin: 0px;
		font-weight: 600;
	}

	#closer-overlay {
		position: fixed;
		inset: 0;
		z-index: -1;
		pointer-events: none;

		--overlay-color: hsl( from var(--color-main-dark) h calc( 0.7 * s ) l / 50%);
		background-color: var( --overlay-color );

		opacity: 0;
		transition: calc( 0.75 * var(--menu-transition-duration) ) ease;
	}

	#sidebar-active:checked ~ #closer-overlay {
		opacity: 1;
		pointer-events: auto;
		transition: calc( 2 * var(--menu-transition-duration) ) ease;
	}

	.menu-floater {
		--menu-corner-size: 30px;
		--menu-corner-expand: 10px;
		--menu-corner-expanded-size: calc( var(--menu-corner-size) + var( --menu-corner-expand ) );
		--menu-button-size: calc(2 * var(--menu-corner-size));
		
		-webkit-tap-highlight-color: transparent;
			
		display: grid;
		grid-template-columns: 1fr var(--menu-corner-expanded-size);
		grid-template-rows: var(--menu-corner-expanded-size) 1fr;

		.shadow {
			pointer-events: none;
			position: absolute;
			contain: layout paint;

			margin-top: var( --menu-corner-expand );
			margin-right: var( --menu-corner-expand );
			inset: 0;
			border: solid;
			border-image-source: url("../images/box_shadow.png");
			border-image-slice: 49.9% fill;
			border-image-repeat: stretch;
			border-image-width: calc( 2 * var( --menu-corner-size ) );
			border-image-outset: var( --menu-corner-size );
			
			--minSize: calc( 2 * var( --menu-corner-size ) );
			width: var( --minSize );
			height: var( --minSize );
			translate: calc( 0.1 * var( --menu-corner-size ) ) calc( 0.1 * var( --menu-corner-size ) );

			grid-column: 1 / 3;
			grid-row: 1 / 3;
			place-self: start end;
			opacity: 0.6;
			transition: 
				calc( 0.8 * var(--menu-transition-duration) ) cubic-bezier(1, 0, 0, 1), 
				opacity calc( 0.5 * var(--menu-transition-duration) ) linear;
		}
		
		.bg-clipper {
			overflow: hidden;
			.box-corner {
				min-width: var(--menu-corner-size);
				min-height: var(--menu-corner-size);
				width: 100%;
				height: 100%;
				background-color: rgba(255, 255, 255, 1);
				transition: var(--menu-transition-duration) cubic-bezier(1, 0, 0, 1);
			}

			&.topleft {
				z-index: 2;
				grid-column: 1 / 2;
				grid-row: 1 / 2;
				.box-corner {
					translate: calc(100% - var(--menu-corner-size)) calc( var( --menu-corner-expand ) );
					border-radius: var(--menu-corner-size) 0 0 0;
				}
			}

			&.topright {
				z-index: 3;
				grid-column: 2 / 3;
				grid-row: 1 / 2;
				.box-corner {
					translate: calc( -1 * var( --menu-corner-expand ) ) calc( var(--menu-corner-expand ));
					border-radius: 0 var(--menu-corner-size) 0 0;
				}
			}

			&.bottomleft {
				z-index: 1;
				grid-column: 1 / 2;
				grid-row: 2 / 3;
				.box-corner {
					translate: calc(100% - var(--menu-corner-size)) calc(-100% + var(--menu-corner-size));
					border-radius: 0 0 0 var(--menu-corner-size);
				}
			}

			&.bottomright {
				z-index: 2;
				grid-column: 2 / 3;
				grid-row: 2 / 3;
				.box-corner {
					translate: calc( -1 * var( --menu-corner-expand ) ) calc(-100% + var(--menu-corner-size));
					border-radius: 0 0 var(--menu-corner-size) 0;
				}
			}
		}

		@media (max-width: 750px ) {
			grid-template-rows: 1fr var(--menu-corner-expanded-size);

			.shadow {
				margin-top: 0;
				margin-bottom: var( --menu-corner-expand );
				place-self: end end;
			}

			.bg-clipper {
				&.topleft .box-corner {
					translate: calc(100% - var(--menu-corner-size)) calc( 100% - var( --menu-corner-size ) );
				}

				&.topright .box-corner {
					translate: calc( -1 * var( --menu-corner-expand ) ) calc( 100% - var(--menu-corner-size ));
				}
			}
		}

		#sidebar-active:checked ~ & {
			.shadow {
				width: 100%;
				height: 100%;
				margin: 0;
				opacity: 0.8;
				transition: 
					var(--menu-transition-duration) cubic-bezier(1, 0, 0, 1), 
					opacity calc( 0.1 * var(--menu-transition-duration) ) linear;
			}

			.menu-button {
				&.open {
					display: none;
				}
				&.close {
					display: block;
				}
			}

			.open-only {
				pointer-events: auto;

				.button-transformer {
					translate: 0 0;
					opacity: 1;
				}
			}

			.bg-clipper .box-corner {
				translate: 0;
				transition: var(--menu-transition-duration) cubic-bezier(1, 0, 0, 1);
			}

			@media (hover: hover) and (pointer: fine) {
				.menu-button:hover {
					background-color: var( --menu-link-hover-color );
				}
			}

			.main-menu {
				opacity: 100%;
				transform: translate( 0 ) scale( 100% );
				pointer-events: auto;
			}
		}
	}
	
	.button-row {
		z-index: 5;
		grid-column: 1 / 3;
		grid-row: 1 / 3;

		align-self: start;

		@media (max-width: 750px ) {
			align-self: end;
		}

		margin: var( --menu-corner-expand );
		height: var(--menu-button-size);
		
		display: grid;
		grid-template-columns: 1fr var(--menu-button-size);
		justify-content: space-between;
		
		.open-only {
			grid-column: 1 / 2;
			overflow: hidden;
			pointer-events: none;
			display: flex;
			align-items: center;
			padding-left: calc( 10px + var( --menu-corner-expand ) );

			.button-transformer {
				translate: 100% 0;
				opacity: 0;
				transition: var(--menu-transition-duration) cubic-bezier(1, 0, 0, 1);
				
				a {
					width: 50px;
					cursor: pointer;
					display: inline-block;
					padding: 10px 20px;
					text-align: center;

					border-radius: 10px;
				}
			}
		}

		.button-box {
			grid-column: 2 / 3;
			width: var(--menu-button-size);
			min-width: var(--menu-button-size);
			height: var(--menu-button-size);
			
			display: flex;
			align-items: center;
			justify-content: center;
			
			.menu-button {
				cursor: pointer;
				pointer-events: auto;
				border-radius: 50%;
				padding: 8px;

				&.open {
					display: block;
				}
				&.close {
					display: none;
				}
			}
		}
	}

	.menu-clipper {
		z-index: 5;

		margin: 15px calc( 20px + var( --menu-corner-expand ) );
		margin-top: 70px;

		@media (max-width: 750px ) {
			margin: 30px calc( 20px + var( --menu-corner-expand ) );
			margin-bottom: 50px;
		}

		padding-bottom: 10px;
		grid-column: 1 / 3;
		grid-row: 1 / 3;
		overflow: hidden;
	}

	.main-menu {
		display: grid;
		grid-template-columns: auto auto;
		column-gap: 5px;
		row-gap: 5px;

		pointer-events: none;

		transform-origin: top right;
		transform: translate( 100%, -100% ) scale( 50% );

		opacity: 0;
		transition:
			transform var(--menu-transition-duration) cubic-bezier(1, 0, 0, 1),
			opacity calc( 0.5 * var(--menu-transition-duration) ) ease-in;

		li {
			grid-column: 1 / -1;
			width: 100%;
			text-align: center;

			a {
				width: 100%;
				display: inline-block;
				white-space: nowrap;
				border-radius: 10px;
				padding: 12px 30px;
			}

			&.nav-secondary {
				font-size: smaller;
				display: flex;

				&.left {
					grid-column: 1 / 2;
				}

				&.right {
					grid-column: -2 / -1;
				}

				a {
					font-weight: 400;
					padding: 8px 20px;
				}
			}

			&:has( hr ) {
				padding: 10px 0px;
			}

			&:has( #lang-de, #lang-en ) {
				grid-column: span 1;
				padding: 0 5px;
			}
		}

		hr {
			border: none;
			height: 2px;
			background-color: var( --line-color );
		}

		@media (max-width: 750px ) {
			transform-origin: bottom right;
			transform: translate( 100%, 100% ) scale( 50% );

			li:has( hr ) {
				padding: 5px 0;
				&:first-of-type {
					order: 99;
					padding-bottom: 15px;
				}
			}
		}
	}
}

#lang-de, #lang-en {
	padding: 5px 0px 2px;
	font-size: smaller;
}

.current-content {
	font-weight: 800;
	background-color: var( --current-content-bgColor );
	color: var( --current-content-fgColor );
	text-shadow: 0 0 2px var( --color-main-4 );
}

a:active, a:focus-visible {
	background-color: var( --menu-link-hover-color );
}

@media (hover: hover) and (pointer: fine) {
	.navbar a {
		&.current-content:hover {
			color: var( --current-content-fgColor );
		}

		&:not( .current-content ):hover {
			background-color: var( --menu-link-hover-color );
		}
	}
}

/* hero ----------------------------------------- */

.hero {
	background-color: var(--color-main-1);
}

.hero .container {
	padding-top: 80px;
	padding-bottom: 100px;
}

.hero-content {
	display: grid;
	grid-template-columns: 1fr min(35%, 350px) auto 1fr;
	grid-template-rows: 1fr min-content min-content min-content 1fr;
	column-gap: 50px;
	row-gap: 20px;
}

.portrait-area {
	position: relative;
	margin: auto 0;
	grid-column-start: 2;
	grid-row: 1 / 6;

	.portrait-circle {
		overflow: hidden;
		border-radius: 50%;

		aspect-ratio: 1;
		width: 100%;
		margin: auto;
	}
}

.name-greeting {
	grid-column-start: 3;
	grid-row: 2;
	margin-bottom: 20px;

	.speech-bubble {
		position: relative;
		left: -120px;
		width: min-content;
		padding: 20px 40px;
		font-size: 2.5rem;
		background-color: white;
		border-radius: 20px;
		text-wrap: nowrap;
		filter: drop-shadow(4px 4px 8px #00000066);

		&::after {
			content: "";
			position: absolute;
			left: 7%;
			top: calc(100% - 2px);
			width: 28px;
			height: 18px;
			background-image: url("../icons/speechbubble_tail.svg");
			background-size: 100% 100%;
		}
	}
}

.name-emphasis {
	font-weight: 800;
}

.self-intro {
	font-weight: 300;
	font-size: 2.2rem;
	line-height: 150%;
	text-wrap: pretty;

	@media (1000px < width) {
		max-width: 550px;
	}

	&:nth-of-type(1) {
		grid-column-start: 3;
		grid-row-start: 3;
	}

	&:nth-of-type(2) {
		grid-column-start: 3;
		grid-row-start: 4;
	}

	b {
		font-weight: 600;
	}

	p + p {
		margin-top: 20px;
	}
}

@media (750px < width <= 1000px) {
	.hero-content {
		margin-left: 20px;
		margin-right: 20px;
		grid-template-columns: 1fr min(45%, 250px) auto 1fr;
		grid-template-rows: 1fr min-content min-content 1fr min-content;
		row-gap: 10px;

		.portrait-area {
			grid-column-start: 2;
			grid-row: 1 / 5;
		}

		.name-greeting {
			grid-column-start: 3;
			grid-row: 2;

			.speech-bubble {
				left: -100px;
				top: -10px;
			}
		}

		.self-intro:nth-of-type(1) {
			grid-column: 3 / 4;
			grid-row-start: 3;
		}

		.self-intro:nth-of-type(2) {
			grid-column: 1 / 5;
			grid-row-start: 5;
			text-align: center;
			align-self: center;
			margin: 30px 20px 0px 20px;
		}
	}
}

@media (max-width: 750px) {
	h1 {
		font-size: 3rem;
	}

	.hero .container {
		text-align: center;
		padding: 0;
		padding-bottom: 40px;
	}

	.hero-content {
		--portrait-area-width: min(380px, 65%);

		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 30px;
		padding-top: 70px;
		align-items: center;
		position: relative;

		.portrait-area {
			grid-column-start: 1;
			grid-row: 1 / 1;

			.portrait-circle {
				width: var(--portrait-area-width);
			}
		}

		.name-greeting {
			grid-column-start: 1;
			grid-row: 1;
			place-self: start start;
			position: absolute;
			left: calc(50% - var(--portrait-area-width) * 0.65);
			top: calc(50% - var(--portrait-area-width) * 0.7);

			.speech-bubble {
				left: 0;
				padding: 20px 30px;
				transform: translateY(-100%);

				&::after {
					left: calc(var(--portrait-area-width) * 0.7);
					transform: scaleX(-1);
				}
			}
		}
	}

	.self-intro {
		padding-left: var(--container-paddingX-default);
		padding-right: var(--container-paddingX-default);
	}

	.self-intro:nth-of-type(1) {
		grid-column: 1;
		grid-row-start: 2;
		margin: 0;
	}

	.self-intro:nth-of-type(2) {
		grid-column: 1;
		grid-row-start: 3;
		margin: 0;
	}
}

.banner {
	position: relative;
	background-color: var(--color-main-dark);
	max-height: 340px;
	overflow: hidden;

	.container {
		padding-top: 0;
		padding-bottom: 0;
	}

	img {
		display: block;
		width: 100%;
	}

	&.pk {
		mask-image: linear-gradient(to bottom, white 40%, transparent);

		img {
			position: relative;
			object-fit: cover;
			object-position: center;
			min-height: 400px;
			transform: translateY( -15%);
		}
	}

	&.hm {
		background-color: transparent;
		background-image: linear-gradient(to bottom, var(--color-main-4), transparent);

		img {
			transform: translateY(-10%);
			max-width: max( 250px, 40% );
			margin: 40px auto 20px auto;
			filter: 
				drop-shadow(0px 0px 12px rgb( from var(--color-main-dark) r g b / 80% ) )
				drop-shadow(0px 0px 4px rgb( from var(--color-main-dark) r g b / 30% ) );
		}
	}

	&.enshr {
		background-color: transparent;
		background-image: linear-gradient(to bottom, 
			var(--color-main-dark), 
			rgb( from var(--color-main-4) r g b / 80% ) 50%, 
			transparent);

		img {
			max-width: max( 700px, 70% );
			margin: 70px auto 100px auto;
			filter:
				drop-shadow(0px 0px 16px rgb(99 206 255 / 50% ) ) 
				drop-shadow(0px 0px 8px rgba(136, 217, 255, 0.8) );
		}
	}
}

/* published games ---------------------------- */

.published-games {
	background-color: var(--color-main-2);
	background-image: linear-gradient(to bottom, rgb(from var(--color-main-4) r g b / 30%) 0%, rgb(from var(--color-main-4) r g b / 0%) 20px);
}

.highlights-container {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	margin-top: 30px;
	margin-bottom: 100px;
}

.all-titles-timeline {
	margin-top: 30px;

	hr {
		border: 0;
		border-top: 2px;
		border-style: solid;
		color: var(--color-main-3);
		opacity: 50%;
	}

	li {
		list-style: none;
		margin-left: 0px;
		display: grid;
		grid-template-columns: 1fr 140px 1fr;
		column-gap: 20px;
		align-items: center;
		text-wrap: balance;

		.role-ui {
			grid-column: 1;
			grid-row: 1;
			text-align: right;
			margin-bottom: auto;
		}

		.role-3dart {
			grid-column: 3;
			grid-row: 1;
			text-align: left;
			margin-bottom: auto;
		}
	}

	.header {
		text-transform: uppercase;
		text-align: center;
		font-size: 1.7rem;
		font-weight: 700;
		color: var(--color-main-4);
	}

	time {
		grid-column: 2;
		text-align: center;
		margin-bottom: auto;
	}
}

.game-name {
	font-weight: 700;

	a {
		font-weight: inherit;
	}
}

.mobile-only {
	display: none !important;
}

@media (max-width: 750px) {
	.highlights-container {
		margin-top: 20px;
		margin-bottom: 70px;
	}

	.mobile-only {
		display: revert !important;
	}

	.not-mobile {
		display: none !important;
	}

	.all-titles-timeline {
		margin-top: 20px;
	}

	.all-titles-timeline li {
		grid-template-columns: auto 1fr;
		column-gap: 20px;
	}

	.all-titles-timeline time {
		grid-column: 1;
		text-align: center;
		margin-bottom: auto;
	}

	.all-titles-timeline li .role-ui {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		margin-bottom: auto;
		font-weight: 700;
	}

	.all-titles-timeline li .role-3dart {
		grid-column: 2;
		grid-row: 1;
		text-align: left;
		margin-bottom: auto;
		font-weight: 700;
	}

	.role-ui + .role-3dart {
		display: none;
	}
}

.all-titles-timeline li .role-note {
	font-size: 1.7rem;
	font-style: italic;
	font-weight: 350;
	text-transform: none;
	color: var(--color-main-4);
}

.work-tile {
	padding: var(--rounded-box-padding);
	border-radius: var(--rounded-box-radius);
	color: var(--color-main-1);
	margin: 0px;
	transition: filter 100ms, box-shadow 300ms, transform 100ms;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	position: relative;
}

.work-tile.enshrouded {
	aspect-ratio: 16 / 8;
	background: linear-gradient(to right, rgb(from var(--color-main-dark) r g b / 80%) 0%, rgb(from var(--color-main-dark) r g b / 0%) 50%), url(../images/tile-bg-enshrouded.jpg);
	background-size: 122%;
	background-repeat: no-repeat;
	background-position: top left;
}

.work-tile.portal-knights {
	aspect-ratio: 16 / 5;
	background: linear-gradient(to right, var(--color-main-dark) 0%, rgb(from var(--color-main-dark) r g b / 80%) 40%, rgb(from var(--color-main-dark) r g b / 0%) 70%), url(../images/tile-bg-portal-knights.jpg);

	background-size: 140%;
	background-repeat: no-repeat;
	background-position: center right 36%;
}

.work-tile.text-only {
	color: var(--color-main-dark);
	cursor: revert;
}

.work-tile a {
	color: inherit;
	font-weight: inherit;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}
}

@media (hover: hover) and (pointer: fine) {
	.work-tile.interactive:hover {
		filter: brightness(var(--hover-brightness));
		box-shadow: var(--work-tile-hover-shadow);
		transform: translateY(-2px);
	}
}

.work-tile h2 {
	font-size: 2.5rem;
	font-weight: 600;
	margin-bottom: 10px;
}

.work-tile p {
	font-size: 2rem;
	opacity: 80%;
	max-width: 40%;
	line-height: 120%;

	+ p {
		margin-top: 15px;
	}

	
}

.work-tile-body li {
	text-wrap: balance;
	margin-bottom: 0px;
}

.work-tile-body li + li {
	margin-top: 10px;
}

/* carousel   ---------------------------- */

.carousel {
	position: relative;
}

* + .carousel {
	margin-top: 20px;
}

.carousel .subtabs {
	display: flex;
	column-gap: 50px;
	justify-content: center;
	align-items: center;
	margin-top: 30px;

	font-size: 2.2rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	word-spacing: 0.2rem;
	text-transform: uppercase;
}

.carousel .subtabs li {
	list-style: none;
	margin: 0px;
	text-align: center;
	font-size: 2rem;

	cursor: pointer;
}

.subtab-current {
	position: relative;
	font-weight: 700;
}

.subtab-current::after {
	content: "";
	position: absolute;

	width: 0;
	height: 0;
	left: 50%;
	bottom: -4px;
	transform: translate(-50%, 100%);

	--accordion-arrowSize: 10px;
	border-left: var(--accordion-arrowSize) solid transparent;
	border-right: var(--accordion-arrowSize) solid transparent;
	border-top: var(--accordion-arrowSize) solid var(--color-main-4);
}

.carousel__track-grid {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
}

.carousel-slide {
	position: relative;
	width: 100%;
	grid-column-start: 1;
	grid-row-start: 1;
	transition: left 300ms cubic-bezier(0.8, 0, 0.3, 1), opacity 150ms linear, transform 150ms;

	container-type: inline-size;
	container-name: carousel;
}

.inplace .carousel-slide {
	transition: all 0s;
}

.carousel-slide img {
	display: block;
	width: 100%;
	margin-bottom: 10px;
}

.carousel.bordered img {
	border: solid 1px var(--color-main-5);
}

figcaption {
	text-align: center;
	font-size: 1.75rem;
	font-weight: 350;
	text-wrap: balance;
}

figcaption > :not(h4) {
	font-style: italic;
}

.carousel__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	padding: 10px 0px;
}

.carousel__nav button {
	color: inherit;
}

.carousel__nav-dot {
	border: 0;
	border-radius: 50%;
	width: 12px;
	height: 12px;
	background: currentColor;
	margin: 0px 4px;
	cursor: pointer;
}

.carousel__button {
	position: relative;
	width: var(--nav-arrow-button-width);
	height: var(--nav-arrow-button-width);
	border-radius: calc(var(--nav-arrow-button-width) / 2);
	margin: 0px 30px;
	background: transparent;
	border: 0;
	font-size: 2rem;
	cursor: pointer;

	& > * {
		position: relative;
		background-color: currentColor;
		width: 100%;
		height: 100%;
	}

	.left {
		left: calc(var(--nav-arrow-button-width) * -0.02);
		mask: url("../icons/chevron_left_40dp_1F1F1F_FILL0_wght400_GRAD0_opsz40.svg");
	}

	.right {
		right: calc(var(--nav-arrow-button-width) * -0.02);
		mask: url("../icons/chevron_right_40dp_1F1F1F_FILL0_wght400_GRAD0_opsz40.svg");
	}
}

@media (hover: hover) and (pointer: fine) {
	.carousel__button:hover {
		background-color: rgb(from var(--color-main-dark) r g b / 20%);
	}
}

/* honorable mention and testimonials  ---------------------------- */

.honorable-mentions-bg {
	background-color: hsl(from color-mix(in hsl, var(--color-main-3), var(--color-main-4) 30%) h s l);
	background-image: linear-gradient(to bottom, rgb(from var(--color-main-dark) r g b / 25%) 0%, rgb(from var(--color-main-dark) r g b / 0%) 15px, rgb(from var(--color-main-dark) r g b / 0%) calc(100% - 20px), rgb(from var(--color-main-dark) r g b / 25%) 100%);

	h1 {
		color: var(--color-main-1);
		text-shadow: 3px 3px 12px rgb(from var(--color-main-dark) r g b / 75%);
	}
}

.testimonial-bg {
	background: linear-gradient(to bottom, rgb(from var(--color-main-2) r g b) 0%, hsl(from color-mix(in hsl, var(--color-main-2), var(--color-main-3) 50%) h calc(s * 0.9) l) 100%);
}

.card-content-slide h2 {
	font-size: 2.5rem;
	font-weight: 700;
}

.card-content-track {
	margin-top: 20px;
}

.card-content-track .carousel__track-grid {
	padding: 20px 15px;
}

.card-content-slide {
	padding: var(--rounded-box-padding);
	border-radius: var(--rounded-box-radius);
	background: var(--card-gradient-2);
	box-shadow: var(--card-effect);
}

.card-content {
	padding: 20px;
	gap: 20px;
	line-height: 150%;
}

.card-content h2 {
	margin-bottom: 20px;
}

.card-content-desc {
	flex-basis: 45%;
}

.card-content-desc * + * {
	margin-top: 20px;
}

.quote-column {
	flex-basis: 50%;
	align-self: flex-end;

	transform: rotate(-2deg);
	background-color: var(--color-post-it);
	box-shadow: var(--post-it-shadow);

	padding: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	text-align: center;

	line-height: 150%;
	text-wrap: pretty;
}

.card-content.kaiko {
	display: block;
	column-count: 2;
	column-gap: 40px;
}

.card-content.kaiko > * {
	display: inline-block;
}

.card-content.kaiko p {
	margin-right: 20px;
}

.quote-column.kaiko1 {
	display: inline-flex;
	margin-top: 40px;
	margin-left: 5%;
	width: 90%;
	transform: rotate(1deg);
}

.quote-column.kaiko2 {
	display: inline-flex;
	transform: rotate(-2deg);
	padding-bottom: 50px;
}

.card-content.kaiko small {
	margin-top: 20px;
	width: 100%;
	text-align: right;
	position: absolute;
	font-size: small;
	right: 10px;
	bottom: 0;
	opacity: 50%;
}

p.quote-speaker {
	width: 100%;
	margin-top: 3rem;
}

blockquote {
	font-style: italic;
}

blockquote + blockquote {
	margin-top: 20px;
}

blockquote em {
	font-weight: 400;
	text-decoration: underline;
	text-decoration-color: hsla(303, 100%, 57%, 0.253);
	text-decoration-thickness: 24px;
	text-decoration-skip-ink: none;
	text-underline-offset: -18px;
}

.card-content-slide.harvestmania {
	overflow: hidden;
	width: min-content;
	margin: 30px auto auto auto;
	padding: 0px 0px 40px 0px;
	background: var(--card-gradient-1);
}

.harvest-mania-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.harvest-mania-thumbnail {
	aspect-ratio: 16 / 9;
	height: 320px;
	box-shadow: inset 2px 2px 0px rgb(from var(--color-main-1) r g b / 50%);
}

@media (hover: hover) and (pointer: fine) {
	.harvest-mania-thumbnail:hover {
		filter: brightness(var(--hover-brightness));
	}
}

.harvest-mania-desc {
	padding: 0px 40px;
	line-height: 150%;
}

.harvest-mania-desc p + p {
	margin-top: 20px;
}

.harvest-mania-content button {
	align-self: center;
	padding: 10px 40px;
	border-radius: 10px;
	border: 0;
	background-color: var(--color-main-5);
	color: var(--color-main-2);
}

.harvest-mania-content a {
	text-align: center;
	font-weight: bolder;
}

/* contact and footer  ---------------------------- */

.contact-footer {
	text-align: center;
	background-color: var(--color-main-5);
	background-image: linear-gradient(to bottom, rgb(from var(--color-main-dark) r g b / 50%) 0%, rgb(from var(--color-main-dark) r g b / 0%) 20px, rgb(from var(--color-main-4) r g b / 15%) 100%);
	color: var(--color-main-2);

	p {
		font-size: 2.2rem;
		line-height: 150%;
		margin: auto;
		text-align: center;
		text-wrap: balance;
	}

	:not(:last-child) {
		margin-bottom: 4rem;
	}

	.legal-line {
		display: flex;
		justify-content: center;
		column-gap: 10px;
	}

	hr {
		border: 0;
		border-top: 4px;
		border-style: dotted;
		color: var(--color-main-4);
		opacity: 50%;
	}
}

.award-footer {
	background-color: var(--color-main-5);
	color: var(--color-main-2);
	background-image: linear-gradient(to bottom, rgb(from var(--color-main-dark) r g b / var(--footer-gradient-strength)) 0%, rgb(from var(--color-main-dark) r g b / 0%) var(--footer-gradient-distance));
	padding-bottom: var(--footer-end-spacing);

	dl {
		display: grid;
		grid-template-rows: auto auto;
	}

	dt {
		grid-row: 1;
		text-transform: uppercase;
		color: color-mix(in hsl, var(--color-main-3), var(--color-main-2) 30%);
		font-weight: 400;
		font-size: 2rem;
		text-wrap: pretty;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	dd {
		grid-row: 2;
		grid-template-columns: none;

		li {
			margin-bottom: 0;
		}
	}

	@media (max-width: 750px) {
		dl {
			display: flex;
			flex-direction: column;
			column-gap: 0px;
			row-gap: 0px;
		}

		dd {
			padding-left: 15px;

			&:not(:last-child) {
				margin-bottom: 20px;
			}
		}
	}
}

.tradeshow-footer {
	background-color: var(--color-main-5);
	color: color-mix(in hsl, var(--color-main-2), var(--color-main-1) 70%);
	padding-bottom: var(--footer-end-spacing);

	background-image: linear-gradient(to bottom, rgb(from var(--color-main-dark) r g b / var(--footer-gradient-strength)) 0%, rgb(from var(--color-main-dark) r g b / 0%) var(--footer-gradient-distance));

	img {
		display: block;
	}

	.image-wrapper {
		margin-top: 20px;
		position: relative;
		border: solid 1px var(--color-main-dark);
	}

	.image-wrapper::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		box-shadow: inset 0px 0px 100px rgb(from #000000 r g b / 50%);
	}
}

/* profile ---------------------------- */

.project-summary .container {
	padding-top: 50px;
	column-gap: 50px;

	@media (max-width: 750px) {
		padding-top: 20px;
	}	
}

.project-summary h1 {
	width: 100%;
	margin-bottom: 30px;
}

.project-summary h4 {
	margin-bottom: 5px;
	color: var(--color-main-3);
	break-after: avoid;
}

.project-summary * + h4 {
	margin-top: 30px;
}

.project-summary .profile {
	width: 100%;
	margin-bottom: 50px;
}

.contributions h2 {
	column-span: all;
}

.contributions p {
	margin-bottom: 20px;
}

.alternating-bg-color:nth-of-type(odd) {
	background-color: var(--color-main-1);
	background-image: linear-gradient(to bottom, rgb(from var(--color-main-3) r g b / var(--footer-gradient-strength)) 0%, rgb(from var(--color-main-3) r g b / 0%) var(--footer-gradient-distance), rgb(from var(--color-main-3) r g b / 0%) calc(100% - var(--footer-gradient-distance)), rgb(from var(--color-main-3) r g b / var(--footer-gradient-strength)) 100%);

	&:not(:has(~ .alternating-bg-color)) {
		background-image: linear-gradient(to bottom, rgb(from var(--color-main-3) r g b / var(--footer-gradient-strength)) 0%, rgb(from var(--color-main-3) r g b / 0%) var(--footer-gradient-distance));
	}
}

.disclaimer {
	background-image: linear-gradient(to bottom, rgb(from var(--color-main-3) r g b / 80%) 0%, rgb(from var(--color-main-2) r g b / 80%) 20px, rgb(from var(--color-main-2) r g b / 40%) 75%, rgb(from var(--color-main-2) r g b / 0%) 100%);
	color: var(--color-main-4);

	h3 {
		color: var(--color-main-5);
	}

	.container {
		padding-top: calc(0.33 * var(--container-paddingY-default));
		padding-bottom: calc(0.67 * var(--container-paddingY-default));
	}

	+ * .container {
		padding-top: calc(0.5 * var(--container-paddingY-default));
	}
}

.other-samples {
	background-color: var(--color-main-4);
	color: var(--color-main-1);

	background-image: linear-gradient(to bottom, rgb(from var(--color-main-5) r g b / 50%) 0%, rgb(from var(--color-main-5) r g b / 20%) 10px, rgb(from var(--color-main-5) r g b / 0%) 25px);

	.interjection {
		padding-bottom: calc(0.25 * var(--container-paddingY-default));
	}

	.container + .container {
		padding-top: 0;
	}
}

/* project content ---------------------------- */

.project-details {
	margin-top: 10px;
}

.project-details h2 {
	margin-top: 30px;
}

.project-details > *:not(:last-child) {
	margin-bottom: var(--paragraph-padding);
}

.duo-columns {
	column-count: 2;
	column-gap: 40px;
}

.duo-columns h2 {
	column-span: all;
}

.columns-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 50px;
}

.tri-columns {
	column-count: 3;
	column-gap: 40px;
}

.design-desc-table {
	display: grid;
	grid-template-columns: 22% auto;
	column-gap: 20px;
	row-gap: 50px;
	margin-top: 20px;

	&:not(:last-child) {
		margin-bottom: 20px;
	}

	dt {
		grid-column: 1;
		text-transform: uppercase;
		color: var(--color-main-4);
		font-weight: 700;
		font-size: 2rem;
		text-wrap: pretty;
	}

	dd {
		grid-column: 2;
		grid-template-columns: none;
	}

	@media (max-width: 750px) {
		display: flex;
		flex-direction: column;
		column-gap: 0px;
		row-gap: 0px;

		dt {
			margin-bottom: 10px;
			&:not(:first-of-type) {
				margin-top: 40px;
			}
		}
	}
}

.narrow-video-annotated {
	display: flex;
	column-gap: 40px;
	align-items: flex-start;

	&:not(:last-child) {
		margin-bottom: 50px;
	}

	video {
		margin-top: 0px;
		width: 50%;
	}

	.design-desc-table {
		display: flex;
		flex-direction: column;
		row-gap: 10px;
		margin-top: 0px;

		* + dt {
			margin-top: 20px;
		}
	}

	@media (max-width: 750px) {
		flex-direction: column;

		.design-desc-table {
			margin-top: revert;
			row-gap: revert;
		}

		video {
			width: 100%;
		}
	}
}

@media (max-width: 750px) {
	:root {
		--container-paddingX-default: 20px;
		--container-paddingX-negation: calc(-1 * var(--container-paddingX-default));

		--rounded-box-radius: 10px;
		--rounded-box-padding: calc(var(--rounded-box-radius) * 2);

		--accordion-arrowSize: 10px;
	}

	html {
		font-size: 58%;
	}

	.section-header {
		text-align: left;
	}

	.section-subheader {
		text-align: left;
	}

	.section-header + .section-subheader {
		margin-top: 15px;
	}

	.section-subheader + .highlights-container {
		margin-top: 10px;
	}

	.container {
		padding-top: calc(0.5 * var(--container-paddingY-default));
		padding-bottom: calc(0.5 * var(--container-paddingY-default));

		.video-sizer {
			margin-left: var(--container-paddingX-negation);
			margin-right: var(--container-paddingX-negation);
		}
	}

	.duo-columns,
	.tri-columns {
		column-count: 1;
	}

	.columns-grid {
		grid-template-columns: 1fr;
	}

	.carousel {
		margin-left: var(--container-paddingX-negation);
		margin-right: var(--container-paddingX-negation);
	}

	.carousel .subtabs {
		display: none;
	}

	.carousel__track-grid.accordion {
		display: block;
	}

	.carousel-slide img ~ * {
		margin-left: var(--container-paddingX-default);
		margin-right: var(--container-paddingX-default);
	}

	.honorable-mentions-bg {
		background-color: hsl(from color-mix(in hsl, var(--color-main-4), var(--color-main-5) 30%) h s l);
		background-image: linear-gradient(to bottom, rgb(from var(--color-main-dark) r g b / 25%) 0%, rgb(from var(--color-main-dark) r g b / 0%) 15px, rgb(from var(--color-main-dark) r g b / 0%) calc(100% - 20px), rgb(from var(--color-main-dark) r g b / 25%) 100%);
		color: var(--color-main-2);
		font-weight: 350;

		b {
			font-weight: 800;
		}

		h1 {
			color: var(--color-main-2);
			margin-bottom: 20px;
		}
	}

	.testimonial-bg {
		background: var(--color-main-2);
	}

	.card-content-track .carousel__track-grid {
		overflow: clip;
		padding: 0px;
	}

	.card-content-slide {
		padding: 0px;
		border-radius: 0;
		background: revert;
		box-shadow: revert;
	}

	.card-content-track .carousel__track-grid .carousel-slide:last-child summary {
		border-bottom: 1px solid var(--color-main-4);
	}

	.card-content-slide summary {
		display: flex !important;
		justify-content: space-between;
		column-gap: 10px;
		background-color: var(--color-main-2);
		position: sticky;
		top: 0;
		z-index: 2;
		padding: 10px var(--container-paddingX-default);
		border-top: 1px solid var(--color-main-4);
	}

	.card-content-slide summary::after {
		content: "";
		font-size: 2rem;
		rotate: 45deg;
		translate: 0 2px;
		width: var(--accordion-arrowSize);
		height: var(--accordion-arrowSize);
		border: solid var(--color-main-5);

		--accordion-arrowThickness: 1.8px;
		border-width: 0 var(--accordion-arrowThickness) var(--accordion-arrowThickness) 0;
	}

	.card-content-slide[open] summary::after {
		content: "";
		font-size: 2rem;
		rotate: -135deg;
		translate: 0 8px;
		width: var(--accordion-arrowSize);
		height: var(--accordion-arrowSize);
		border: solid var(--color-main-5);

		--accordion-arrowThickness: 3px;
		border-width: 0 var(--accordion-arrowThickness) var(--accordion-arrowThickness) 0;
	}

	.card-content-slide summary h2 {
		font-weight: 350;
		margin: 0;
	}

	.card-content-slide[open] summary h2 {
		font-weight: 750;
		margin: 0;
	}

	.card-content-slide.harvestmania {
		overflow: revert;
		width: revert;
		margin: revert;
		padding: revert;
		background: transparent;
	}

	.harvest-mania-thumbnail {
		height: revert;
		border: 1px solid var(--color-main-3);
		border-radius: var(--rounded-box-radius);
		overflow: clip;
	}

	.harvest-mania-desc {
		padding-left: 0;
		padding-right: 0;
	}

	.card-content {
		padding: 0px var(--container-paddingX-default);
		margin-top: 10px;
		padding-bottom: 50px;
	}

	.card-content.kaiko p {
		margin-left: revert;
		margin-right: revert;
	}

	.quote-column {
		margin: 0px -10px 20px -10px;
		transform: rotate(-1.5deg);
		background-color: var(--color-post-it);
		box-shadow: var(--post-it-shadow);
		padding: 20px;
	}
}

@container carousel (width < 860px) {
	.columns-grid {
		grid-template-columns: 1fr;
	}

	.card-content.kaiko {
		column-count: 1;
	}
}