html {
	min-height: 100vh;
}

body {
	font-family: Tahoma, Arial, Trebuchet MS, Helvetica, sans-serif;
	font-size: 0.75em;

	background-color: #2b2b2a;
	color: #fff;

	margin: 0;
	padding: 0;
}

h1, h2 {
	font-family: Arial, Tahoma, Trebuchet MS, Helvetica, sans-serif;
}

a, a:hover, a:visited {
	color: #6f9fc8;
	text-decoration: underline;
}

hr {
	border: 0;
	height: 1px;
	background-color: #595959;
	margin: 16px 0;
}

.main {
	width: 820px;
	margin: 32px auto;
}

.header {
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0 6px 2px #111 inset;
	background-color: #1c1c1c;
	padding: 16px 24px;
}

.header h1 {
	font-size: 24px;
	font-weight: bold;
	color: #e1e1e1;
	margin: 4px 0;
}

.header p {
	font-size: 12px;
	line-height: 16px;
	color: #898989;
	margin: 4px 0;
}

.contents {
	border-radius: 0 0 5px 5px;
	box-shadow: 0 0 6px 2px #161616 inset;
	background-color: #252525;
	padding: 16px 24px;
}

.contents h2 {
	font-size: 20px;
	font-weight: bold;
	color: #e1e1e1;
	margin: 8px 0;
}

.contents h2:not(:first-child) {
	margin-top: 24px;
}

.contents table {
	border-collapse: collapse;
	background-color: #2b2b2a;
}

.contents th, .contents td {
	border: 1px solid #4c4c4d;
	padding: 4px;
}

.contents p {
	color: #bebebe;
	margin: 8px 0;
}

@media (max-width: 820px) {
	.main {
		width: unset;
	}
}