@keyframes rainbow{
	  0%     { background-color:#402020; }
	 16.6667%{ background-color:#404020; }
	 33.3333%{ background-color:#204020; }
	 50%     { background-color:#204040; }
	 66.6667%{ background-color:#202040; }
	 83.3333%{ background-color:#402040; }
	100%     { background-color:#402020; }
}

body {
	background-color:#402020;
	animation: rainbow 30s linear infinite;
	font-family: cursive, sans-serif;
	color:white;
	text-align:center;
}

@keyframes wobble{
	0% { transform:rotate(-3deg); }
	100% { transform:rotate(3deg); }
}

#title{
	font-size:4em;
	margin:0;
	animation: wobble 10s ease-in-out infinite alternate;
}

#turntext{
	font-size:5em;
	margin:0.2em;
}

#board{
	text-align:center;
	margin: 1em 0 1em 0;
}

input {
	font-size:2em;
	width:1em;
	height:1em;
	margin-left:1em;
}
button {
	font-family: cursive, sans-serif;
	font-size:2em;
	margin-left:1em;
}
label {
	font-size:2em;
}


#settings{
	display:flex;
	align-items:center;
	justify-content:center;
}

.cell{
	width:8vw;
	height:8vw;
	display:inline-block;
	box-sizing:border-box;
	
	background-color:#404040;
}
.cell.white{ background-color:#C0C0C0; }


.cell.move{
	background-color:#404080;
	border:medium #2020F0 solid;
}
.cell.white.move{ background-color:#C0C0F0 }
.cell.selected{
	background-color:#408040;
	border:medium #20F020 solid;
}
.cell.white.selected{ background-color:#C0F0C0 }

.cell:hover{
	border:thick yellow solid;
}


.piece{
	background-image:url("pieces.png");
	background-size:600%;
	background-repeat:no-repeat;
}
.whitePiece{
	background-position-y:100%;
	transform:scalex(-1);
}
.pawn { background-position-x:0%;}
.rook { background-position-x:20%;}
.knight { background-position-x:40%;}
.bishop { background-position-x:60%;}
.queen { background-position-x:80%;}
.king { background-position-x:100%;}