/* common to all pages */
body { max-width: 48em; margin: 0 auto; padding: 1px 1.5rem;
	border-left: 1px solid #ddd; border-right: 1px solid #ddd;
	font-family: sans-serif; line-height: 1.2;
	position: relative; overflow-x: clip; }
body.draft::before, body.draft::after {
	content: "DRAFT"; color: #ddd; font-size: 10rem; font-weight: bold;
	writing-mode: vertical-lr; line-height: 1;
	position: absolute; top: 1rem; right: -10rem; }
body.draft::after { transform: rotate(180deg); left: -10rem; right: auto; }

/* let's see if this is worth a damn */
@supports (hyphens: auto) {
	p, li, .footnote { hyphens: auto; text-align: justify; }
	center * { text-align: center; }
}

a { color: #c94900; }
a:hover { color: #ff5f00; }

/* not exactly sure how the :after becomes the right width */
h2:target, .footnote:target { display: inline-block; }
h2:target:after, .footnote:target:after { content: ""; display: block;
	background: red; height: .3em; width: 100%; border-radius: .15em; }

ul.nav { margin: 0.5rem 0; padding: 0; }
ul.nav li { display: inline-block; padding-right: 1em; }

/* showcase */
.right, .left { margin-top: 1em; margin-bottom: 0.5em;
  padding: .3em; border: 1px solid #ddd; }
.right, .left { display: flex;
 justify-content: space-between; align-items: center; }
.left { float: left; margin-right: 1em; }
.right { float: right; margin-left: 1em; }
div { overflow: hidden; }

/* articles */
#contents { margin: 1.5rem -1.5rem; padding: 0 1.5rem; background: #faf9f9;
	border-top: 4px solid #f5f4f4; border-bottom: 4px solid #f5f4f4; }
#contents > * { margin: 0.75rem 0; }
pre { padding: 0.5em 1em; border: 1px solid #ddd; overflow-x: auto;
	font-size: 100%; }
svg, img { max-width: 90%; height: auto; }
hr { margin-left: -1.5rem; margin-right: -1.5rem; border: none;
	height: 4px; background: #ddd; }
.text-center { text-align: center; }
.left-simple { margin: 0.5em 1em 0.5em 0; float: left; }
.right-simple { margin: 0.5em 0 0.5em 1em; float: right; }
.censor { background: black; }
.censor:hover { background: inherit; }

@font-face {
	font-family: 'Source Code Pro Block';
	src: local('Source Code Pro'),
		url('SourceCodePro-Regular-Block.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* block characters are face- and line-height-sensitive */
pre.block { font-family: 'Source Code Pro Block', monospace; line-height: 1.4; }

/* for the first table I ever included */
table { border-collapse: collapse; }
table sup { vertical-align: top; font-size: .6em; }
td, th { border-bottom: 1px solid #ccc; padding: .1em /*.5em*/ .3em; }
tr:first-child th { border-bottom: 1px solid #000; }
th:first-child { text-align: right; border-right: 1px solid #000;
	/*width: 0; white-space: nowrap;*/ }

/* senseless subclassing of it */
table.scroll-x { white-space: nowrap;
	overflow-x: auto; display: block; font-size: small; }
table.scroll-x td { white-space: normal; }

/* comment section */
#comments { position: relative; margin: 0 -1.5rem; padding: 0 1.5rem;
	border-top: 4px solid #ddd; margin-top: 1.5rem; }
#comments + a { text-align: center; margin: 2rem 0; display: none; }

#comments.rolled { max-height: 20em; overflow: hidden; }
#comments.rolled::before { content: ""; position: absolute; left: 0; top: 0;
	display: block; height: 100%; width: 100%; pointer-events: none;
	background: linear-gradient(rgba(255, 255, 255, 0) 25%, #ffffff); }
#comments.rolled + a { display: block; }

.reply { list-style-type: none; background: #faf9f9;
	padding: .75em 1.5rem 1em 1.5rem; margin: .5em -1.5rem 0 -1.5rem;
	border: solid #f5f4f4; border-width: 4px 0; }
.reply p { margin: .5em 0; }
.reply hr { margin: 0.5em 0; border-top: 2px dashed #ccc;
	height: 0px; background: none; }
.reply .timestamp { float: right; }
.reply .timestamp a { color: #ccc; text-decoration: none; }
.reply .reply { border: 0; border-left: 1px solid #ddd;
	margin: 0 0 1em 0; padding: 0 0 0 .75rem; }