:root {
	--bg-ligh: #FEC;
	--bg-norm: #FED;
	--bg-dark: #D96;
	--bg-acc1: #914;
	--bg-acc2: #F66;
	--fg-emph: #914;
	--fg-norm: #000;
	--fg-dark: #000;
	--fg-acc1: #FFF;
	--fg-acc2: #FFF;
	--sp-XL: 2.618em;
	--sp-L: 1.618em;
	--sp-M: 1em;
	--sp-S: .618em;
	--sp-XS: .382em;
}
@font-face {
	font-family: blogger;
	src: url(/assets/blogger.ttf);
	font-weight: normal;
}
@font-face {
	font-family: blogger;
	src: url(/assets/blogger-bold.otf);
	font-weight: bold;
}
body {
	gap: var(--sp-L);
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: "blogger", sans-serif;
	color: var(--fg-norm);
	background: var(--bg-norm);
}
main {
	flex: 1 0 fit-content;
	max-width: 40rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--sp-L);
	margin-bottom: var(--sp-XL);
	padding: 0 var(--sp-L);
}
section {
	display: flex;
	flex-direction: column;
}
div {
	display: flex;
	flex-wrap: wrap;
}
h1 {
	font-size: 2.875rem;
}
h2 {
	font-size: 2.5rem;
}
h3 {
	font-size: 2.125rem;
}
h4 {
	font-size: 1.75rem;
}
h5 {
	font-size: 1.375rem;
}
h6 {
	font-size: 1rem;
}
a {
	color: var(--fg-emph);
}
button, input, select, textarea {
	border: .125em solid var(--fg-dark);
	padding: var(--sp-XS) var(--sp-S);
	background: var(--bg-dark);
	transition: border-color .2s ease-out,
				color .2s ease-out,
				background .2s ease-out;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	width: fit-content;
	border-color: var(--bg-acc1);
	color: var(--fg-acc1);
	background: var(--bg-acc1);
}
input::placeholder, textarea::placeholder {
	color: var(--fg-dark);
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
	border-color: var(--fg-dark);
	color: var(--fg-dark);
	background: var(--bg-norm);
}
input:enabled:hover, select:enabled:hover, textarea:enabled:hover,
input:focus, select:focus, textarea:focus {
	border-color: var(--fg-emph);
}
button:enabled:hover, input[type="button"]:enabled:hover, input[type="reset"]:enabled:hover, input[type="submit"]:enabled:hover,
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus {
	border-color: var(--bg-acc2);
	color: var(--fg-acc2);
	background: var(--bg-acc2);
}
