/* Good shit. */
@font-face {
	font-family: "OCR-A Web";
	src: url("../fonts/OCR-A.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Background. */
body {
	min-height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background-color: #000000;

	background-image:
		repeating-linear-gradient(
			to bottom,
			rgba(84, 224, 102, 0.05) 0px,
			rgba(46, 116, 55, 0.05) 3px,
			transparent 3px,
			transparent 8px
		),
		linear-gradient(rgba(70, 255, 125, 0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(70, 255, 125, 0.1) 1px, transparent 1px);

	background-size: auto, 48px 48px, 48px 48px;

	font-family: "OCR-A Web", "OCR-A", "OCR A Extended", monospace;

	color: #8dffa9;

	text-shadow: 0 0 6px rgba(70, 255, 125, 0.75);
}

/* No showey if wide enough. */
.orientation-warning {
	display: none;
	max-width: 32rem;
	margin: 24px;
	padding: 16px 0;
	border-top: 1px solid #46ff7d;
	border-bottom: 1px solid #46ff7d;
	font-size: 1.25rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
}

/* Main Square */
.site-shell {
	width: min(100vw, 100vh);

	aspect-ratio: 1 / 1;

	display: flex;
	flex-direction: column;
}

header, footer {
	padding: 16px;
	background-color: #000000;
}

/* Main layout stuff */
header {
	border-bottom: 1px solid #268c45;
    font-size: 0.875rem;
}

main {
	flex: 1;

	/* Scroll the content inside the square if it eventually becomes too tall. */
	min-height: 0;
	overflow-y: auto;
}

a,
a:link,
a:visited {
	color: #8dffa9;
	text-decoration: none;
	background-color: transparent;
	display: inline-block;
	padding: 0 0.2em;
	line-height: 1.2;
	transition: color 180ms ease, background-color 180ms ease, text-shadow 180ms ease;
}

a:hover,
a:focus-visible,
a:active,
a:visited:hover,
a:visited:focus-visible {
	color: #000000;
	background-color: #8dffa9;
	text-decoration: none;
	text-shadow: none;
	box-shadow: 0 0 0 0.1em #8dffa9;
}

footer {
	border-top: 1px solid #268c45;
    font-size: 0.875rem;
}

/* ughh why do we need this */
header h1,
footer p {
	margin: 0;
}

/* Gay baby jail. */
@media (orientation: portrait) {
	.site-shell {
		display: none;
	}
	.orientation-warning {
		display: block;
	}
}