body, body.chatbox { font-family: "Yet R", serif; background: var(--white); }

.chatbox > header {
	justify-content: space-between;
}

.page-content {
	padding: 1rem 1.25rem;
	moz-box-sizing: border-box; webkit-box-sizing: border-box; box-sizing: border-box;
	overflow-y: scroll;
}

h1, h2, h3 {
	font-family: "Super Comic", sans-serif;
	color: var(--dd-blue);
}

h1 { margin: 0; }

#page-nav {
	width: fit-content;
	border: 4px var(--blue) solid;
	border-radius: .5em;
	
	> header {
		padding: .25em .6em .25em .6em;
		background: var(--blue);
		h2 { color: var(--white); }
	}
	
	.content {
		padding: .5em .75em .6em .75em;
	}
	
	h2 { margin: 0; }
	h3 { margin: 0; }
	
	a { display: block; }
	a, a:link, a:visited { color: var(--d-blue); }
	a:hover { color: var(--purple); }
}

main {
	max-width: 40rem;
	padding-bottom: 1rem;
}

.category {
	display: flex;
	flex-flow: column nowrap;
	gap: 1rem;
}
.category > header h2 {
	margin-bottom: 0;
}

.style {
	line-height: 1.25;
}
.style h4 {
	margin: 0;
	text-transform: uppercase;
	color: var(--d-blue);
}
.style > :not(h4) { margin-left: 1em; }
.style hr { margin-top: .25em; }
.style .format, .style hr {
	border: none;
	border-bottom: 2px var(--l-blue) dotted;
	margin-bottom: .25em;
}
.style .format { padding-bottom: .25em; }
.style .format::before {
	content: 'format: ';
}

/* text emoticons */
.tq-e {
	background: var(--yellow);
	border: 2px var(--orange) solid;
	color: var(--dd-blue);
	display: inline-block;
	padding: .1em;
	min-width: 1.25em;
	height: 1.25em;
	line-height: 1.25em;
	text-align: center;
	border-radius: 50%;
	margin: .1em 0;
}