html{
	--page-bgcolor: var(--back-course-bgcolor);
	scroll-padding-top: 50px;
}
div.root{
	grid-template-columns: max-content 1fr;
	grid-template-rows: auto auto minmax(150px, 1fr) auto;
	grid-template-areas:
      "header   header"
      "nav      nav"
      "outline  main"
      "footer   footer";

}
header.platineTile{
	grid-area: nav;
}
nav.outline{
	grid-area: outline;
	width: 100%;
	max-width: var(--outline-max-width);
	overflow: auto;
	background-color: var(--outline-bgcolor);
	border-right: 1px solid var(--outline-bdcolor);
}
.outline ul {
	list-style: none;
	margin: 0;
	margin-inline-start: calc(.6em - 1px);
	padding-inline-start: .6em;
	border-inline-start: 2px solid var(--outline-bdcolor);
}
.outline > div > ul {
	padding: .5rem;
	margin: 0;
}
.outline div {
	padding-block: max(.3rem, .3vw);
}
.outline a {
	padding-inline: max(.3rem, .3vw);
	font-weight: 500;
	color: var(--outline-color);
	background-color: var(--outline-bgcolor);
	text-decoration: none;
}
main{
	flex: 1;
	padding-inline: 1rem;
	padding-inline-start: 1rem;
	padding-block: 2rem 4rem;
	padding-block-start: 2rem;
	overflow: auto;
}
#content{
	max-width: var(--page-max-width);
	width: -moz-available;
	width: -webkit-fill-available;
	width: fill-available;
	margin: 0 auto;
}

@media not (max-width: 768px) {
	nav.outline + main {
		margin-inline-start: var(--outline-max-width);
		padding-inline-start: 2em;
		padding-block-start: 2em;
	}
	nav.outline {
		position: fixed;
		top: 12rem;
		display: block;
		bottom: 3rem;
		border: 1px solid var(--outline-bdcolor);
		border-end-end-radius: .5em;
		border-start-end-radius: .5em;
	}
}
@media (max-width: 768px) {
	div.root {
		grid-template-columns: 100%;
		grid-template-rows: auto auto 1fr auto auto;
		grid-template-areas:
"header "
"nav    "
"main   "
"outline"
"footer ";
	}
	.outline {
		max-width: -moz-available;
		max-width: -webkit-fill-available;
		max-width: fill-available;
		border-right: none;
	}
	.outline > div > ul {
		display: none;
	}}