* {
	box-sizing: border-box;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #e4e4e4;
	margin: 0;
	padding: 0;
	color: #444;
}

body.index main {
	max-width: 700px;
	margin: auto;
	background: white;
	padding: 22px;

	@media screen and (min-width: 700px) {
		margin-top: 11vh;
		border-radius: 11px;
		box-shadow: 0 0 20px 0 #00000042;

		outline: 3px double #0000002b;
		border: 1px solid #00000099;
	}
}

body.joke main {
	font-family: sans-serif;
	text-align: center;
	padding-top: 40vh;

	.q {
		font-size: 1.1em;
	}
}

fieldset.api {
	border: none;
	background: aliceblue;
	border-radius: 4px;

	> legend {
		font-weight: bold;
		background: white;
		padding: .1em .5em;
	}

	.method {
		display: inline-block;
		padding: 4px 8px;
		border-radius: 4px;
		color: white;
		background: #448cd8;
		margin-right: 8px;
	}
}

h1 {
	margin: 0;
}

small {
	color: #999;
}

pre {
	tab-size: 4;
	word-break: break-all;

	code {
		white-space: pre-wrap;
		font-size: 0.9em;
		line-height: 1.4em;
		margin: 0;
		padding: 22px;
		display: block;
		overflow: auto;
	}
}

code {
	padding: 2px 5px;
	white-space: nowrap;

	background: #000000cf;
	color: white;
	font-family: Consolas, "Courier New", Courier, monospace;
	border-radius: 3px;
}

pre code {
	white-space: pre;
	white-space: pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -hp-pre-wrap;
	word-wrap: break-word;
	word-break: break-all;
}