:root
{
	color-scheme: dark;
	--gap: 0px;
	--extra: 0px;
}

@media (horizontal-viewport-segments: 2)
{
	:root
	{
		--gap: calc(env(viewport-segment-left 1 0, 0px) - env(viewport-segment-right 0 0, 0px));
	}
}

@media (vertical-viewport-segments: 2)
{
	:root
	{
		--extra: 15rem;
	}
}

html
{
	font-size: clamp(14px, 0.5rem + 1vw, 24px);
	overflow-x: hidden;
	overflow-y: scroll;
}

body
{
	margin: 0;
	padding: 2rem 8% 2% 8%;
	padding-bottom: calc(2% + var(--extra));
}

h1
{
	font-size: 2rem;
	user-select: none;
}

div
{
/*	border: solid green 1px;*/
}

#card
{
	display: grid;

	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	max-width: 40rem;

	column-gap: 4rem;
	column-gap: calc(4rem + var(--gap));
	row-gap: 0.5rem;
	margin: 0 auto;
	align-items: stretch;
}

#left { min-width: 0; }
#right { margin-top: 1.5rem; }
#preview { display: block; max-height: none; width: 100%; object-fit: contain; }

#properties
{
	display: flex;
	align-content: flex-start;

	flex-flow: row wrap;
	column-gap: 1.5rem;
	row-gap: 1.07rem;
	margin-top: 1.26rem;
	align-content: flex-end;
	overflow: hidden;
}

table, th, td { border-collapse: collapse; padding: 0px; }

#next, #previous
{
	width: 4rem; height: 4rem; line-height: 4rem;
	text-align: center;
	background: rgba(40,40,40,0.5);
	border-radius: 0.5rem;
	user-select: none;
	overflow: hidden;
}

#preceding, #following { display: block; width: 100%; height: 100%; }
#following.inactive, #preceding.inactive { pointer-events: none; cursor: default; }
#following img { transform: translate(0.1rem, 0); opacity: 0.85; transition: opacity 0.15s; }
#preceding img { transform: translate(-0.04rem, 0); opacity: 0.85; transition: opacity 0.15s; }
#following img:hover, #preceding img:hover { opacity: 0.95; }

#following.inactive img, #preceding.inactive img { opacity: 0.3; } /* must be furthest down apparently */

#navigation
{
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;	

	width: 100%;
	max-width: 50rem;
	margin-inline: auto;
}

#path
{
	overflow: hidden;
	min-width: 0;
}

#subpath
{
	font-weight: 400;
}

#path h1
{
	display: flex;
	align-items: center;

	height: 4rem;
	margin: 0px;
	padding: 0px;
	text-align: left;
}

#slash
{
	padding-inline: 0.6rem;
	font-weight: 400;
}

h2
{
	display: flex;
	align-items: center;
	height: 3rem;
	margin: 0px;
	padding: 0px;
}

#description p:first-of-type { margin-top: 0.38rem; }

td img { height: 1.15rem; margin-top: 2.5px; }
th:first-child, td:first-child { padding-left: 0px; padding-right: 0.25rem; }
th, td { vertical-align: top; }
td.person-icon { padding-right: 1; }
i { margin-left: -0.05rem; margin-right: 0.1rem; }

#blocks { height: 4rem; }

#first, #second
{
	display: grid;
	grid-auto-flow: column;
	justify-content: center;
	grid-auto-columns: clamp(0px, 3.5%, 1.2rem);
	column-gap: clamp(0px, 1.4%, 0.6rem);
}

#first { align-items: end; }

#carousel
{
	height: 100%;
	display: grid;
	grid-template-rows: 1fr 1fr;
	row-gap: 15%;
}

.block
{
	width: 100%;
	max-width: 1.2rem;
	height: 0.4rem;
	min-width: 0;
	border-radius: 0.12rem;
	background: rgba(255,255,255,.4);
	user-select: none;	
	transition: background 0.15s;
}

.current { background: rgba(255,255,255,.85); }
.block:hover { background: rgba(255,255,255,.55); }
.current:hover { background: rgba(255,255,255,.95); }



@media (min-width: 130rem)
{
	#card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 70rem; }
	#preview { max-height: 40rem;  }
	#right { margin-top: 3rem; }
}

@media (horizontal-viewport-segments: 2)
{
	#card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 70rem; }
	#preview { max-height: 40rem;  }
	#right { margin-top: 3rem; }
}