:root {
	--dark1: #1E232B;
	--dark2: #2A2E34;
	--dark3: #3B3F46;
	--light1: #EC9C04;
	--light2: #F5B301;
	--light3: #FED053;
	--text: white;
}

body {
	margin: 0px;
	background-color: var(--dark1);
	background-image: linear-gradient(to bottom right, var(--dark1), var(--dark2));
	color: var(--text);
}

.container {  
	display: grid;
	grid-template-columns: min-content 1fr;
	grid-template-rows: min-content 1fr;
	grid-auto-flow: row;
	grid-template-areas:
		"Header Header"
		"Sidebar Content"
		"Footer Footer";
	width: 100vw;
	height: 100vh;
}

.logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 35%;
}

.Header { 
	grid-area: Header;
	border-bottom: 2px solid var(--dark3);
	padding: 16px;
	text-align: center;
}

.Navigation {
	padding: 8px;
}
/*
.Sidebar { 
	grid-area: Sidebar;
	border-right: 2px solid var(--dark3);
	padding: 16px;
}*/

.Content {
	grid-area: Content;
	margin-left: auto;
	margin-right: auto;
}

.Footer { 
	grid-area: Footer;
	padding: 16px;
	border-top: 2px solid var(--dark3);
}

.ContentBlock {
	display: inline-block;
	background-color: var(--dark1);
	border: 2px solid var(--dark3);
	border-radius: 8px;
	padding: 16px;
	margin: 16px;
}

a {
	color: var(--light2);
	text-decoration: none;
}

a:hover {
	color: var(--light3);
}