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

:root {
	--accent: rgb(250, 191, 54);
	--accent: color(display-p3 0.98 0.75 0.21);
	--accent-2: rgb(230, 171, 34);
	--accent-2: color(display-p3 0.90 0.67 0.125);

	--nav-bg: rgba(0, 0, 0, 1.0);
	--main-bg: rgba(16, 16, 16, 0.9);
	--footer-bg: rgba(4, 4, 4, 0.95);
	--gallery-bg: rgba(8, 8, 8, 0.95);

	--cursor-neutral: url("../images/cursors/neutral.png") 0 0, default;
	--cursor-hand-point: url("../images/cursors/hand-point.png") 8 0, pointer;
	--cursor-text-input: url("../images/cursors/text-input.png") 4 14, text;
	cursor: var(--cursor-neutral);

	--background: url("../images/backgrounds/cave.jpg");
	--background-pixelated: url("../images/backgrounds/cave-pixelated.png");

	--focus-color: var(--accent);
}

:focus {
	outline: 2px solid var(--focus-color);
}

@supports (background-color: color(display-p3 0.98, 0.75, 0.21)) {
	:root {
		--accent: color(display-p3 0.98, 0.75, 0.21);
	}
}

.compatibility-warning {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 8em;
	padding-top: 5em;
	background-color: #a00;
	font: 1em/1 sans-serif;
	font-weight: bold;
	--focus-color: white;
}

body {
	--disable-compatibility-warning: none;
	& .compatibility-warning {
		@supports (background-image: linear-gradient(to top, var(--main-bg), var(--main-bg)), var(--background-pixelated)) {
			@media all and (min-width: 1px) {
				display: var(--disable-compatibility-warning);
			}
		}
		@supports not (background-image: linear-gradient(to top, var(--main-bg), var(--main-bg)), var(--background-pixelated)) {
			display: flex !important;
		}
	}
}

::selection {
	background-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

body {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent), var(--background);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;

	background-color: black;
	color: white;

	--readable-padding: max(2rem, calc(50vw - 35rem));
	--current-width: min(calc(100vw - 4rem), 70rem);

	@media screen and (max-width: 80rem) {
		--readable-padding: 1rem;
		--current-width: calc(100vw - 2rem);
	}

	& > * {
		image-rendering: pixelated;
	}
}

@media screen and (max-width: 60rem) {
	body {
		font-size: 0.75rem;
	}
}

header {
	/* max-width: max-content; */
	margin-inline: auto;
	--vertical-align: max(2em, calc(30svh - 15em));
	margin-top: calc(5em + var(--vertical-align));
	margin-bottom: var(--vertical-align);
	padding: 2em;
	padding-inline: var(--readable-padding);

	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;

	text-wrap: balance;
}

body > header > *,
body > nav > * {
	text-shadow:
		0 0.125em rgba(0, 0, 0, 0.25),
		0.125em 0 rgba(0, 0, 0, 0.125),
		-0.125em 0 rgba(0, 0, 0, 0.125),
		0.125em 0.125em rgba(0, 0, 0, 0.125),
		-0.125em 0.125em rgba(0, 0, 0, 0.125);
}

nav {
	position: fixed;
	z-index: 9999;
	width: 100%;
	top: 0;
	display: flex;
	align-items: center;
	gap: 1em;
	padding-block: 1em;
	padding-inline: var(--readable-padding);

	overflow-x: scroll;
	scrollbar-width: none;

	background: linear-gradient(to bottom, var(--nav-bg), transparent);

	& > :has(.logo-image) {
		margin-right: auto;

		& + * {
			margin-left: 1em;
		}
	}

	& > .site-link {
		color: white;
		text-decoration: none;
		padding-inline: 0.5em;
		padding-right: 0.25em;

		&:hover {
			color: var(--accent);
		}

		&.selected {
			box-shadow: 0 0.25em 0 var(--accent);
		}
	}
}

main {
	display: block;

	background-image: linear-gradient(to top, var(--main-bg), var(--main-bg)), var(--background-pixelated);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;

	box-shadow: 0 -0.5em 0 rgba(0, 0, 0, 0.25);

	padding-block: 4em;

}

main > *,
footer {
	display: block;
	padding-inline: var(--readable-padding);
	margin-inline: auto;
}

main > * + *,
footer > section > * + *,
header > * + *,
p > * {
	margin-top: 1em;
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.5rem;
}

a {
	color: var(--accent);
	cursor: var(--cursor-hand-point);

	&:hover {
		color: #AAAAAA;
	}
}

main > img {
	width: 100%;

	&.photo {
		image-rendering: auto;
	}
}

