body {
	margin: 0;
	padding: 8px;
	font-family: sans-serif;
	word-wrap: break-word;
	min-width: 400px;
}

:root {
	--alternating-colour-even: hsl(0, 0%, 96%);
	--alternating-colour-odd: hsl(0, 0%, 91%);
	--dark-colour: black;
	--border-colour: black;
	--gray: darkgray;
	--light-colour: white;
	--username-colour: hsl(0, 0%, 25%);
	--grayish: hsl(0, 0%, 80%);
	--read-colour: hsl(0, 0%, 30%);
	--red: red;
	--yellow: yellow;
	--blue: blue;
	--visited: #552a8b;
}

a { color: var(--blue) }
a:visited { color: var(--visited); }

summary { user-select: none; }

.post { margin: 0px; }
.post:nth-child(even) { background-color: var(--alternating-colour-even) }
.post:nth-child(odd)  { background-color: var(--alternating-colour-odd) }
.post {
	border-left: 1px solid var(--border-colour);
	border-right: 1px solid var(--border-colour);
	border-top: 1px solid var(--border-colour);
	width: 100%;
	box-sizing: border-box;
}
.post:last-of-type { border-bottom: 1px solid var(--border-colour); }

.post-heading,.post-footer { font-size: smaller; }
.post-heading,.post-footer,.username,.username:visited,nav#navbar .username {
	color: var(--username-colour); 
}
.username,nav#navbar .username{
	font-weight: bold;
	text-decoration: underline;
}
.post-heading-em { font-weight: bold; }
.post-content     { overflow: auto; }
.post-content   * { margin-bottom: 8px; margin-top: 8px; }
.post-content > *:first-child { margin-top: 2px }
.post-content > *:last-child { margin-bottom: 0}
.post-content { padding: 4px }
.post-heading-a { margin-left: 0.2em }
.post-heading-b { float: right; margin-right: 0.5em }

.post-footer { margin-left: 0.2em; font-style: italic; }

.post-anchor-link { color: var(--username-colour); }

div.deleted-post { 
	color:var(--light-colour); 
	background-color: var(--dark-colour) !important; 
	border-left: 1px solid var(--border-colour);
	border-right: 1px solid var(--border-colour);
	border-top: 1px solid var(--border-colour);
}
.deleted-post > .post-heading > * { 
	color: hsl(0,0%,85%);
}
.deleted-post > .post-heading > .post-heading-b > .post-anchor-link { 
	color: hsl(0,0%,60%); 
}
.deleted-post > .post-heading > .post-heading-a > .username { 
	color: hsl(0,0%,80%); 
}

.deleted-post > .post-footer {
	color: hsl(0,0%,80%); 
}

@media (prefers-color-scheme: dark) {
	.deleted-post > .post-heading > * { 
		color: hsl(0,0%,45%);
	}
	.deleted-post > .post-heading > .post-heading-b > .post-anchor-link { 
		color: hsl(0,0%,20%); 
	}
	.deleted-post > .post-heading > .post-heading-a > .username { 
		color: hsl(0,0%,40%); 
	}
	
	.deleted-post > .post-footer {
		color: hsl(0,0%,40%); 
	}

	div.deleted-post { 
		color: red;
		background-color: black !important;
	}
}

.thread-top-bar, .user-top-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	display: flex;
	margin-bottom: 4px;
	box-sizing: border-box;
}

.thread-top-bar-a {
	flex-wrap: wrap;
	margin-top: 5px;
	margin-bottom: 5px;
	box-sizing: border-box;
}

.thread-top-bar-b {
	margin-left: auto;
	box-sizing: border-box;
}

.thread-top-bar-b .tag {
	font-size: .9rem;
}

.user_info {
	border: 1px solid var(--border-colour);
	background-color: var(--alternating-colour-even);
	padding: 4px;
}
.user_bio_quote { width: max-content; max-width: 100% }
.user_bio_attribution { text-align: right; font-style: italic; }

dt { font-weight: bold }


.un-col-1 { color: hsl(0, 100%, 30%) }
.un-col-2 { color: hsl(22.5, 100%, 30%) }
.un-col-3 { color: hsl(45.0, 100%, 30%) }
.un-col-4 { color: hsl(67.5, 100%, 30%) }
.un-col-5 { color: hsl(90.0, 100%, 30%) }
.un-col-6 { color: hsl(112.5, 100%, 30%) }
.un-col-7 { color: hsl(135.0, 100%, 30%) }
.un-col-8 { color: hsl(157.5, 100%, 30%) }
.un-col-9 { color: hsl(180.0, 100%, 30%) }
.un-col-10 { color: hsl(202.5, 100%, 30%) }
.un-col-11 { color: hsl(225.0, 100%, 30%) }
.un-col-12 { color: hsl(247.5, 100%, 30%) }
.un-col-13 { color: hsl(270.0, 100%, 30%) }
.un-col-14 { color: hsl(292.5, 100%, 30%) }
.un-col-15 { color: hsl(315.0, 100%, 30%) }
.un-col-16 { color: hsl(337.5, 100%, 30%) }

