body {

	background-color: darkslategrey;
}

#title-text {

	text-align: center;
	margin: 3rem 0;
	font-size: 3.5vw;
	color: white;
	font-family: sans-serif;
}

/*style for starting block of maze*/
.start {

	padding: 1rem;
	border: 1px solid white;
	background-color: green;
	display: inline-block;
}

/*style for ending block of maze*/
.end {

	padding: 1rem;
	border: 1px solid white;
	background-color: orange;
	display: inline-block;
}

/*style for computer solution path*/
.path {

	padding: 1rem;
	border: 1px solid black;
	background-color: white;
	display: inline-block;
}

/*style for wall block (non-traversable block)*/
.wall {

	padding: 1rem;
	border: 1px solid white;
	background-color: black;
	display: inline-block;
}

/*style for free or open block (traversable block)*/
.free {

	padding: 1rem;
	border: 1px solid white;
	background-color: blue;
	display: inline-block;
}

.p-text {

	margin: 1vw 0px 1vw 0px;
	font-size: 2rem;
	color: white;
	font-family: serif;
}

.p-text-hidden {

	margin: 1vw 0px 1vw 0px;
	font-size: 1rem;
	color: white;
	font-family: serif;
	display: none;
}


#maze-structure {
	display: grid;
	grid-template-columns: repeat(40, 2rem);
	grid-template-rows: repeat(20, 2rem);
	text-align: center;
	line-height: 0px;
}

#info-icon {

	width: 5%;
	min-width: 3rem;
	filter: invert(0.5);
	left: 1rem;
	top: 1rem;
	position: absolute;
	display: inline-block;
	cursor: pointer;
}

#info-icon:hover {

	filter: invert(1.0);
}

#mode-view {

	position: fixed;
	right: 2vw;
	top: 1vw;
}