Template:Infobox NPC/styles.css

/* Villager infobox: the wooden frame panel with a large character portrait.
   Hex values match the palette in MediaWiki:Common.css. */

.sh-infobox {
	float: right;
	clear: right;
	width: 280px;
	margin: 0 0 1em 1em;
	background: #FBF1E1;
	color: #2C1810;
	border: 6px solid #8B5A2B;
	border-radius: 10px;
	box-shadow: 3px 4px 0 rgba(93, 58, 26, 0.5);
	font-size: 0.92em;
	line-height: 1.4;
}

@media (max-width: 720px) {
	.sh-infobox {
		float: none;
		clear: none;
		width: auto;
		max-width: 380px;
		margin: 0 auto 1em;
	}
}

.sh-infobox-title {
	background: #8B5A2B;
	color: #FFF8F0;
	font-family: 'VT323', monospace;
	font-size: 1.7em;
	line-height: 1.2;
	letter-spacing: 0.5px;
	text-align: center;
	padding: 3px 10px;
}

.sh-infobox-image {
	text-align: center;
	padding: 10px 10px 4px;
}

/* Portraits are detailed high-res art, so render them smoothly (not pixelated
   like the small item icons) and frame them. */
.sh-npc-portrait img {
	image-rendering: auto;
	border: 3px solid #C9A66B;
	border-radius: 6px;
}

.sh-infobox-desc {
	font-style: italic;
	font-size: 0.95em;
	color: #8A7A6E;
	text-align: center;
	padding: 0 14px 4px;
}

.sh-infobox-rows {
	padding: 4px 10px 10px;
}

.sh-infobox-section {
	font-family: 'VT323', monospace;
	font-size: 1.3em;
	letter-spacing: 0.5px;
	color: #5D3A1A;
	background: rgba(201, 166, 107, 0.35);
	border-radius: 4px;
	text-align: center;
	margin: 8px 0 2px;
	padding: 0 6px;
}

.sh-infobox-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 4px 2px;
	border-bottom: 2px solid #C9A66B;
}

.sh-infobox-row:last-child {
	border-bottom: none;
}

.sh-infobox-label {
	flex: 0 0 42%;
	font-family: 'VT323', monospace;
	font-size: 1.15em;
	color: #5D3A1A;
}

.sh-infobox-value {
	flex: 1;
}