* {
 	box-sizing: border-box;
}

body {
  	margin: 0;
	background-color: #000;
	color: #fff;
	font-family: 'Arial';
	font-weight: bold;
}

.header {
 	background: #000;
 	color: #fff;
}

.navbar {
	display: flex;
 	background-color: #000;
	padding-bottom: 10px;
}

.navbar a {
 	color: white;
 	padding: 10px;
 	text-decoration: none;
}

.navbar a:hover {
  	background-color: #ddd;
  	color: black;
}

.row {  
  	display: flex;
  	flex-wrap: wrap;
}

.side {
  	flex: 30%;
  	background-color: #000;
  	padding: 20px;
}

.main {
  	flex: 70%;
  	background-color: #fff;
  	color: #000;
  	padding: 0 10px 10px 10px;
}

.footer {
  	padding: 20px;
  	background: #000;
	color: #fff;
}

.footer a:visited, .footer a, a:visited {color:#fff;}

span.firstname {
	color: #00b0f0;
}

span.lastname {
	color: #bec0c2;
}

a {
	text-decoration: none;
}

.freeofthc {
	padding-bottom: 2&;
}

.freeofthc h2 {font-weight:bold;}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack
on top of each other instead of next to each other */
@media screen and (max-width: 376px) {
  .row, .navbar {   
    flex-direction: column;
  }
}