* { margin:0; padding:0; }
body {
	background:#110d1c url('https://lutzbug.neocities.org/KNM/assets/dingbat_pattern_2.png') repeat;
	color:#ddd8e8;
	font:1.1rem 'Space Grotesk', Georgia, sans-serif;
}
a {
	color:#a8dfc0;
	text-decoration:none;
}
a:hover {
	color:#c8f5e2;
	text-decoration:underline;
}
.skip-link {
	position:absolute;
	top:-999px;
	left:0;
	padding:8px 16px;
	background:#1e1537;
	color:#ddd8e8;
	z-index:999;
}
.skip-link:focus {
	top:0;
}
#container-wrapper {
	width:calc(100% - 40px);
	max-width:1400px;
	margin:0 auto;
	filter:
		drop-shadow(2px 0 0 #1e1537)
		drop-shadow(-2px 0 0 #1e1537)
		drop-shadow(0 2px 0 #1e1537)
		drop-shadow(0 -2px 0 #1e1537);
}
#container {
	padding:32px;
	box-sizing:border-box;
	text-align:center;
	background:#050513;
	clip-path: polygon(0% 0%, 100% 0%, 98.5% 100%, 1.5% 100%);
}
#header img.logo {
	margin:0 auto 10px;
	display:block;
}
#header ul {
	list-style:none;
	display:flex;
	gap:0.4rem;
}
#header li {
	flex:1;
}
#header li a {
	display:block;
	padding:12px 4px;
	background:rgba(42, 34, 62, 0.72);
	border:1px solid rgba(180, 155, 215, 0.3);
	border-radius:999px;
	color:#ddd8e8;
	font-size:1.25rem;
	text-align:center;
}
#header li a:hover {
	background:#3d3158;
	text-decoration:none;
}

#content {
	margin-top:20px;
}
#content h2,
#content h3,
#content h4 {
	font-weight:normal;
}
#content h2 { font-size:1.5em; }
#content h3 { font-size:1.25em; }
#content h4 {
	font-size:0.9em;
	font-style:italic;
}
#content p {
	margin:10px 0;
	line-height:1.5;
	text-align:left;
}
#content ul,
#content ol {
	margin-left:20px;
}
#content ul { list-style:inside; }
#content ol { list-style:upper-roman inside; }
#content li {
	margin:5px 0;
}
#footer {
	font-size:0.85em;
	margin:20px 0 0;
	text-align:center;
}
hr {
	border:0.5px solid;
	margin:10px;
}
img {
	max-width:100%;
	margin:5px;
}
.right  { float:right; margin-left:1em; }
.left   { float:left;  margin-right:1em; }
.center { display:block; margin:0 auto; text-align:center; }
.caption { font-size:0.85em; font-style:italic; }