a.button,
button {
	--button-1: var(--accent);
	--button-2: var(--accent-2);

	display: block;
	max-width: max-content;
	background-color: transparent;
	background-image: linear-gradient(to bottom, var(--button-1) 49.9%, var(--button-2) 51.1%);
	background-repeat: no-repeat;
	--focus-color: white;
	color: black;
	padding: 0.5em 2em;
	font: inherit;
	font-variation-settings: 'LITE' 0.8;
	cursor: var(--cursor-hand-point);

	border: 0.125em solid rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 -0.25em rgba(0, 0, 0, 0.2);
	text-shadow: 0 0.125em var(--button-1), 0 -0.125em var(--button-2);

	text-decoration: none;

	&:hover:not(:disabled) {
		--button-1: #fff;
		--button-2: #eee;
	}

	&:active:not(:disabled) {
		--button-1: var(--accent-2);
		--button-2: var(--accent);
		box-shadow: inset 0 0.25em rgba(0, 0, 0, 0.2);
	}

	&[disabled] {
		box-shadow: none;
		--button-1: transparent;
		--button-2: transparent;
		color: white;
		border-color: white;
		border-style: dashed;
		opacity: 0.6;
	}

	&.jumbo {
		padding: 1em 4em;
		box-shadow: inset 0 -0.25em rgba(0, 0, 0, 0.2);

		&:active:not(:disabled) {
			box-shadow: inset 0 0.25em rgba(0, 0, 0, 0.2);
		}
	}
}

input[type="text"],
input[type="email"] {
	display: block;
	width: 100%;
	padding: 0.5em 1em;

	background-color: black;
	--focus-color: transparent;
	color: white;
	border: 0.125em solid rgb(255, 255, 255, 0.5);
	font: inherit;

	position: relative;
	cursor: var(--cursor-text-input);

	&::placeholder {
		color: rgb(255, 255, 255, 0.8);
	}

	&:focus {
		border-color: var(--accent);
		&::placeholder {
			color: rgb(255, 255, 255, 0.4);
		}
	}
}

footer {
	background-image: linear-gradient(to top, var(--footer-bg), var(--footer-bg)), var(--background-pixelated);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	
	box-shadow: inset 0 0.5em 0 rgba(0, 0, 0, 0.25);

	display: grid;
	align-items: end;
	row-gap: 4em;

	padding-block: 2em;

	@media screen and (min-width: 80rem) {
		grid-template-columns: 60% 40%;
	}

	& > section {
		width: 100%;
		opacity: 0.8;

		&:has(.logo-image) {
			display: flex;
			flex-direction: column;
			align-items: end;
			justify-content: end;
			text-align: right;
			gap: 0.5em;
			& > p {
				line-height: 1;
				margin: 0;
			}
			& > .logo-image {
				filter: var(--white-filter);
			}
		}
	}
}

.logo-image {
	display: block;
	height: 3.75em;
	image-rendering: auto;
	--white-filter: grayscale(100%) brightness(130%);
	--no-white-filter: grayscale(0%) brightness(100%);
}

.gallery {
	display: flex;
	width: 100%;
	padding: 0;
	margin-block: 4em;
	overflow-x: scroll;
	overflow-y: hidden;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;

	image-rendering: auto;

	padding-block: 1em;
	@media screen and (max-width: 80rem) {
		padding-block: 0;
	}

	background-image: linear-gradient(to top, var(--gallery-bg), var(--gallery-bg)), var(--background-pixelated);
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	
	box-shadow:
		inset 0 0.5em 0 rgba(0, 0, 0, 0.25),
		inset 0 -0.5em 0 rgba(0, 0, 0, 0.25);

	&:not(:has(:nth-child(2))) {
		align-items: center;
		justify-content: center;

		@media screen and (max-width: 80rem) {
			& > * > img {
				width: 100vw;
			}
		}
	}

	& > * {
		margin-left: 1em;
		flex-shrink: 0;

		&:first-child {
			margin-left: var(--readable-padding);
		}
		&:last-child {
			margin-right: var(--readable-padding);
		}
		@media screen and (max-width: 80rem) {
			&:first-child,
			&:last-child {
				margin: 0;
			}
		}

		& > img {
			display: block;
			scroll-snap-align: center;
			--max-floating-width: min(90vw, 120svh);
			width: min(var(--current-width), var(--max-floating-width));
		}

		position: relative;

		&::before,
		&::after {
			content: "In-game capture. Graphics in development.";
			position: absolute;
			left: 1em;
			right: 1em;
			bottom: 1em;
			font-size: 0.5em;
			text-align: right;
		}

		&::after {
			mix-blend-mode: overlay;
			opacity: 0.5;
		}

		&::before {
			mix-blend-mode: screen;
			color: #222;
		}
	}
}