body {
	margin: 0;
	font-family:
		Roboto,
		-apple-system,
		BlinkMacSystemFont,
		Segoe UI,
		Oxygen,
		Ubuntu,
		Cantarell,
		Fira Sans,
		Droid Sans,
		Helvetica Neue,
		sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	background-color: #eae8dc;
	color: #393937;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: 400;
	line-height: 1.2;
	text-transform: capitalize;
}

h1 {
	font-size: 3.75rem;
	font-weight: 300;
}

h2 {
	font-size: 2.125rem;
	font-weight: 300;
}

h3 {
	font-size: 1.5rem;
	font-weight: 400;
}

h4 {
	font-size: 1.25rem;
	font-weight: 400;
}

h5,
h6 {
	font-size: 1.25rem;
	font-weight: 500;
}

@media (max-width: 400px) {
	h1 {
		font-size: 2.125rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.25rem;
	}

	h4,
	h5,
	h6 {
		font-size: 1.25rem;
		font-weight: 500;
	}
}

button {
	font-weight: 500;
	text-transform: uppercase;
}

.caption,
caption {
	font-weight: 500;
	font-size: 0.75;
}

a {
	color: inherit;
}

code {
	font-family: menlo, inconsolata, monospace;
	font-size: 0.85em;
	color: #555;
	background-color: #d0d0d0;
	padding: 0.2em 0.4em;
	border-radius: 2px;
}

:focus,
.focus-visible {
	outline-color: #e85a4f;
	outline-style: solid;
}

.focus-visible {
	outline-width: 2px;
}

/* any rule below will have no effect */
:focus-visible {
	outline-color: #e85a4f;
	outline-width: thick;
}

p {
	max-width: 80ch;
}

blockquote {
	border-left: 4px solid #d8c3a5;
	font-style: italic;
	margin: 0;
	padding-left: 2ch;
}