* {
	box-sizing: border-box;
	/*border: solid 1px;*/
}

:root {
	--third: 0px;
	--quarter: 0px;
	--card-color: #D7DEDC; /*Gainsboro*/
}

body, html {
	font-family: 'Montserrat', sans-serif;
	height: 98%;
	width: 100%;
	margin: 0;
}

header {
	width: 100%;
	height: 8%;
	text-align: center;
	margin: 20px 0;
	font-size: 2.5em;
	text-transform: uppercase;
}

#main {
	width: 100%;
	margin: 0;
}

.card {
	display: inline-block;
	box-sizing: border-box;
	height: 200px;
	width: 300px;
	border: black solid 1px;
	border-radius: 15px;
	padding: 10px;
	text-align: center;
	background: var(--card-color);
}

.card * {
	text-decoration: none !important;
	color: black;
}

/*removes link underlines thoroughly*/
a:link { text-decoration: none !important; }
a:hover { text-decoration: none !important; }
a:active { text-decoration: none !important; }
a:visited { text-decoration: none !important; }

.title {
	font-size: 1.5em;
	transition: all 1s;
	text-decoration: none;
	color: black;
}

@media (max-width: 726px) {
	.card {
		display: block;
		margin: 20px auto;
	}
}

@media (min-width: 727px) {
	.card {
		margin: 20px 0;
	}
	.aCard {
		float: left;
		margin: 20px var(--third);
	}
	.bCard {
		float: right;
		margin-right: var(--third);
	}
}