:root {
	--color-bg: white;
	--color-fg: black;
}

body {
	margin: 0;
	padding: 0;
	color: var(--color-fg);
	background-color: var(--color-bg);
}
main {
	width: 100%;
}

.container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: fit-content;
	padding: 6vh;
	margin: 0;
}

.title-box {
	width: fit-content;
	height: fit-content;
	padding: 0;
	margin: 0;
}

.ascii-title {
	font-family: monospace;
	font-weight: bolder;
	font-size: .8rem;

	white-space: pre;
	display: inline-block;
	margin: 0;
	padding: 0;

	-webkit-text-stroke: 2px var(--color-fg);
}

.subtitle {
	font-family: monospace;
	font-style: italic;
	font-weight: lighter;
	font-size: 1.2rem;
	text-align: left;
	margin: 0 0 0 2rem;
}

@media (min-width: 1024px) {
	.container {
		padding: 8vh;
	}

	.ascii-title {
		font-size: 1.2rem;
	}
	
	.subtitle {
		font-size: .8rem;
		margin: 0 0 0 1.5rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-bg: black;
		--color-fg: white;
	}

}