:root {
	--main-color: white;
	--background-color: #333A51;
	--background-accent: #315378;
}

* {
	box-sizing: border-box;
}

body {
	color: var(--main-color);
	background-color: var(--background-color);
	margin: 0;
}
#page-container {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.links {
	background-color: var(--background-accent);
	list-style-type: none;
	font-size: 1.1em;
	
	
	display: flex;
	justify-content: flex-start;
}

.links.link {
	height: 100%;
	padding: 5px 10px;
	
	display: flex;
	align-items: center;
	justify-content: center;
}

.link {
  text-decoration: none;
	
  height: 100%;
	padding: 5px 10px;
}
.link a {
  text-decoration: none;
  color: var(--main-color);
}

/**
 * Header Section
 */
/*#header a {
	text-decoration: none;
	color: var(--main-color);
}*/

#top-bar {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	
	background-color: var(--background-accent);
	border-bottom: 2px solid var(--main-color);
}

#home-link {
	padding: 10px;
}

#home-link h1 {
	margin: 0;
}


.current-page a {
	border-bottom: var(--main-color) 1px solid;
}

/**
 * Body Section
 */
#body-container {
  flex-basis: 100%;
  margin-left: 10px; 
  flex-grow: 1;
}

#body-container h2 {
	margin-bottom: 0;
}

.page-footer {
  width: 100%;
	background-color: var(--background-accent);
}