Malline:Hahmo/styles.css

.kw-infobox {
	width: 320px;
	margin: 0 0 24px 34px;
	float: right;
	border: 1px solid #76501f;
	background: rgba(42, 27, 12, 0.92);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.42);
	color: #ead29a;
	font-size: 14px;
}

.kw-infobox__title {
	padding: 8px 12px;
	border-bottom: 1px solid rgba(190, 132, 54, 0.55);
	color: #e7b258;
	font-size: 21px;
	text-align: center;
}

.kw-infobox__image img {
	display: block;
	width: 100%;
	height: auto;
}

.kw-infobox dl {
	display: grid;
	grid-template-columns: 42% 58%;
	margin: 0;
}

.kw-infobox dt,
.kw-infobox dd {
	margin: 0;
	padding: 9px 11px;
	border-top: 1px solid rgba(190, 132, 54, 0.25);
}

.kw-infobox dt {
	color: #d89a42;
	font-weight: bold;
}

.kw-lead {
	font-style: italic;
	font-weight: bold;
}

.kw-detail-box {
	clear: left;
	max-width: 830px;
	margin: 14px 0;
	border: 1px solid rgba(104, 62, 16, 0.36);
	background: rgba(224, 190, 128, 0.3);
}

.kw-detail-box__title {
	padding: 8px 11px;
	color: #5b340b;
	font-weight: bold;
	cursor: pointer;
}

.kw-detail-box .mw-collapsible-content {
	padding: 0 11px 11px;
}

.kw-runes span {
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 2px 8px;
	border: 1px solid rgba(91, 52, 11, 0.45);
	background: rgba(240, 211, 151, 0.38);
}

.kw-relations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
	gap: 18px;
}

.kw-relations h3 {
	margin: 0 0 5px;
	font-size: 18px;
}

.kw-relation-group ul {
	margin-top: 0;
	padding-left: 18px;
}

.kw-runo-text {
	max-width: 760px;
	padding: 16px 18px;
	border-left: 3px solid rgba(104, 62, 16, 0.35);
	background: rgba(255, 236, 187, 0.22);
	line-height: 1.7;
}

.kw-ai-draft {
	margin: 0 0 20px;
	padding: 12px 15px;
	border: 1px solid #9b6727;
	background: rgba(74, 45, 12, 0.12);
	color: #4d2a08;
}

@media (max-width: 640px) {
	.kw-infobox {
		width: 100%;
		margin: 0 0 18px;
		float: none;
	}
}