body {
	font-family: 'Fira Code', 'Nanum Gothic Coding', monospace;
	max-width: 50rem;
	margin: 3em auto;
	padding: 0 1em;
	line-height: 1.5;

	/* iOS Safari font-size fix */
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

header {
	display: flex;
	font-family: sans-serif;
	width: 100%;
	margin-bottom: 0.5em;
	font-size: 4.8rem;
	box-sizing: border-box;
	border: solid 1px black;
}
header > span:first-child {
	width: 100%;
	text-align: right;
	background-color: #1A1A1AFF;
	color: white;
	padding: 0 0.25em 0.05em 0.25em;
}
header > span:last-child {
	width: 100%;
	text-align: left;
	background-color: white;
	color: #1A1A1AFF;
	padding: 0 0.25em 0.05em 0.25em;
}

h1:before { content: "# "; }
h2:before { content: "## "; }
h3:before { content: "# "; }
h4:before { content: "## "; }

article > h1 { font-size: 1.75em; }
article > h2 { font-size: 1.5em; }
article > h3 { font-size: 1.25em; }

a { color: rgb(30, 30, 100); }
a:visited { color: rgb(110, 60, 140); }

ol { list-style-type: decimal; }
ul { list-style-type: '— '; }

p { margin-bottom: 2em; }

img {
	width: 100%;
	border-radius: 10px;
}
pre {
	overflow-x: auto;
	padding: 0.5em;
	border-radius: 3px;
}
footer {
	border-top: 2px solid #000;
	margin-top: 1em;
	padding-top: 1em;
}
table tr td {
	padding-bottom: 0.5em;
}
table tr td {
	vertical-align: top;
	padding-right:  1em;
}

.customer-logos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2em 4em;
	align-items: center;
	padding: 2em;
	border-radius: 0.5em;
}

.customer-logos img {
	height: auto;
	display: block;
	max-height: 180px;
	border-radius: unset;
}

@media only screen and (max-width: 45rem) {
	body { margin: 1.5em auto; }
	body > article { font-size: 0.9em; }
	header { font-size: 3.5rem; }
	article > h1 { font-size: 1.5em; }
	article > h2 { font-size: 1.25em; }
	article > h3 { font-size: 1.1em; }
	footer { font-size: 0.9em; }
	.customer-logos { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 35rem) {
	header { font-size: 2.5rem; }
}
@media (prefers-color-scheme: dark) {
	body {
		color: lightgrey;
		background-color: #1A1A1AFF;
	}
	a { color: rgb(160, 140, 160); }
	a:visited { color: rgb(180, 120, 180); }
	footer { border-top: 2px solid lightgrey; }
}