html {
	padding: 0 8px;
	overflow-y: scroll;
}

body {
	margin: 8px auto;
	max-width: 640px;
}

body,
article,
.article {
	border: 1px solid black;
	border-radius: 8px;
	box-shadow: 3px 3px #ccc;
	padding: 0 1em;
}

article,
.article {
	margin: 1em 0;
}

article:target,
.article:target {
	border-width: 5px;
}

pre {
	white-space: pre-wrap;
	word-break: break-word;
}

pre.article {
	padding: 1em;
}

table[border] {
	border: 1px solid black;
	border-collapse: collapse;
	margin: 1em auto;
}

table:empty {
	display: none;
}

th[nowrap],
td[nowrap] {
	white-space: nowrap;
}

.scroll {
	margin: 1em 0;
	overflow-x: auto;
}
.scroll > * {
	margin: 0 !important;
}

button,
a.button {
	background-color: white;
	border: 1px solid black;
	border-radius: 0;
	box-shadow: 2px 2px black;
	color: black;
	cursor: pointer;
	font: inherit;
	padding: .3em;
}
input[type=file]::-webkit-file-upload-button {
	background-color: white;
	border: 1px solid black;
	border-radius: 0;
	box-shadow: 2px 2px black;
	color: black;
	cursor: pointer;
	font: inherit;
	padding: .3em;
}

button:active,
a.button:active {
	box-shadow: none;
	left: 2px;
	position: relative;
	top: 2px;
}
input[type=file]:active::-webkit-file-upload-button {
	box-shadow: none;
	left: 2px;
	position: relative;
	top: 2px;
}

select,
input {
	border: 1px solid black;
	font: inherit;
	padding: .3em;
}

input[type=file] {
	border: 0;
}

hr {
	border: 0 solid black;
	border-width: 1px 0 0;
}

p img,
figure img {
	max-width: 100%;
}

p.scroll img,
figure.scroll img {
	max-width: none;
}

textarea {
	box-sizing: border-box;
	font: inherit;
	font-family: monospace;
	min-height: 500px;
	resize: vertical;
	width: 100%;
}