body {
	margin: 0;

}

.root {
	width: 100%;
	height: 100%;
	display: grid;

	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 10fr 1fr;

	grid-template-areas:
		"nav header"
		"nav main"
		"nav footer";
}

.root {
	grid-template-areas:
		"header" "main" "footer";
	grid-template-columns: 1fr;
}

.root > nav {
	z-index: 1;
	position: absolute;

	max-width: 20em;

	transition: 1s;
}

.root > nav.hidden {
	left: -20em;
}

.root > header {
	background-color: blue;
	grid-area: header;
}

.root > nav {
	background-color: black;
	color: white;

	min-height: 100vh;
	grid-area: nav;
}

nav .toggle-button {
	position: absolute;
	right: -10em;

	width: 10em;
	height: 10em;

	/* lower right */
	border-radius: 0 0 1em 0;

	background-color: black;

	display: grid;
	place-items: center;
}

.root > main {
	background-color: green;
	grid-area: main;
}

.root > footer {
	background-color: red;
	grid-area: footer;
}