#postlistdiv ul,
#recentpostlistdiv ul {
	margin:5px 0;
	list-style:none;
}
#nextprev {
	text-align:center;
	margin-top:10px;
	clear:both;
}
.page-view { display:none; }
.comic-reader .page-view:first-of-type { display:block; }
.page-view:target { display:block; }
.page-view:target ~ .page-view:first-of-type { display:none; }
.comic-reader:has(.page-view:target) .page-view:first-of-type:not(:target) { display:none; }
.comic-nav {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0.6rem;
	padding:0.6rem 0;
	flex-wrap:wrap;
}
.comic-nav a {
	display:inline-block;
	width:25%;
	padding:8px 4px;
	background:rgba(42, 34, 62, 0.35);
	border-radius:999px;
	color:#ddd8e8;
	font-size:0.95rem;
	text-align:center;
	box-sizing:border-box;
}
.comic-nav a:hover {
	background:#3d3158;
	color:#ddd8e8;
	text-decoration:none;
}
.comic-nav a:has(img) {
	background:none;
	border:none;
	padding:4px;
	width:auto;
}
.comic-nav a:has(img):hover {
	background:none;
	opacity:0.8;
}
.comic-nav a:has(img) img {
	height:48px;
	width:auto;
	display:block;
}
.comic-jump {
	display:block;
	width:100%;
	margin:8px 0;
	padding:10px 16px;
	background:rgba(42, 34, 62, 0.72);
	border:1px solid rgba(180, 155, 215, 0.3);
	border-radius:999px;
	font-size:0.95rem;
	cursor:pointer;
	appearance:auto;
}
.comic-jump:hover {
	background:#3d3158;
}
.comic-jump option {
	background:#1e1537;
	color:#ddd8e8;
}
.page-title,
.author-notes-title {
	padding:10px 32px;
	background:rgba(42, 34, 62, 0.35);
	border-top:2px solid rgba(10, 5, 25, 0.45);
	border-bottom:2px solid rgba(200, 180, 240, 0.18);
	font-size:1.1em;
	font-style:italic;
	font-weight:normal;
	letter-spacing:0.05em;
	text-align:center;
}
.page-title {
	margin:16px -32px 0;
}
.author-notes {
	margin-top:20px;
}
.author-notes-title {
	margin:0 -32px;
}
.author-notes p {
	margin:12px 0;
	line-height:1.5;
}
.note-date {
	font-size:0.85em;
	font-style:italic;
	opacity:0.7;
}
.archive-section {
	margin-top:1.5em;
}
.archive-chapter-title,
.archive-chapter-subtitle {
	margin:0 -32px;
	background:rgba(42, 34, 62, 0.35);
	font-style:italic;
	font-weight:normal;
	text-align:center;
}
.archive-chapter-title {
	padding:10px 32px 4px;
	border-top:2px solid rgba(10, 5, 25, 0.45);
	font-size:1.1em;
	letter-spacing:0.05em;
}
.archive-chapter-subtitle {
	padding:2px 32px 10px;
	border-bottom:2px solid rgba(200, 180, 240, 0.18);
	font-size:0.85em;
	opacity:0.75;
}
.archive-table {
	width:95%;
	border-collapse:collapse;
	text-align:left;
}
.archive-table th {
	padding:7px 4px;
	border-bottom:1px solid rgba(200, 180, 240, 0.18);
	font-size:0.8em;
	font-weight:normal;
	font-style:italic;
	letter-spacing:0.07em;
	text-transform:uppercase;
	opacity:0.6;
}
.archive-table th:last-child {
	text-align:right;
}
.archive-table td {
	padding:6px 4px;
	border-bottom:1px solid rgba(200, 180, 240, 0.07);
}
.archive-table tr:last-child td {
	border-bottom:none;
}
.archive-table td:last-child {
	text-align:right;
	white-space:nowrap;
	font-size:0.85em;
	opacity:0.9;
}
@media only screen and (max-width: 599px) {
	#container-wrapper {
		width:100%;
		margin:0;
		filter:none;
	}
	#container {
		clip-path:none;
	}
	#header ul {
		flex-wrap:nowrap;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		gap:1.2rem;
		padding-bottom:4px;
	}
	#header ul::-webkit-scrollbar {
		display:none;
	}
	.archive-table,
	.archive-table tbody {
		display:block;
		width:100%;
	}
	.archive-table thead {
		display:none;
	}
	.archive-table tbody tr {
		display:block;
		padding:6px 4px;
		border-bottom:1px solid rgba(200, 180, 240, 0.15);
	}
	.archive-table tbody tr:last-child {
		border-bottom:none;
	}
	.archive-table td {
		display:block;
		border-bottom:none;
		padding:3px 0;
		width:100%;
		box-sizing:border-box;
	}
	.archive-table td:nth-child(1) a,
	.archive-table td:nth-child(2) a {
		display:block;
		width:100%;
		padding:10px 14px;
		background:rgba(42, 34, 62, 0.72);
		border:1px solid rgba(180, 155, 215, 0.3);
		border-radius:999px;
		color:#ddd8e8;
		font-size:1.1rem;
		text-align:center;
		box-sizing:border-box;
	}
	.archive-table td:nth-child(2) a {
		background:rgba(22, 17, 40, 0.85);
		font-size:1rem;
	}
	.archive-table td:nth-child(1) a:hover,
	.archive-table td:nth-child(2) a:hover {
		background:#3d3158;
		text-decoration:none;
	}
}
@media only screen and (min-width: 600px) {
	.small { max-width:40%; }
}
@media only screen and (min-width: 1023px) {
	body { font-size:1.2rem; }
	#header li a { font-size:1.5rem; }
}