/*
 *	style.css | Finn Le Var
 */

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

html, body
{
	height:		100%;
	overflow:	hidden;
}

body
{
	background-color:	black;
	color:				#a0a0a0;
	font-family:		ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	text-align:			center;
	letter-spacing:		8px;
}

/*
 *	background
 */

/* sits behind everything and never scrolls */
#bg
{
	position:	fixed;
	inset:		0;
	z-index:	-1;
}

.layer
{
	position:			absolute;
	inset:				0;
	image-rendering:	pixelated;
}

/* each layer drifts twice as fast as the one behind it, so we get parallax */
.bg01 { background-image: url(img/bg01.png); animation: drift_y 120s infinite linear, sway_x 60s infinite ease-in-out; }
.bg02 { background-image: url(img/bg02.png); animation: drift_y 60s infinite linear, sway_x 30s infinite ease-in-out; }
.bg03 { background-image: url(img/bg03.png); animation: drift_y 30s infinite linear, sway_x 15s infinite ease-in-out; }

/* darkens the edges so the text in the middle stays readable */
.vignette
{
	background: radial-gradient(circle, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 1) 100%);
}

/* scrolls exactly two tiles so the loop has no seam */
@keyframes drift_y
{
	0%		{ background-position-y: 1024px;	}
	100%	{ background-position-y: -1024px;	}
}

@keyframes sway_x
{
	0%		{ background-position-x: 0px;	}
	50%		{ background-position-x: 50px;	}
	100%	{ background-position-x: 0px;	}
}

/* just in case someone has motion turned off */
@media (prefers-reduced-motion: reduce)
{
	.layer { animation: none; }
}

/*
 *	content
 */

#centered
{
	min-height:			100%;
	padding:			0 16px;
	display:			flex;
	flex-direction:		column;
	justify-content:	center;
	align-items:		center;
	gap:				18px;
}

h1
{
	font-size:		22px;
	font-weight:	normal;
	color:			#d2738a;

	/* letter spacing adds a trailing gap, this pulls the text back to true centre */
	margin-right:	-8px;
}

hr
{
	width:			200px;
	border:			none;
	border-top:		1px solid #a0a0a0;
	opacity:		0.5;
}

.note
{
	font-size:		10px;
	letter-spacing:	4px;
}

a
{
	font-size:			13px;
	color:				#d2738a;
	text-decoration:	none;
	transition:			color 0.5s ease-out;
}

a:hover, a:focus-visible
{
	color: #a0a0a0;
}