@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono|Inconsolata');

/* Generic Elements */

* { box-sizing: border-box; }

html { color-scheme: light dark; }

/* Fix monospace font size */
pre, code, kbd, samp, tt {
	font-family: monospace,monospace;
	font-size:   1em;
}

body {
	max-width:   60em;
	margin:      0 auto;
	padding:     0;
	font-family: "Open Sans", Tahoma, Verdana, Helvetica, Arial, sans-serif;
	font-size:   100%;
	line-height: 1.5;
	overflow-x:  hidden;
}

body > * { padding: 0.5em; }

code {
	background-color: oklch(75% 0 0 / 0.2);
	border-radius:    0.22em;
	padding:          0.2em 0.4em;
	/* Use Roboto Mono to match text */
	font-family:      "Roboto Mono", Consolas, Inconsolata, monospace;
	font-size:        0.9em;
	white-space:      pre-wrap;
}
pre code {
	display:     block;
	padding:     1em;
	overflow:    auto;
	/* Use Consolas because it looks better in code */
	font-family: Consolas, Inconsolata, monospace;
	line-height: 1.25;
	white-space: pre;
}

img, a.img {
	display:   block;
	max-width: 100%;
}
a.img img   { width:  100%; }
a[href] img { border: 0 none; } /* IE9 Fix */

/* Specific Elements */

body > header { border-bottom:   1px solid gray; }
body > footer { border-top:      1px solid gray; }

/* Generic Classes */

.center {
	margin-left:  auto;
	margin-right: auto;
}
.text-center { text-align: center; }

.prose { max-width: 40em; }

/* Misc. */

@media print {
	body { font-size: 14px; }
}