@media (prefers-color-scheme: dark) {
	.un-col-1 { color: hsl(0, 100%, 70%) }
	.un-col-2 { color: hsl(22.5, 100%, 70%) }
	.un-col-3 { color: hsl(45.0, 100%, 70%) }
	.un-col-4 { color: hsl(67.5, 100%, 70%) }
	.un-col-5 { color: hsl(90.0, 100%, 70%) }
	.un-col-6 { color: hsl(112.5, 100%, 70%) }
	.un-col-7 { color: hsl(135.0, 100%, 70%) }
	.un-col-8 { color: hsl(157.5, 100%, 70%) }
	.un-col-9 { color: hsl(180.0, 100%, 70%) }
	.un-col-10 { color: hsl(202.5, 100%, 70%) }
	.un-col-11 { color: hsl(225.0, 100%, 70%) }
	.un-col-12 { color: hsl(247.5, 100%, 70%) }
	.un-col-13 { color: hsl(270.0, 100%, 70%) }
	.un-col-14 { color: hsl(292.5, 100%, 70%) }
	.un-col-15 { color: hsl(315.0, 100%, 70%) }
	.un-col-16 { color: hsl(337.5, 100%, 70%) }
}

img { max-width: 100% }

nav#navbar { 
	float: right;
	padding: 5px;
	margin: 2px;
	margin-bottom: 20px;
	border: 1px solid var(--border-colour);
	display:flex;
	align-items: center;
	flex-wrap: wrap;
}
nav#navbar p { margin-left: 15px; margin-top: 0; margin-bottom: 0; margin-right: 10px; padding: 0 }
nav#navbar p:first-of-type { margin-left:0.5em }
nav#navbar a { color: var(--blue); text-decoration: none }
nav#navbar .links { display: flex; }

nav.pages {
	display: flex;
	text-align: center;
	justify-content: space-between;
	margin-bottom: -1px;
	margin-top: -1px;
	padding: 5px;
	border: 1px solid var(--border-colour);
	background-color: var(--alternating-colour-even);
	top: -1px;
}
.pages-top { position: sticky; }

nav.pages .links > a:not([href]) { color: var(--gray); }

nav.pages .pageno { align-self: center; }

/* todo: make the navbar less bad */
.flashmsg { border: 1px solid var(--border-colour); background-color: yellow; max-width: max-content; padding: 5px; clear: both; color: black}

.listing:nth-of-type(even) { background-color: var(--alternating-colour-even) }
.listing:nth-of-type(odd) { background-color: var(--alternating-colour-odd) }

.listing {
	border-left: 1px solid var(--border-colour);
	border-right: 1px solid var(--border-colour);
	border-top: 1px solid var(--border-colour);
	margin-top: -1px;
	padding: 10px;
}
.listing:last-of-type { border-bottom: 1px solid var(--border-colour); }
.listing-main { 
	display: flex; 
	align-items: center;
	flex-wrap: nowrap;
}
.listing-title { 
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	flex-grow: 1;
	display: inline-block;
}

a.listing-title {
	text-decoration: none;
	color: var(--read-colour);
}

.unread .listing-title {
	text-decoration: underline;
	color: var(--dark-colour);
}

a.listing-time {
	text-decoration: none;
	color: var(--dark-colour) !important;
}

.listing-header, .listing-box, .more-subforums summary {
	font-weight: normal;
	font-size: smaller;
	border: 1px solid var(--border-colour);
	margin-top: -1px;
	margin-bottom: 0;
	padding: 2px 10px 2px 10px;
	text-align: center;
	color: var(--dark-colour);
}

.listing-header, .listing-box {
	background-color: var(--grayish);
}

.more-subforums:nth-child(even) {
	background-color: var(--alternating-colour-even)
}
.more-subforums:nth-child(odd) {
	background-color: var(--alternating-colour-odd)
}
.more-subforums summary:hover { background-color: hsl(0, 0%, 100%, 0.8); }
.more-subforums summary {
	padding: 8px;
}

details:not([open]).more-subforums ~ .hidden-subforum { display: none; }
details[open].more-subforums { display: none; }

.listing-message {
	margin: 0;
	padding: 20px;
	background-color: var(--alternating-colour-odd);
	color: var(--read-colour);
	text-align: center;
}

.thread-listing-tags { 
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	flex-shrink: 0;
}
.thread-listing-tags .tag { margin-left: 5px; }
.thread-listing-creation { 
	display: flex; 
	margin-left: 5px; 
	flex-wrap: nowrap; 
}
.thread-listing-creator { margin-right: 5px; }
.listing-caption { 
	font-size: smaller; 
	margin-top: 10px;
	white-space: nowrap;
}

a.thread-preview-post { 
	color: var(--dark-colour); 
	text-decoration: none; 
}

