:root {
	--Chroniton-Ink			: #F7F2FF;
	--Chroniton-Muted		: #D8CBEF;
	--Chroniton-Dim			: #B9A8D8;
	--Chroniton-Deep		: #171128;
	--Chroniton-Panel		: #241B3C;
	--Chroniton-Panel-2		: #2E214F;
	--Chroniton-Magenta		: #D767B8;
	--Chroniton-Teal		: #65D4C8;
	--Chroniton-Gold		: #FFD789;
	--Chroniton-Line		: RGBA(255, 255, 255, 16%);
	--Chroniton-Shadow		: RGBA(10, 5, 22, 45%);
	--Chroniton-Width		: 66rem;
}

HTML,
BODY {
	min-height				: 100%;
	margin					: 0;
	padding					: 0;
	border					: 0;
	font-family				: Inter, Segoe UI, Helvetica, Arial, Sans-serif;
	font-size				: 105%;
	line-height				: 1.65;
}

BODY {
	display					: Flex;
	flex-direction			: Column;
	align-items				: Stretch;
	min-height				: 100%;
	padding					: 1.25rem 1.25rem 3rem 1.25rem;
	color					: var(--Chroniton-Ink);
	background				:
							  Linear-Gradient(135deg, RGBA(101, 212, 200, 12%) 0 12%, Transparent 12% 24%, RGBA(255, 215, 137, 10%) 24% 36%, Transparent 36% 48%),
							  Linear-Gradient(180deg, RGBA(23, 17, 40, 82%), RGBA(58, 35, 90, 92%)),
							  url("../images/intro.svg");
	background-size			: 24px 24px, Auto, Cover;
	background-position		: Center Top;
	background-attachment	: Fixed;
	overflow-y				: Scroll;
}

H1,
H2,
H3,
H4,
H5,
H6 {
	color					: White;
	font-weight				: Bold;
	line-height				: 1.22;
}

DIV.logo {
	order					: 1;
	position				: Relative;
	height					: 5.4rem;
	margin					: -1.25rem -1.25rem 0 -1.25rem;
	color					: var(--Chroniton-Deep);
	background				: RGBA(247, 242, 255, 94%);
	border-bottom			: 3px Solid var(--Chroniton-Deep);
	box-shadow				: 0 0.55rem 1.4rem var(--Chroniton-Shadow);
	z-index					: 4;
}

DIV.logo IMG {
	position				: Absolute;
	left					: 0.5rem;
	top						: 0.5rem;
	width					: Auto;
	height					: 4.25rem;
	margin					: 0;
	padding					: 0;
	border					: 0;
}

DIV.logo H1,
DIV.logo H2 {
	margin					: 0;
	padding					: 0 5rem 0 6rem;
	color					: var(--Chroniton-Deep);
	text-align				: Center;
	text-transform			: None;
	letter-spacing			: 0;
}

DIV.logo H1 {
	padding-top				: 0.75rem;
	font-size				: 1.7rem;
}

DIV.logo H2 {
	padding-top				: 0;
	color					: #473760;
	font-size				: 0.95rem;
}

DIV.language {
	order					: 1;
	position				: Absolute;
	top						: 0;
	right					: 0;
	margin					: 0;
	padding					: 3px;
	background				: var(--Chroniton-Deep);
	border-left				: 2px Solid var(--Chroniton-Line);
	border-bottom			: 2px Solid var(--Chroniton-Line);
	border-radius			: 0 0 0 1rem;
	z-index					: 1000;
}

DIV.language A,
DIV.language IMG {
	display					: Block;
	float					: Right;
	margin					: 0;
	padding					: 0;
	color					: White;
	text-decoration			: None;
}

DIV.language IMG {
	box-sizing				: Border-Box;
	width					: 35px;
	height					: 35px;
	padding					: 3px;
	border					: 1px Solid Transparent;
	border-radius			: 50%;
}

DIV.language IMG.current,
DIV.language:hover IMG:hover {
	border-color			: White;
}

DIV.language:hover IMG.current {
	border-color			: Transparent;
}

DIV.language SPAN.seperator {
	display					: None;
}

