:root {
	--headerHeight: 3rem;
	--navigationWidth: 15rem;
	--contentMaxWidth: 50rem;
	--headerBackground: rgb(230, 230, 230);
	--navigationBackground: rgb(249, 249, 249);
}

html {
	font-family: sans-serif;
}

body {
	font-family: sans-serif;
	margin: 0px;
	height: 100%;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
	background: var(--borderColor);
}

#header {
	height: var(--headerHeight);
	background: var(--headerBackground);
	display: flex;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1rem;
	padding-right: 1rem;
}

#header img {
	vertical-align: bottom;
}

#header p {
	flex-grow: 1;
	max-width: 47rem;
}

#header button {
	width: 8rem;
	padding: 0.3rem;
	background: var(--navigationBackground);
	border: thin solid #AAA;
	border-radius: 2px;
}

#container {
	position: absolute;
	left: 0px;
	top: var(--headerHeight);
	width: 100%;
	height: calc(100% - var(--headerHeight));
	display: flex;
}

#navigation {
	width: var(--navigationWidth);
	max-width: var(--navigationWidth);
	background: var(--navigationBackground);
	height: 100%;
	line-height: 2rem;
}

#navigation ul {
	padding-top: 1.2rem;
}

#navigation li {
	list-style: none;
}

#content {
	width: 100%;
	max-width: var(--contentMaxWidth);
	padding-top: 1.2rem;
	padding-left: 4rem;
	padding-right: 3rem;
	overflow-y: scroll;
	text-align: justify;
}

a {
	text-decoration: none;
}