body {
	height: 100%;
}

body > main {
	height: 100%;

	display: inline-grid;
	grid-template-columns: 15rem 0px auto;
	grid-template-rows: 100%;
	overflow: hidden;
}

@media screen and (max-width: 710px) {
	body > main:has(details[open])  {
		grid-template-columns: 0px auto auto;
	}

	body > main:has(details[open]) > section  {
		margin-left: 2.75rem;
	}

	body > main:has(details[open]) :where(aside, section) {
		grid-area: 1 / 3;
	}

	body > main > details[open] {
		grid-area: 1 / 1;
		width: 2rem;
		margin-left: 15rem;
		z-index: 1;
		border-right: 2px solid var(--dark-blue-color);
	}

	body > main {
		grid-template-columns: 0px 2rem auto;
	}
}

body > main > aside {
	max-width: 15rem;
	background-color: #3f3e4f;
	z-index: 1;
	padding: 0.5rem;
	padding-top: 1rem;

	display: grid;
	grid-template-columns: 100%;
	align-content: start;
}

body > main > :where(aside, section) {
	overflow: hidden;
}

:where(aside, aside details, aside summary) > a {
	margin: auto;
	font-style: normal;
	text-decoration: none;
	color: #bfb797;
}

body > main > aside > b {
	margin-top: 1rem;
}

aside > b > a {
	text-decoration: none;
	color: var(--f-blue-color);
}

aside a {
	text-align: center;
}

aside :where(details, summary) {
	background-color: #ff000000 !important;
	text-align: center;
	padding: 0;
	margin: 0;
}

aside details > a {
	color: chocolate !important;
}

body > main > details {
	background-color: var(--s-blue-color);

	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 2;
}

body > main > details > summary {
	height: 100%;

	display: grid;
	align-content: center;
	justify-content: center;
	position: relative;
	z-index: 10;
}

body > main > details > summary::marker {
	content: '';
}

body > main > section {
	padding: 1rem;
	overflow-y: auto;
	scroll-behavior: smooth;
	text-align: justify;
}

body > main > section hr {
	margin: 2rem 0;
	border-top: none;
	border-bottom: 1px solid #8b97a2;
}

.tblue {
	color:#4f4fff;
}

.warn {
	color: #9d5031;
}

.info {
	color: darkolivegreen;
}