.preview-caption {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	align-items: center;
}
.thread-preview-post {
	display: inline-block;
	flex-grow: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	font-style: italic;
}
.thread-preview-ts { font-weight: bold; }

.thread-vote-summary {
	margin-top: 4px;
	margin-bottom: -8px;
}

/* wide screens */
@media all and (min-width: 600px) { 
	.listing-title { font-size: larger; }
}

/* small screens */
@media not all and (min-width: 600px) {
	body { padding: 2px; }
	.listing { padding: 4px; }
	.thread-listing-creation { font-size: small; }
	.thread-listing-creator {
		max-width: 75px; 
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	#the-word-page { display: none; }
	nav#pages > .pageno { font-size: small; }
}

.actionbutton::before {
	content: "[";
	color: var(--gray);
}
.actionbutton::after {
	content: "]";
	color: var(--gray);
}
.actionbutton,.actionbutton:visited {
	color:var(--blue);
	white-space: nowrap;
}

.new-post-box, .forum-desc-box {
	height:20em;
	min-height:20em;
	resize:vertical;
	width:100%;
	box-sizing: border-box;
	border:1px solid var(--border-colour);
	margin-top: 5px;
}

#polloptions {
	display: block;
	resize: vertical;
	border:1px solid var(--border-colour);
	margin-top: 5px;
	height: 5em;
	width: 100%;
	font-family: sans-serif;
}

main {
	max-width: 80ch;
	margin: auto;
}

blockquote {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 3px solid var(--gray);
}

label { user-select: none; }

fieldset { margin-bottom: 15px; }

.warning { color: var(--red); font-weight: bold }

.inline-form {
	display: inline-block;
}

.tag {
	display: inline-block;
	font-size: .75rem;
	padding: 1px 3px;
	border: 1px solid var(--border-colour);
	white-space: nowrap;
	max-width: 10ch;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	box-sizing: border-box;
}

a.tag {
	text-decoration: none;
}

.tag-editor { margin-left: 20px; display: inline-block; }
.tag-editor td { text-align: center; width: 12ch; }
.tag-editor input[type="text"] { width: 12ch; }
.tag-editor input[type="checkbox"] { width: 12ch; }
.new-tag { float: right; text-align: center; width: 12ch; margin-top: 10px }

.tag-selection {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.tag-selection input { vertical-align: top; }
.filter-tags { margin-bottom: 10px; }

.md table {
	border: 1px solid var(--gray);
	border-collapse: collapse;
}
.md table td,.md table th {
	border: 1px solid var(--gray);
	padding: 4px;
}

.role-input, .name-input { width: 12ch; }

.role-list { margin: 20px }
.role-list form { display: inline; margin: 20px }

.thing-id { color: var(--gray); font-size: smaller; font-weight: normal; }

.breadcrumbs {
	list-style: none;
}

.breadcrumbs li {
	display: inline;
}

.breadcrumbs li+li::before {
	content: "/\00a0";
	padding: 8px;
}

textarea {
	color: var(--dark-colour);
	background-color: var(--light-colour);
}

@media (prefers-color-scheme: dark) {
	:root {
		--alternating-colour-even: hsl(0, 0%, 5%);
		--alternating-colour-odd: hsl(0, 0%, 15%);
		--dark-colour: white;
		--border-colour: hsl(0, 0%, 35%);
		--gray: lightgray;
		--grayish: hsl(0, 0%, 20%);
		--light-colour: black;
		--username-colour: hsl(0, 0%, 80%);
		--read-colour: hsl(0, 0%, 70%);
		--yellow: rgb(212, 173, 0);
		--blue: rgb(78, 89, 255);
		--visited: rgb(173, 110, 209);
	}

	.un-col-1 { color: hsl(0, 100%, 70%) }
	.un-col-2 { color: hsl(22.5, 100%, 70%) }
	.un-col-3 { color: hsl(45.0, 100%, 70%) }
	.un-col-4 { color: hsl(67.5, 100%, 70%) }
	.un-col-5 { color: hsl(90.0, 100%, 70%) }
	.un-col-6 { color: hsl(112.5, 100%, 70%) }
	.un-col-7 { color: hsl(135.0, 100%, 70%) }
	.un-col-8 { color: hsl(157.5, 100%, 70%) }
	.un-col-9 { color: hsl(180.0, 100%, 70%) }
	.un-col-10 { color: hsl(202.5, 100%, 70%) }
	.un-col-11 { color: hsl(225.0, 100%, 70%) }
	.un-col-12 { color: hsl(247.5, 100%, 70%) }
	.un-col-13 { color: hsl(270.0, 100%, 70%) }
	.un-col-14 { color: hsl(292.5, 100%, 70%) }
	.un-col-15 { color: hsl(315.0, 100%, 70%) }
	.un-col-16 { color: hsl(337.5, 100%, 70%) }

	input { color: var(--dark-colour); background-color: var(--light-colour); }
	
	h1 { color: var(--dark-colour); }
	
	body { background-color: var(--light-colour); color: var(--dark-colour); }
}