.chess {
}

.chessboard {
	justify-content: center;
	width: 360px;
}

.chess-buttons {
	display: flex;
	justify-content: center;
}

.fen-container {
	width: 100%;
	text-align: center;
}

.fen-string {
	font-size: 13px;
	font-family: 'Work Sans', sans-serif;
	color: #CCC;
}

.left-div, .right-div {
}

.left-div h2, .right-div h2, .bottom-div h2 {
	text-decoration: underline;
	text-underline-offset: .3em;
}

.left-div p, .right-div p {
	color: #FFF;
	margin: 0;
	padding: 0;
}

.pgn-button {
	font-size: 11px !important;
	height: 18px !important;
	width: auto !important;
}

.pgn {
	padding: 0 10px;
	height: 300px;
	overflow: scroll;
}

.pgn_index {
  color: #ffd700;
}

.none {
	display: none;
}

.fen_string {
	font-size: 13px;
}

@media (max-width: 300px) {
	.chessboard {
		width: 240px !important;
	}
	.chess-buttons {
		flex-direction: column;
	}
	footer {
		font-size: 10px;
	}
}

@media (max-width: 480px) {
	.chessboard {
		width: 360px;
	}
	.fen-string {
		font-size: 9px;
	}
	.pgn {
		height: 150px;
	}
	.left-div, .right-div {
		order: 2;
		margin: 30px 0;
	}
	.button {
		font-size: 10px !important;
		width: auto !important;
	}
	.top-buttons {
		justify-content: center;
		padding-right: 4px;
	}
}

@media (min-width: 840px) {
	.chessboard {
		width: 420px;
	}
	.fen-string {
		font-size: 13px;
	}
}