html, body
{
	margin: 0;
	height: 100%;
}

body
{
	display: grid;
	place-items: center;
	text-align: center;
	
	/* Static poster background */
	background:
		#000
		url('../../Assets/Images/WebP/CoverVideoPoster.webp')
		center center / cover no-repeat fixed;
}

main
{
	color: #ffffff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
	padding: 0 1rem;
}

main p
{
	font-family: "Lato", system-ui, sans-serif;
	font-size: clamp(1rem, 2vw, 2rem);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 0.5em 0;
}

main h1
{
	font-family: "EB Garamond", Georgia, serif;
	font-size: clamp(2.5rem, 6vw, 6rem);
	font-weight: 700;
	margin: 0;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.9);
}

/* Bottom nav */
nav
{
	position: fixed;
	left: 50%;
	bottom: 2rem;
	transform: translateX(-50%);
	
	display: table;
	table-layout: fixed;
	
	z-index: 2;
	padding: 0 .75rem;
}

nav a
{
	display: table-cell;
	text-decoration: none;
	padding: .5rem 1.25rem;
	margin: 0 .5rem;
	
	border: 3px solid black;   /* default */
	border-radius: 25px;
}

nav a:hover
{
	border: 3px outset white;        /* raised on hover */
}

nav a:active
{
	border: 3px inset grey;         /* pressed on click */
}

nav a > span
{
	font-family: "Lato", Helvetica, Arial, sans-serif;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: #e0e0e0;
	text-shadow: 1px 1px 2px rgba(0,0,0,.85);
}

nav a:hover > span
{
	color: #ffffff;
	text-shadow:
		0 0 5px rgba(255,255,255,.9),   /* gold glow */
		2px 2px 6px rgba(128,128,128,1), /* gray shadow */
		0 0 14px rgba(255,255,255,.9);   /* outer white glow */
}