style.css

:root {
	--main-color: #0A6847;
	--secondary-color: #7ABA78;
	--background-color: #FEF3E2;
	--contrast-color: #FCDE70;
	--main-font: Helvetica, sans-serif;
	--accent-font: Georgia, serif;
	--monospace-font: 'Courier New', monospace;
}
	
 * {
	box-sizing: border-box;
}

body {
	font-family: var(--main-font);
	background-color: var(--background-color); 
	color: var(--main-color);
	margin: 0;
}

.header {
	padding: 80px;
	text-align: center;
	background: var(--main-color);
	color: var(--background-color);
}
.header h1 {
	font-size: 40px;
	font-family: var(--accent-font);
}
		
.navigationBar {
	overflow: hidden;
	background-color: var(--secondary-color);
}
.navigationBar a {
	float: left;
	display: block;
	text-align: center;
	padding: 14px 20px;
	text-decoration: none;
	color: var(--main-color);
}
.navigationBar a.right {
	float: right;
}
.navigationBar a:hover {
	background-color: var(--contrast-color);
	color: var(--main-color);
}

.columnContainer {
	display: flex;
	flex-wrap: wrap;
}
.columnContainer h2 {
	font-family: var(--accent-font);
}
.columnContainer a {
	color: var(--secondary-color)
}
.side {
	flex: 30%;
	padding: 20px;
	border-right: 3px solid var(--secondary-color);
}
.main {
	flex: 70%;
	padding: 20px;
}

.footer {
	padding: 20px;
	text-align: center;
	background: var(--main-color);
	color: var(--background-color);
}
.footer a {
	color: var(--background-color);
}

@media screen and (max-width: 700px) {
	.columnContainer {
		flex-direction: column;
	}
	.side {
		border-right: none;
		border-bottom: 3px solid var(--secondary-color)
	}
	.header {
		padding: 20px;
	}
}

@media screen and (max-width: 400px) {
	.navigationBar a {
		float: none;
		width: 100%;
	}
}