body {
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
}

hr {
	width: 500px;
}

div.header {
width: 25%;
height: 10%;
margin: 1rem auto;
padding: 0 0 3em 0; 
background-color: #BFCCE0;
border: 0.3rem solid #BFCCE0;
border-radius: 1rem
}

p.bottomText {
   text-align: center;
/*   font-family: Georgia, Times, sans-serif;*/
    font-family: Arial, Verdana, sans-serif;
   color: #941751;
   font-size: 1vw;
   line-height: 3vh;
}


#title {
	font-size: 36px;
	font-weight: bold;
	letter-spacing: 2px;
}

#title2 {
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 1px;
}

#title3 {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 1px;
}

#board {
	width: 350px;
	height: 420px;
/*	background-color: green;*/
	margin: 0 auto;
	margin-top: 3px;
	display: flex;
	flex-wrap: wrap;
}

.tile {
	/* box */
	border: 2px solid lightgray;
	width: 60px;
	height: 60px;
	margin: 2px;

/	* text	*/
	color: black;
	font-size: 36px;
	font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

.correct {
	background-color: #6AAA64;
	color: white;
	border-color: white;
}

.present {
	background-color: #C9B458;
	color: white;
	border-color: white;
}

.absent {
	background-color: #787C7E;
	color: white;
	border-color: white;
}