#gameboard {
	float: left;
   	width: 480px;
	height:480px;
	display: flex;
	flex-wrap: wrap;
	
}
#homepageright {
float: right;
width: 350px;
margin: 0px;
padding: 0px;
}
.square {
		height: 60px;
		width: 60px;
		position: relative;
}
.alabel {
		height: 25px;
		width: 60px;
		position: relative;
		text-align: center;
		font-size: 18px;
}
.square svg {
		height: 50px;
		width: 50px;
		margin: 5px;
		position: relative;
		z-index: -9;
}
.square img {
		height: 50px;
		width: 50px;
		margin: 5px;
		position: relative;
		z-index: -9;

}


path {
		position: relative;
		z-index: -10;
}

.piece {
	position: relative;
		z-index: 9;
}
	
.beige {
		background-color: rgb(183, 195, 121)
}
.brown {
		background-color: rgb(219, 227, 249)
}
.black {
		fill: rgb(28, 28, 28)
}
.white {
		fill: rgb(255, 255, 255)
}
.red {
		background-color: rgb(255, 28, 28)
}
.blue {
		background-color: rgb(28, 28, 255)
		}
#yanboard {
	float: center;
   	width: 30px;
	height:480px;
	display: flex;
	flex-wrap: wrap;
	
}
.ylabel {
		height: 60px;
		width: 25px;
		position: relative;
		text-align: center;
		align-items: center;
		font-size: 18px;
		
}
.yrlabel {
		height: 25px;
		width: 25px;
		position: relative;
		text-align: center;
		align-items: center;
		font-size: 18px;
		
		
}