/* Eric Meyer's reset.css */
@import url('/css/reset.css');

/* Globals */
html, :root {
	--main-background-color: #faf0e6;
	--main-foreground-color: #3b2f2f;
	--link-foreground-color: #818479;
	--main-header-font: "Abril Fatface";
	--main-body-font: "Playfair Display";
	--main-mono-font: "VT323";
	--base-line-height: 24px;
}

@media (prefers-color-scheme: dark) {
	html, :root {
		--main-background-color: #3b2f2f;
		--main-foreground-color: #faf0e6;
		--link-text-color: #7e7b86;
	}
}

::-moz-selection {
	background: var(--foreground-text-color);
	color: var(--main-background-color);
}

::selection {
	background: var(--main-foreground-color);
	color: var(--main-background-color);
}

/* basics, no media types */
html, body {
	height: 100%;
	background: var(--main-background-color);
	color: var(--main-foreground-color);
	font: 16px/1.5 var(--main-body-font), serif;
}

#wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

header {
	margin: auto;
	text-align: center;
}

h1 {
	font-family: var(--main-header-font);
}

#afm {
	background: var(--main-foreground-color);
	color: var(--main-background-color);
	border-radius: 50%;
	width: 33px;
	height: 33px;
	line-height: 33px;
	display: inline-block;
}

footer>p {
	font-size: 12px;
	line-height: 24px;
	text-align: right;
}

@media only screen and (min-width: 426px) {
	h1 {
		font-size: 32px;
	}

	#afm {
		width: 60px;
		height: 60px;
		line-height: 60px;
	}
}

@media only screen and (min-width: 769px) {
	h1 {
		font-size: 48px;
	}

	#afm {
		width: 86px;
		height: 86px;
		line-height: 86px;
	}
}

@media only screen and (min-width: 1025px) {
	h1 {
		font-size: 64px;
	}

	#afm {
		width: 119px;
		height: 119px;
		line-height: 119px;
	}
}