div.hurkle-grid
{
	/* --size: attr(data-size); */
	display: grid;
	/* grid-template-columns: repeat(var(--size), 1fr); */
	/* width: 75%; */
	margin: 0 auto; 
}
div.square.hurkle
{
	background-color: var(--color1);
}
div[data-coord="-1--1"].square
{
	border-left: none;
	border-bottom: none;
}
div.square
{
	height: 30px;
	border: 1px solid white;
}
p.directions
{
	font-size: 25px;
	width: 700px;
	margin: 10px auto;
	color: var(--color1);
}
p.directions > span.eg 
{
	color: var(--color2);
}
span.display
{
	display: block;
	color: var(--color2);
	margin: 4px;
	font-size: 25px;
}
span.display.final 
{
	color: var(--color1);
}