DIV.navigation {
	order					: 2;
	position				: Sticky;
	top						: 0;
	margin					: 0 -1.25rem 1.25rem -1.25rem;
	background				: #271A45;
	text-align				: Center;
	font-style				: Normal;
	box-shadow				: 0 0.35rem 1rem var(--Chroniton-Shadow);
	z-index					: 5;
}

DIV.navigation UL {
	margin					: 0;
	padding					: 0;
	list-style-type			: None;
}

DIV.navigation LI {
	position				: Relative;
	display					: Inline-Block;
	margin					: 0.25rem 0;
	padding					: 0;
	list-style-type			: None;
}

DIV.navigation LI A,
DIV.navigation LI span {
	display					: Inline-Block;
	min-width				: 7.25rem;
	padding					: 0.55rem 0.85rem;
	color					: White;
	border					: 0;
	font-weight				: Bold;
	text-decoration			: None;
}

DIV.navigation LI A:hover,
DIV.navigation LI span:hover,
DIV.navigation LI.currentpage A,
DIV.navigation > UL > LI.filled:hover > A {
	color					: var(--Chroniton-Deep);
	background				: var(--Chroniton-Gold);
}

DIV.navigation UL UL {
	position				: Absolute;
	left					: 0;
	top						: 100%;
	width					: 12rem;
	max-height				: 0;
	margin					: 0;
	padding					: 0.25rem 0 0 0;
	overflow				: Hidden;
	background				: #271A45;
	box-shadow				: 0 0.45rem 1rem RGBA(10, 5, 22, 0%);
	transition				: max-height 0.25s, box-shadow 0.25s;
	z-index					: 1;
}

DIV.navigation LI:hover > UL {
	max-height				: 16rem;
	box-shadow				: 0 0.45rem 1rem var(--Chroniton-Shadow);
}

DIV.navigation LI LI {
	display					: Block;
	margin					: 0.25rem;
}

DIV.navigation LI LI A,
DIV.navigation LI.currentpage LI A {
	display					: Block;
	min-width				: 0;
	width					: Auto;
	color					: White;
	background				: Transparent;
	font-weight				: Normal;
	text-align				: Left;
}

DIV.navigation LI LI A:hover {
	color					: var(--Chroniton-Deep);
	background				: var(--Chroniton-Teal);
}

DIV.navigation SPAN.separator {
	display					: None;
}

DIV.referers {
	order					: 3;
}

DIV.breadcrumbs {
	order					: 4;
	box-sizing				: Border-Box;
	width					: 100%;
	max-width				: var(--Chroniton-Width);
	margin					: 0 Auto 0.75rem Auto;
	color					: var(--Chroniton-Dim);
	font-size				: 0.85rem;
}

DIV.breadcrumbs A {
	color					: Inherit;
	border					: 0;
	text-decoration			: None;
}

DIV.breadcrumbs SPAN.separator {
	font-size				: 75%;
}

DIV.body {
	order					: 5;
	box-sizing				: Border-Box;
	width					: 100%;
	max-width				: var(--Chroniton-Width);
	margin					: 0 Auto;
	padding					: 1.2rem;
	color					: var(--Chroniton-Ink);
	background				: RGBA(23, 17, 40, 76%);
	border					: 1px Solid var(--Chroniton-Line);
	border-radius			: 1.15rem;
	box-shadow				: 0 1.2rem 2.4rem var(--Chroniton-Shadow);
	backdrop-filter			: Blur(6px);
}

DIV.body A {
	color					: var(--Chroniton-Gold);
	border-bottom			: 1px Solid RGBA(255, 215, 137, 45%);
	font-family				: Inherit;
	font-size				: 1em;
	font-weight				: Bold;
	text-decoration			: None;
}

DIV.body A:hover {
	color					: var(--Chroniton-Teal);
	border-bottom-color		: var(--Chroniton-Teal);
}

DIV.body IMG {
	max-width				: 100%;
	height					: Auto;
	border-radius			: 0.9rem;
}

DIV.body PRE {
	max-width				: 100%;
	white-space				: Pre-Wrap;
	word-break				: Break-Word;
}

