:root {
	--header: #FFFFFF;
	--bg: #000000;
	--fg: #999999;
	--hc: #CCCCCC;
	--lnk: #222222;
}
* {
	background-color: var(--bg);
	@font-face { 
		font-family: "JetBrains Mono", monospace; 
		src: url("media/font/JetBrainsMono-Regular.woff");
		format('woff');
	} 
}
body {
	color: var(--header);
}
h1 {
	font-size: 10vh;
	font-style: italic;
	text-align: center;
	color: gold;
	padding-top: 30vh;
}
h2 {
	font-size: 2em;
	text-align: center;
	background: linear-gradient(180deg, var(--hc), black 140%) ;
	background-clip: text;
	color: transparent;
}
main {
	color: var(--fg);
}
.container {
	scroll-snap-type: both mandatory;
	scroll-padding-top: 5vh;
	height: 100vh;
	overflow-x: scroll;
	overflow-y: scroll;
	position: relative;
}
.page0 {
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
}
.page1 {
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
}
.page1.page1h2 {
	text-align: right;
	font-size: 1em;
	margin:auto;

	font-size: 2em;
	background: linear-gradient(180deg, var(--hc), black 170%) ;
	background-clip: text;
	color: transparent;
}
.page1 > p {
	text-align: left;
	font-size: 1em;
	background: linear-gradient(180deg, var(--hc), black 120%) ;
	background-clip: text;
	color: transparent;
}
.button {
	background-color: var(--bg);
	border: solid var(--fg);
	color: var(--fg);
	padding: 1em;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	margin: 1em 1em;
	border-radius: 1em;
	min-width: 10em;;
}
.button:hover {
	background-color: var(--fg);
	border: solid var(--fg);
	color: var(--bg);
	padding: auto;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1em;
	margin: 1em 1em;
	border-radius: 1em;
	min-width: 10em;;
}
.lnk:hover {
	border-radius: 3px;
}
centered {
	display: flex;
	justify-content: center;
}
a:link {
	color: var(--lnk);
	background-color: var(--bg)
}
a:link:hover {
	color: var(--bg);
	background-color: var(--fg);
}