:root {
	--background: rgb(241, 241, 241);
	--card: #BFAFDB;
	--primary: #d3d3d6;
	--accent: #9f9fa8;
	--accent_card: #c2b4da;
	--hover_accent: #BFAFDB;
	--text: #555561;
	--border: #BFAFDB;
	--hover_issue: #b7c9ec;
}

* {
	font-family: sans-serif;

	margin: 0px;
	padding: 0px;
}

body {
	width: 100vw;

	background-color: var(--background);
	overflow-x: hidden;
}

/* HEADER CSS */

.header {
	float: left;
	width: 90vw;
	min-height: 100px;

	padding-right: 5vw;
	padding-left: 5vw;

	background-color: var(--primary);

	text-align: center;
}

.headRow {
	float: left;
	min-height: 100px;
    width: 33.3%;
	min-width: 200px;
    text-align: center;
}

@media screen and (max-width: 445px) {
	.headRow {
		float: none;
		display:inline-block;
	}
}

.logoBox {
	height: 150px;
	width: 150px;

	margin: 5px;

	background-color: white;

	display:inline-block;
    vertical-align: top;

	border-radius: 100px;
}

.logoBox > a > img {
	height: 150px;
	width: 150px;

	object-fit: cover;
	border-radius: 100px;
}

.navBox {
	height: 3vh;
	min-height: 50px;
	max-height: 100px;
	width: 48.5%;
	min-width: 200px;

    display:inline-block;
    vertical-align: top;


	text-align: center;
	font-size: 130%;
	letter-spacing: 2px;
	
}

.nav:hover {
	text-decoration: underline;
	font-weight: bold;

	color: rgb(77, 77, 77);
}

a {
	text-decoration: none;
	color: var(--text);
}

/* HEADER CSS */

/* MAIN CSS */

.main {
	float: left;
	width: 90%;
	min-height: 70vh;

	padding-left: 5%;
	padding-right: 5%;

	background-color: var(--background);
}

/* MAIN CSS */

/* FOOTER CSS */

.footer {
	float: left;
	width: 90vw;
	min-height: 10vh;

	padding-left: 5vw;
	padding-right: 5vw;
	padding-bottom: 1vh;
	
	background-color: var(--primary);
}

.footer > p {
	padding-top: 30px;

	text-align: center;
	
	color: var(--text);
}

/* FOOTER CSS */

/* TEXT */
.main > h1, h2, h3, h4, h5 {
    text-align: center;
}
/* TEXT */