/* Thanks w3schools for the template concepts and lessons */

* {
	box-sizing:	border-box;
	border-radius:	8px;	/* rounded corners */
	/* color:	#333; */
	color:	white;
}

body {
    /* background-color:	#009900; */
	background-color:	black;
	padding:	5px;
	max-width:	900px;
	margin:	auto;	/* this is what centers the content */
	font-family: "Helvetica";

}

.header {
	padding:	0px;
	margin:		0px;
	text-align:	center;
	background-color:	#111;
	border-color:	#040;
	border-style:	solid;
	
}
.header h1 {
    /* color:	navy; */
	color:	white;
	font-size:	50px;
	margin:	0px;
	font-family: "Times News Roman";
}


.topnav {
	overflow:	hidden;
	background-color:	#333;
	position:	-webkit-sticky;	/* safari */
	position:	sticky;
	top:	0;
	border-color:	#040;
	border-style:	solid;
}
.topnav a {
	float:	left;
	display:	block;
	color:	#f2f2f2;
	text-align:	center;
	padding: 8px 16px;
	text-decoration:	none;
	/* border-right:	1px solid; */
	border-radius:	0;
	/* No browser supports this at the moment, and likely never
	target-name:	new;
	target-new:	tab;	*/
}.topnav a:last-child {
	border-right:	0;
}
.topnav a:hover {
	background-color: #ddd;
	color: black;
}

.leftcolumn {
	float:	left;
}
.rightcolumn {
	float:	left;
	width:	5%;
	padding-left:	5px;
}

.card {
	/* background-color:	#fff; */
	background-color:	#111;
	padding:	8px;
	margin-top:	5px;
	margin-bottom:	5px;
	/* the lovely green was: border-color:	#00ff00; */
	border-color:	#333;
	border-style:	solid;
}
.card h2{
	float:	left;
	margin-top:	0.2px;
	margin-bottom:	0.2px;
}
.card h5{
	text-align:	right;
	margin-top: 0.2em;
	margin-bottom:	0.2em;
}
.card-anchor {
	/* background-color:	#fff; */
	background-color:	#111;
	padding:	8px;
	margin-top:	5px;
	border-color:	#040;
	border-style:	solid;
}
.card-anchor h2{
	margin-top:	0.2px;
	margin-bottom:	0.2px;
}

/* these both seem to be overflow resolvers */
.row:after {
	content:	"";
	display:	table;
	clear:	both;
}
.card::after {	/* why does this one have double '::'? Look into this later */
	content:	"";
	display:	table;
	clear:	both;

}

.footer {
	padding:	2px;
	text-align:	center;
	/* background: white; */
	background: #111;
	border-color:	#040;
	border-style:	solid;
	margin-top:	5px;
}

.img {
	max-width:	100%;
	height:	auto;
	padding:	5px;
	float:	right;
}
.img-icon {
	height:	32px;
}

/*responsive 800px */
@media screen and (max-width: 800px) {
	.leftcolumn, .rightcolumn {
		width:	100%;
		padding:	0;
	}
}
/*responsive 400px */
@media screen and (max-width: 400px) {
	.topnav a {
		float:	none;
		width:	100%;
	}
}