:root {
	--e-font-sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	--e-font-mono:Consolas,monaco,'Ubuntu Mono','Liberation Mono','Courier New',Courier,monospace;
	--e-color-brand: #336699;
	--e-color-failure: #ff0000;
	--e-color-warning: #ff9900;
	--e-color-success: #00cc00;
	--e-color-primary: #0366D6;
	--e-fg-1:#000;
	--e-fg-2:#F9F9F0;
	--e-fg-3:#cccccc;
	--e-bg-1:#FFF;
	--e-bg-2:#223344;
	--e-bg-3:#101010;
	--e-yw-1: #f3ee04;
	/* --e-lk-1:#0070F3;
	--e-lk-2:#0366D6;
	--e-lk-tx:#FFF;
	--e-ac-1:#79FFE1;
	--e-ac-tx:#0C4047 */
}

@media (prefers-color-scheme: dark) {
	:root {
		--e-tx-1:#fff;
		--e-tx-2:#eee;
		--e-bg-1:#000;
		--e-bg-2:#111;
		--e-bg-3:#222;
		--e-lk-1:#3291FF;
		--e-lk-2:#0070F3;
		--e-lk-tx:#FFF;
		--e-ac-1:#7928CA;
		--e-ac-tx:#FFF
	}
}


::selection {
	background: var(--e-yw-1);
	color: #000000;
}

body {
	font-size: 1.3rem;
	height: 100%;
	width: 100%;
}

p {
	font-size: 1.5rem;
}

hr {
	border: 2px solid var(--e-bg-2);
	margin: 0.50rem 0;
}

button,
input,
select,
textarea {
	border: 1px solid var(--e-fg-1);
	font-size: 1rem;
	font-weight: bold;
	margin: 0;
	padding: 0.25rem 0.50rem;
}
input[type=file] {
	padding: 0.125rem 0.25rem;
}

abbr[title] {
	text-decoration: underline;
}

header h1 {
	line-height: 2;
	padding: 0;
	text-align: center;
}

/**
 *
 */
main.main {
	margin: 0 auto 6vh auto;
	max-width: 90vw;
}

/**
 * Page Footer
 */
footer.main-footer {
	color: var(--e-fg-3);
	padding: 1vh 0;
}
footer.main-footer a {
	color: inherit;
}

aside.notice {
	left: 2vw;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 2vh;
	width: 96vh;
}

aside.general {
	border-left: 4px solid #333333;
	padding: 1rem;
}

aside.warning {
	border-left: 4px solid #f00;
	padding: 1rem;
}

aside.failure {
	border-left: 4px solid var(--e-color-failure);
	padding: 1rem;
}

aside.success {
	border-left: 4px solid var(--e-color-success);
	padding: 1rem;
}

.hero {
	margin: 0;
	padding: 0 10vw;
}
.hero h1 {
	margin: 0;
	padding: 4vh 0;
	text-align: center;
}
.hero h2 {
	margin: 0;
	padding: 1vh 0;
}
.hero p {
	margin: 0;
	padding: 2vh 5vh 1vh 5vh;
}

p.lead {
	border-bottom: dashed;
	font-size: 150%;
}


/* 1024px and Smaller */
@media screen and (max-width: 1200px) {

	.hero {
		margin: 0;
		padding: 0 5vw;
	}

}

/* 480px and Smaller */
@media screen and  (max-width: 800px) {

	.hero {
		margin: 0;
		padding: 0 1vw;
	}

}