/*
Kaiya's site: colours and content styles. The sidebar layout itself is shared
(shared/static/assets/css/sidebar.css, loaded first). The colours and sizes
are the original IONOS-era design; the classes below .kmsub replace inline
style="" attributes, which the Content-Security-Policy does not allow.
*/

:root{
	--sb-body-bg: #ffffff;
	--sb-top: #f158c8;
	--sb-side: #fe9be4;
	--sb-sub: #f6cdeb;
	--sb-accent: #fe9be4;
	--sb-burger-hover: #fe9be4;
	--sb-content-bg: #f1f1f1;
	--sb-side-pad-top: 10px;
	--sb-profile-h: 100px;
	--sb-bar-pad-right: 0px;
	--sb-hidden-pad: 255px;
}

.kmbody{
	background: #f1f1f1;
	margin: 12px;
	font-size: 26px;
}

.kmbody i{
	color: #f158c8;
}

.kmbody .kmthead{
	text-align: center;
	font-size: 120%;
	font-weight: bold;
}

.kmbody .kmt1{
	font-size: 110%;
	font-weight: bold;
	font-style: italic;
}

.kmbody .kmt2{
	font-size: 100%;
}

/* were inline style="" attributes */
.kmsub    { font-weight: bold; }
.kmsub-lg { font-size: 130%; font-weight: bold; }
.kmsub-sm { font-size: 90%; font-weight: bold; }
.bold     { font-weight: bold; }
.top      { vertical-align: top; }
.center   { text-align: center; }

/* Images keep their intended width but shrink to fit, without stretching. */
.kmbody img{
	max-width: 100%;
	height: auto;
}

/* In the picture + text tables a percentage max-width collapses the cell, so
   on desktop those images keep their width="" as they did originally. */
.kmbody td img{
	max-width: none;
}

.kmbody .video{
	display: block;
	width: 100%;
	max-width: 728px;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

@media (max-width: 700px){
	.kmbody{
		font-size: 19px;
	}
	/* side-by-side picture + text tables stack instead */
	.kmbody table,
	.kmbody tr,
	.kmbody td{
		display: block;
		width: 100%;
	}
	.kmbody td img{
		max-width: 100%;
	}
}