DIV.body H2,
DIV.body H3,
DIV.body H4,
DIV.body H5 {
	margin-bottom			: 0.25em;
}

DIV.body H2 + P,
DIV.body H3 + P,
DIV.body H4 + P,
DIV.body H5 + P {
	margin-top				: 0.25em;
}

DIV.chroniton_hero,
DIV.chroniton_card,
DIV.chroniton_note,
DIV.chroniton_quote,
DIV.chroniton_sources,
DIV.myth_item,
DIV.blocks DIV.block {
	box-sizing				: Border-Box;
	border					: 1px Solid var(--Chroniton-Line);
	box-shadow				: 0.35rem 0.35rem 0 RGBA(0, 0, 0, 28%);
}

DIV.chroniton_hero {
	margin					: 0 0 1.25rem 0;
	padding					: Clamp(1.25rem, 4vw, 2.6rem);
	background				:
							  Linear-Gradient(90deg, RGBA(255, 255, 255, 8%) 1px, Transparent 1px),
							  Linear-Gradient(0deg, RGBA(255, 255, 255, 6%) 1px, Transparent 1px),
							  Linear-Gradient(135deg, #302158 0%, #5D3A85 46%, #2D756E 100%);
	background-size			: 18px 18px, 18px 18px, Auto;
	border-color			: RGBA(255, 215, 137, 55%);
	border-radius			: 1rem;
}

DIV.chroniton_hero.compact {
	padding					: Clamp(1.1rem, 3vw, 2rem);
}

DIV.chroniton_hero P.eyebrow {
	display					: Inline-Block;
	margin					: 0 0 0.8rem 0;
	padding					: 0.25rem 0.55rem;
	color					: var(--Chroniton-Deep);
	background				: var(--Chroniton-Gold);
	border-radius			: 999px;
	font-size				: 0.76rem;
	font-weight				: Bold;
	letter-spacing			: 0.08em;
	text-transform			: Uppercase;
}

DIV.chroniton_hero H2 {
	margin					: 0 0 0.6rem 0;
	font-size				: Clamp(2rem, 5vw, 3.7rem);
}

DIV.chroniton_hero P.lead {
	max-width				: 49rem;
	margin					: 0 0 0.8rem 0;
	color					: White;
	font-size				: 1.2rem;
	line-height				: 1.5;
}

DIV.chroniton_hero P.actions {
	display					: Flex;
	flex-wrap				: Wrap;
	gap						: 0.7rem;
	margin-top				: 1.15rem;
}

DIV.chroniton_hero P.actions A {
	display					: Inline-Block;
	padding					: 0.48rem 0.78rem;
	color					: var(--Chroniton-Deep);
	background				: var(--Chroniton-Gold);
	border					: 2px Solid var(--Chroniton-Deep);
	border-radius			: 0.65rem;
	box-shadow				: 0.18rem 0.18rem 0 var(--Chroniton-Deep);
}

DIV.chroniton_hero P.actions A:hover {
	color					: var(--Chroniton-Deep);
	background				: var(--Chroniton-Teal);
	transform				: Translate(-1px, -1px);
}

DIV.chroniton_grid,
DIV.myth_list,
DIV.blocks {
	display					: Grid;
	gap						: 1rem;
	margin					: 1.25rem 0;
}

DIV.chroniton_grid,
DIV.blocks {
	grid-template-columns	: Repeat(2, MinMax(0, 1fr));
}

DIV.chroniton_card,
DIV.myth_item,
DIV.chroniton_sources,
DIV.blocks DIV.block {
	padding					: 1.05rem;
	background				:
							  Linear-Gradient(90deg, RGBA(255, 255, 255, 6%) 1px, Transparent 1px),
							  Linear-Gradient(0deg, RGBA(101, 212, 200, 7%) 1px, Transparent 1px),
							  Linear-Gradient(135deg, var(--Chroniton-Panel), var(--Chroniton-Panel-2));
	background-size			: 18px 18px, 18px 18px, Auto;
	border-radius			: 0.9rem;
}

DIV.chroniton_card H3,
DIV.myth_item H3,
DIV.chroniton_sources H3,
DIV.blocks H3 {
	margin-top				: 0;
	color					: var(--Chroniton-Gold);
}

DIV.chroniton_note,
DIV.chroniton_quote {
	margin					: 1.25rem 0;
	padding					: 1.05rem 1.15rem;
	background				:
							  Linear-Gradient(90deg, RGBA(255, 215, 137, 14%) 1px, Transparent 1px),
							  Linear-Gradient(0deg, RGBA(255, 255, 255, 6%) 1px, Transparent 1px),
							  Linear-Gradient(135deg, #33224E, #3D2D2A);
	background-size			: 18px 18px, 18px 18px, Auto;
	border-color			: RGBA(255, 215, 137, 50%);
	border-radius			: 0.9rem;
}

DIV.chroniton_quote P {
	margin					: 0;
	color					: White;
	font-size				: 1.16rem;
	font-style				: Italic;
}

DIV.blocks A {
	display					: Block;
	color					: Inherit;
	border					: 0;
	font-family				: Inherit;
	font-size				: 1em;
	font-weight				: Inherit;
}

DIV.blocks DIV.block {
	min-height				: 10rem;
	color					: var(--Chroniton-Ink);
}

DIV.blocks DIV.block * {
	margin-top				: 0;
	color					: Inherit;
	text-decoration			: None;
}

DIV.blocks DIV.block IMG {
	float					: Left;
	width					: 3.2rem;
	height					: 3.2rem;
	margin					: 0 0.65rem 0.35rem 0;
	object-fit				: Contain;
	border-radius			: 0.6rem;
	box-shadow				: None;
}

DIV.blocks A:hover DIV.block {
	border-color			: var(--Chroniton-Gold);
	transform				: Translate(-2px, -2px);
}

DIV.footer {
	order					: 6;
	box-sizing				: Border-Box;
	width					: 100%;
	max-width				: var(--Chroniton-Width);
	margin					: 1.25rem Auto 0 Auto;
	padding					: 0.65rem;
	color					: var(--Chroniton-Dim);
	background				: RGBA(23, 17, 40, 72%);
	border					: 1px Solid var(--Chroniton-Line);
	border-radius			: 0.9rem;
}

DIV.footer P {
	margin					: 0.25rem 0;
}

@media only screen and (max-width: 760px) {
	BODY {
		padding				: 0.7rem 0.7rem 1.5rem 0.7rem;
		background-attachment: Scroll;
	}

	DIV.logo {
		height				: 4.6rem;
		margin				: -0.7rem -0.7rem 0 -0.7rem;
	}

	DIV.logo IMG {
		height				: 3.5rem;
	}

	DIV.logo H1,
	DIV.logo H2 {
		padding-left		: 5rem;
		padding-right		: 3.5rem;
		text-align			: Left;
	}

	DIV.logo H1 {
		padding-top			: 0.75rem;
		font-size			: 1.15rem;
	}

	DIV.logo H2 {
		font-size			: 0.76rem;
	}

	DIV.navigation {
		width				: Calc(100% + 1.4rem);
		margin				: 0 -0.7rem 1rem -0.7rem;
		overflow			: Visible;
		white-space			: Normal;
	}

	DIV.navigation UL {
		display				: Flex;
		flex-wrap			: Wrap;
		justify-content		: Center;
		padding				: 0.25rem 0.35rem;
	}

	DIV.navigation LI {
		margin				: 0.15rem;
	}

	DIV.navigation LI A,
	DIV.navigation LI span {
		min-width			: 0;
		width				: Auto;
		padding				: 0.4rem 0.55rem;
	}

	DIV.navigation UL UL {
		display				: None;
	}

	DIV.body {
		padding				: 0.8rem;
		border-radius		: 0.8rem;
	}

	DIV.chroniton_grid,
	DIV.blocks {
		grid-template-columns: 1fr;
	}

	DIV.chroniton_hero H2 {
		font-size			: 2rem;
	}

	DIV.chroniton_hero P.lead {
		font-size			: 1.05rem;
	}
}