/* Sidepage-specific shared styles for rules.html and guides.html */
/* Content boundary system - ensure proper spacing on all devices */
.maintext {
	color: var(--white);
	margin-right: 10%;
	margin-left: 10%;
	margin-bottom: 10vh;
	background-color: var(--content-black);
	padding-bottom: 50px;
	position: relative;
	z-index: 0;
}

.block-entry-top {
	position: relative;
	margin-left: 0px;
	margin-right: 0px;
	min-height: 200px;
	display: flex;
	overflow: auto;
	border: 5px;
	border-style: solid;
	border-color: var(--border-gray);
}

.block-entry {
	position: relative;
	margin-left: 0px;
	margin-right: 0px;
	min-height: 200px;
	display: flex;
	overflow: auto;
	border-left: 5px;
	border-right: 5px;
	border-top: 0px;
	border-bottom: 5px;
	border-style: solid;
	border-color: var(--border-gray);
}

.lefty-image {
	display: block;
	border: 20px;
	border-style: solid;
	border-color: var(--transparent);
	overflow: auto;
	min-width: 280px;
	min-height: 150px;
	flex-shrink: 0;
}

.lefty-textblock {
	flex: 1;
}

.block-entry-right {
	position: relative;
	margin-left: 0px;
	margin-right: 0px;
	min-height: 200px;
	display: flex;
	flex-direction: row-reverse;
	overflow: auto;
	border-left: 5px;
	border-right: 5px;
	border-top: 0px;
	border-bottom: 5px;
	border-style: solid;
	border-color: var(--border-gray);
}

.righty-textblock {
	flex: 1;
	text-align: right;
}

.righty-title {
	margin-top: 16px;
	font-size: 28px;
}

.righty-text {
	margin-left: 50px;
	font-size: 24px;
}

.lefty-title {
	margin-top: 16px;
	font-size: 28px;
}

.lefty-text {
	margin-right: 50px;
	font-size: 24px;
}

/* Typography for sidepages - scoped to prevent cross-page overrides */
.maintext h1 {
	font-size: 32px;
	margin-left: 20px;
	text-align: center;
	color: var(--yellow);
}

.maintext h3-version {
	font-size: 24px;
	text-align: center;
	margin-left: 20px;
	display: block;
}

.maintext h2 {
	font-size: 28px;
	margin-left: 24px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: justify;
	color: var(--yellow);
}

.maintext h3 {
	font-size: 24px;
	margin-left: 28px;
	margin-top: 10px;
	text-align: justify;
	text-decoration: underline;
}

.maintext p {
	font-size: 16px;
	margin-left: 32px;
	margin-right: 20px;
	text-align: justify;
	color: var(--light-gray);
}

.maintext ul.a {
	font-size: 16px;
	margin-left: 48px;
	list-style-type: circle;
}


@media screen and (min-width: 1150px) {
	
	.maintext h1 {
		font-size: 42px;
	}
	
	.maintext h2 {
		font-size: 36px;
	}
	
	/* Group all elements with font-size: 28px */
	.maintext h3,
	.maintext h3-version,
	.lefty-title,
	.righty-title {
		font-size: 28px;
	}
	
	/* Group all elements with font-size: 20px */
	.maintext p,
	.maintext ul.a,
	.lefty-text,
	.righty-text {
		font-size: 20px;
	}
}