/*:root {
	--mid-green: #BBD0B3;
	--light-green: #DDE7C8;
	--bone-white: #F4F2EE;
	--mid-blue: #99AED0;
	--mid-grey: #6D7D8B;
	--text-black: #1A1F16;
}*/

:root {
	--snow-white: #F5F7F6;
	--fjord-mist: #E2E8E6;
	--glacier-blue: #C7D6DD;
	--pine-grey: #7A8F8A;
	--charcoal-stone: #2E3A3F;
}

html, body {
	height: 100%;
	margin: 0;
}

body {
	background: var(--glacier-blue);
	color: var(--charcoal-stone);
	display: flex;
	flex-direction: column;

}

main {
    flex: 1;
    padding: 20px;
    background-color: var(--snow-white);
}
   
}

/*header*/
h1 {
	color: var(--charcoal-stone);
	text-align: left;
}

footer {
	text-align: center;
	padding: 20px;
}

/*navigation bar*/
nav {
	padding: 20px 0;
	text-align: center;
	margin-left: 20px;
}

nav a {
	text-decoration: none;
	padding: 10px;
	font-weight: bold;
	color: var(--charcoal-stone);
}

nav a.active {
	text-decoration: none;
	padding: 10px;
	font-weight: bold;
	color: var(--charcoal-stone);
	background: var(--fjord-mist);
	border-radius: 5px;

}

nav a:not(.active):hover {
	color: var(--fjord-mist);
	background-color: var(--pine-grey);
	border-radius: 5px;
}

.container {
	text-align: left;
	padding: 20px;
	background-color: var(--snow-white);
	color: var(--charcoal-stone);
	margin: 20px 0;
	border-radius: 5px;
}

.page-layout {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 250px;
    background-color: var(--glacier-blue);
    padding: 20px;
    box-sizing: border-box;
}

.sidebar h2 {
    margin-top: 0;
    color: var(--charcoal-stone);
}

.sidebar a {
    display: block;
    padding: 10px;
    margin-bottom: 5px;
    color: var(--charcoal-stone);
    text-decoration: none;
    border-radius: 5px;
}

.sidebar a:hover {
    background-color: var(--pine-grey);
    color: var(--fjord-mist);
}

.sidebar a.active {
    background-color: var(--fjord-mist);
    color: var(--charcoal-stone);
    font-weight: bold;
}

/*highlighting*/
/* Chrome, Edge, Safari */
::selection {
  background: var(--pine-grey);
  color: var(--snow-white);
}

/* Firefox */
::-moz-selection {
  background: var(--pine-grey);
  color: var(--snow-white);
}