main.css

:root {
/*
	--theme-white: #fafef7;
	--theme-green: #6fbf36;
	--theme-orange: #fd6c1f;
	--theme-light-blue: #1855fe;
	--theme-dark-blue: #0a1639;
*/
	--main-bg: #e1e9ff;
	--feed-background: #fafef7;
	--sec-bg: #6fbf36; 
	--nav-bg: #1855FE;
	--nav-fg: #FD6C1F;
	--feed-color: #f1f1f1;
	--feed-hov: #e1e1e1;
	--body-color: #fafef7;

}

body {
	width: 90%;
	max-width: 1100px;
	position: relative;
	margin: auto;
  font-family: Arial;
  padding: 20px;
  background: var(--main-bg);
/* #f1f1f1; */
}

.header {
  font-size: 40px;
  text-align: center;
  background: var(--sec-bg);

	margin-top: -21px;
	padding: 10px;

	border-style: solid;
	border-width: 2px;
	border-bottom-width: 0px;
}
#subtitle {
	font-size: 14px;
}
img {
	width: 100%;
}

/* NAVIGATION */
	#nav {
		width: 100%;
		height: 100%;
		background-color: var(--nav-bg);
		position: relative;
	}
	#nav ul {
		list-style-type: none;
		margin: 0;
		padding-right: -5px;
		padding: 0px;
		position: relative;
		border-style: solid;
		border-width: 2px;
	}
	#nav ul li {
		display: inline-block;
		border-right-style: solid;
		border-right-width: 2px;
	}
	#nav ul li a { 
		display: block;
		padding: 8px 15px;
		text-decoration: none;	
		color: var(--theme-white);
		position: relative;
	}
	#nav ul li a:hover { 
		background-color: var(--nav-fg);
		text-decoration: underline;
		color: var(--theme-white);
	}
	#location {
		background-color: var(--nav-fg);
		text-decoration: underline;
	}

/* Add a card effect for articles */
.card {
  background-color: white;
  padding: 20px;
	margin-top: 0px;
	margin-bottom: 0px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: var(--sec-bg);
  margin-top: 0px;
	border-style: solid;
	border-width: 2px;
}