:root {
	--bg: #f5f5f5;
	--fg: #f5f5f5;
	--border: #000000;
	--font: 'ms ui gothic';
}

body {
	display: flex;
	justify-content: center;
	font-family: var(--font);
	background-color: var(--bg);
}

header {
	display: flex;
	height: 100px;
	padding: 10px;
}

/* == BOXES == */
.wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	
	width: 800px;
	height: auto;
	margin: 10px;
	padding: 10px;
	border: 2px solid var(--border);
}

.header-box {
	position: relative;
}

.grid {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 150px 650px;
}

.navbar {
	grid-column: 1/1;
	padding: 5px;
	border-right: 1px solid var(--border);
}

.main {
	grid-column: 2/2;
	grid-row: 1/2;
	display: grid;
}