body{
	margin: 0;
}

header {
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: center;
	background: #def;
	margin: auto auto auto auto;
}

#turn{	
	display: flex;
	width: 100%;
	text-align: center;
	justify-content: center;
	font-size: 50px;
	color: 	#000000;
}

footer	{
	display: flex;
	width: 100%;
	height: 200px;
	margin: auto auto auto auto;
	background: #fed;
}

@media only screen and (max-width: 960px) {
	header{
		display: flex;
		width: 960px;
	}
	footer{
		display: flex;
		width: 960px;
	}
}

@media only screen and (min-width: 1960px) {
	header{
		display: flex;
		width: 1960px;
	}
	footer{
		display: flex;
		width: 1960px;
	}
}


p {
	text-align: center;
	
}

h1 {
	font-size: 40px;
	font-family: Helvetica;
}

.board {
	display: grid;
	grid-template-rows: 50px repeat(8,fr); 
	width: 800px;
	height: 800px;
	margin: auto auto auto auto;
	
}

.boardRow{
	display: flex;
	background: #000;
	height: 100px;
	width: 800px;
	margin-left: 10px;
}

.white{
	background: #eee;
	height: 100px;
	width: 100px;
}

.black{
	background: #aaa;
	height: 100px;
	width: 100px;
}