@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;
	}
}

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

	padding-top: 5em;
}

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

	100% {
		transform: rotate(3deg);
	}
}

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

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

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

#game_chess input {
	font-size: 2em;
	width: 1em;
	height: 1em;
	margin-left: 1em;
}

#game_chess button {
	font-family: cursive, sans-serif;
	font-size: 2em;
	margin-left: 1em;
}

#game_chess label {
	font-size: 2em;
}


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

.chess_cell {
	width: 8vw;
	height: 8vw;
	display: inline-block;
	box-sizing: border-box;

	background-color: #404040;
}

.chess_cell.white {
	background-color: #C0C0C0;
}


.chess_cell.move {
	background-color: #404080;
	border: medium #2020F0 solid;
}

.chess_cell.white.move {
	background-color: #C0C0F0
}

.chess_cell.selected {
	background-color: #408040;
	border: medium #20F020 solid;
}

.chess_cell.white.selected {
	background-color: #C0F0C0
}

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


.chess_piece {
	background-image: url("images/chess_pieces.png");
	background-size: 600%;
	background-repeat: no-repeat;
}

.chess_piece.whitePiece {
	background-position-y: 100%;
	transform: scalex(-1);
}

.chess_pawn {
	background-position-x: 0%;
}

.chess_rook {
	background-position-x: 20%;
}

.chess_knight {
	background-position-x: 40%;
}

.chess_bishop {
	background-position-x: 60%;
}

.chess_queen {
	background-position-x: 80%;
}

.chess_king {
	background-position-x: 100%;
}