@media (prefers-color-scheme: dark) {
	html, dialog, input, textarea, button {
		background-color: #000;
		color: #fff;
	}
	a { color: #08f; }
	a:visited { color: #88f; }
}

.user-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.user {
	display: flex;
	gap: 1em;
	text-decoration: none;
}
.user:any-link {
	color: inherit;
}
.user-avatar {
	height: 3em;
	width: 3em;
}
.user-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.post-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.post {
	display: flex;
	flex-direction: column;
	gap: 1em;
	max-width: 36em;
}
.post-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* remove margin when the flex spacing does the same job */
.post-content p:first-child {
	margin-top: 0;
}
.post-content > p:last-child, .post-content > details > p:last-child {
	margin-bottom: 0;
}

.profile {
	display: flex;
	flex-direction: column;
	max-width: 36em;
	gap: 1em;
}
.profile-banner {
	width: 100%;
}
.profile-header {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
	align-items: center;
}
.profile-avatar {
	height: 12em;
	width: 12em;
}
.profile-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.profile-field-list {
	display: grid;
	grid-template-columns: auto auto;
}
.profile-field-list p {
	/* some instances wrap them in <p>, they shouldn't be displayed that way */
	margin: 0;
}