:root {
	--br: 1px solid rgba(0 0 0 / 20%);
	--ac: #535;
	--bg1: #eee;
	--bg2: #ddd;
	--bg3: #ccc;
	--hi: #fff;
	--fg: #444;
	--fg2: #aaa;
	--sh: #000;
	--sh1: rgba(0 0 0 / 0%);
	--sh2: rgba(0 0 0 / 75%);
}
html {
	background: #8cbff0;
	color: var(--fg);
	font-family: sans-serif;
	line-height: 1.5em;
	max-width: 640px;
	border-left: var(--br);
	border-right: var(--br);
	margin: auto;
	min-height: 100vh;
}
body { margin: 0; background: var(--bg1); }
header {
	background: var(--bg2);
	border-bottom: var(--br);
}
footer {
	background: var(--bg2);
	border-top: var(--br);
}
header p { margin: 0; padding: 1rem 10px; }
img { display: block; max-width: 100%; height: auto; }
.imgtxt { position: relative; padding: 0 !important; }
a { text-underline-offset: 0.25em; color: var(--ac); }
time { color: var(--fg2); }
p { margin: 0; padding-top: 0.5em; padding-bottom: 0.5em; }
.imgtxt > :is(h1, h2, h3, h4, h5, h6) {
	font-weight: normal;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--hi);
	margin: 0;
	line-height: 1.5em;
	background: linear-gradient(to bottom, var(--sh1), var(--sh2));
	text-shadow:
		1px 1px 2px var(--sh),
		-1px -1px 2px var(--sh);
	padding: 20px 10px 10px 10px;
}
nav {
	white-space: nowrap;
	background: var(--bg3);
	border-bottom: var(--br);
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--ac) var(--bg3);
}
nav::-webkit-scrollbar {
	height: 4px;
	background: var(--bg3);
}
nav::-webkit-scrollbar-thumb { background: var(--ac); }
nav a {
	display: inline-block;
	padding: 0.5rem 10px;
	text-decoration: none;
	color: inherit;
}
nav a.active {
	font-weight: bold;
	color: var(--ac);
	border-bottom: 2px solid var(--ac);
}
nav a:hover { background: var(--bg2); }
article time { float: right; font-size: 0.75rem; padding-left: 1em;  }
article h2 { font-size: 1rem; }
article {
	padding: 1em 10px;
	border-bottom: var(--br);
}
article:hover { background: var(--hi); }
body.post time { color: inherit; }
body.post header, body.post footer {
	padding: 0.5em 10px;
	text-align: center;
}
body.post main > * { padding-left: 10px; padding-right: 10px }
body.post main > h1 { padding-top: 10px; }
body.post main > img { padding: 0; }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1.5em;
}
.slide { white-space: nowrap; overflow: auto; }
.slide img { display: inline; }
figure, body, img, figcaption { margin: auto; }
figcaption { margin-top: 0.5em; max-width: 75%; font-style: oblique; text-align: center; }
ul { padding-left: 1em; margin: 0 0 0 1em; }
.hide { display: none; }
@media (prefers-color-scheme: dark) {
	:root {
		--br: 1px solid rgba(255 255 255 / 20%);
		--ac: #dad;
		--bg1: #334;
		--bg2: #223;
		--bg3: #445;
		--hi: #000;
		--fg: #fee;
		--fg2: #88a;
		--sh: #fff;
		--sh1: rgba(255 255 255 / 0%);
		--sh2: rgba(255 255 255 / 75%);
	}
	html { background: #435b73; }
}