/*documentation page styling*/
#documentation-view {
	grid-gap: 0;
	grid-template-columns: 30rem auto;
	grid-template-rows: 13vh 87vh;
	grid-template-areas:
		"title 			details"
		"overview		details";
}

#documentation-view #title {
	grid-area: title;
	padding: var(--spacing-2) var(--spacing-3);
}

#documentation-overview {
	grid-area: overview;
	font-size: var(--fg-size-small);
	overflow-y: auto;
	padding: var(--spacing-1) 0;
}

#documentation-overview a {
	display: block;
	padding: var(--spacing-1) var(--spacing-3);
	color: var(--fg-color-normal);
	border-width: 0;
	border-radius: var(--border-radius);
}

#documentation-overview a:hover {
	background-color: var(--bg-color-dull);
}

#documentation-overview a:active {
	background-color: var(--bg-color-dark);
	font-weight: var(--fg-weight-bold);
}

#documentation-details {
	--container-width: 900px;
	grid-area: details;
	overflow-y: auto;
}

#documentation-details button {
	margin-top: var(--spacing-3);
}

#documentation-details p {
	text-align: justify;
}

#documentation-details .note {
	font-weight: var(--fg-weight-bold);
	color: var(--accent-color-primary);
}

#documentation-details section {
	padding: var(--spacing-3) 0;
}

#documentation-details pre {
	margin: var(--spacing-2) 0;
}

#documentation-details code {
	padding: var(--spacing-3);
}

@media only screen and (max-width: 950px) {
	#documentation-view {
		grid-template-columns: auto;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"title"
			"overview"
			"details";
	}

	#documentation-overview, #documentation-details { overflow: auto; }

	#documentation-overview a {
		font-size: var(--fg-size-normal);
	}
}