body {
	background-color: #005ca5;
}

#overlayText {
	text-align: center; 
	font-size: 75px; 
	margin: 250px 50px 0;
}

#chessboard, .black_square, .white_square {
	display:block;
	padding:0px;
	margin:0px;
}

#overlayDiv {
    position: absolute;
    width: 102%;
    height: 102%;
    background-color: rgba(255,255,255,.7);
    z-index: 100;
    top: -15px;
    left: -20px;
	display:none;
}

.imageSlot {
	width: 57px;
	height: 57px;
	background-repeat: no-repeat;
	background-size: 57px 57px;
	margin: 10px;
}

.imageSlotSide {
	width: 31px;
	height: 31px;
	background-repeat: no-repeat;
	background-size: 31px 31px;
	margin: 10px;
}

#chessboard {
	margin: 0px auto;
	width:616px;
	height:616px;
	border:4px solid #000000;
}

.chessboardSide {
	height:616px;
	margin: 0px; 
	width:51px; 
	border:none;
}

.black_square, .white_square {
	width:77px;
	height:77px;
	float:left;
}

.black_square {
	background-color:#5FBCD3;
}

.white_square {
	background-color:#AFDDE9;
}

.surroundSide {
    width: 100%;
    display:inline-flex;
}

.surround {
    width: 100%;
}

#MessageCenter {
    width: 600px;
    font-size: 26px;
    margin-top: 15px !important;
    color: #fffec3;
    margin: auto;
}

#hermPicture {
	position: absolute;
	width: 10%;
	right: 78%;
}

@media only screen and (max-width:725px) { 
	.imageSlot { width: 55px !important; height: 55px !important; background-size: 55px 55px !important; }
	.imageSlotSide { width: 30px !important; height: 30px !important; background-size: 30px 30px !important; }
	#chessboard { width:600px !important; height:600px !important; }
	.chessboardSide { height:600px !important; width:50px !important; }
	.black_square, .white_square { width:75px !important; height:75px !important; }
	#MessageCenter { font-size: 22px; }
}

@media only screen and (max-height:790px) { 
	.imageSlot { width: 55px !important; height: 55px !important; background-size: 55px 55px !important; }
	.imageSlotSide { width: 30px !important; height: 30px !important; background-size: 30px 30px !important; }
	#chessboard { width:600px !important; height:600px !important; }
	.chessboardSide { height:600px !important; width:50px !important; }
	.black_square, .white_square { width:75px !important; height:75px !important; }
	#MessageCenter { font-size: 22px; }
}

@media only screen and (max-width:700px) { 
	.imageSlot { width: 42px !important; height: 42px !important; background-size: 42px 42px !important; }
	.imageSlotSide { width: 23px !important; height: 23px !important; background-size: 23px 23px !important; }
	#chessboard { width:496px !important; height:496px !important; }
	.chessboardSide { height:496px !important; width:43px !important; }
	.black_square, .white_square { width:62px !important; height:62px !important; }
}

@media only screen and (max-height:740px) { 
	.imageSlot { width: 42px !important; height: 42px !important; background-size: 42px 42px !important; }
	.imageSlotSide { width: 23px !important; height: 23px !important; background-size: 23px 23px !important; }
	#chessboard { width:496px !important; height:496px !important; }
	.chessboardSide { height:496px !important; width:43px !important; }
	.black_square, .white_square { width:62px !important; height:62px !important; }
}

@media only screen and (max-height:638px) { 
	.imageSlot { width: 30px !important; height: 30px !important; background-size: 30px 30px !important; }
	.imageSlotSide { width: 16px !important; height: 16px !important; background-size: 16px 16px !important; }
	#chessboard { width:400px !important; height:400px !important; border: 3px solid #000000; }
	.chessboardSide { height:400px !important; width:36px !important; }
	.black_square, .white_square { width:50px !important; height:50px !important; }
}

@media only screen and (max-width:590px) { 
	.imageSlot { width: 30px !important; height: 30px !important; background-size: 30px 30px !important; }
	.imageSlotSide { width: 16px !important; height: 16px !important; background-size: 16px 16px !important; }
	#chessboard { width:400px !important; height:400px !important; border: 3px solid #000000; }
	.chessboardSide { height:400px !important; width:36px !important; }
	.black_square, .white_square { width:50px !important; height:50px !important; }
}

@media only screen and (max-height:540px) { 
	.imageSlot { width: 27px !important; height: 27px !important; background-size: 27px 27px !important; margin: 5px !important; }
	.imageSlotSide { width: 14.5px !important; height: 14.5px !important; background-size: 14.5px 14.5px !important; margin: 5px !important; }
	#chessboard { width:296px !important; height:296px !important; border: 2px solid #000000; }
	.chessboardSide { height:296px !important; width:24px !important; }
	.black_square, .white_square { width:37px !important; height:37px !important; }
	#MessageCenter { font-size: 16px; }
}

@media only screen and (max-width:482px) { 
	.imageSlot { width: 27px !important; height: 27px !important; background-size: 27px 27px !important; margin: 5px !important; }
	.imageSlotSide { width: 14.5px !important; height: 14.5px !important; background-size: 14.5px 14.5px !important; margin: 5px !important; }
	#chessboard { width:296px !important; height:296px !important; border: 2px solid #000000; }
	.chessboardSide { height:296px !important; width:24px !important; }
	.black_square, .white_square { width:37px !important; height:37px !important; }
	#MessageCenter { font-size: 16px; }
}

@media only screen and (max-height:434px) { 
	.imageSlot { width: 22px !important; height: 22px !important; background-size: 22px 22px !important; }
	.imageSlotSide { width: 15px !important; height: 15px !important; background-size: 15px 15px !important; margin: 2px !important;}
	#chessboard { width:256px !important; height:256px !important; border: 2px solid #000000; }
	.chessboardSide { height:256px !important; width:19px !important; }
	.black_square, .white_square { width:32px !important; height:32px !important; }
	#MessageCenter { font-size: 14px; }
}

@media only screen and (max-width:350px) { 
	.imageSlot { width: 22px !important; height: 22px !important; background-size: 22px 22px !important; }
	.imageSlotSide { width: 15px !important; height: 15px !important; background-size: 15px 15px !important; margin: 2px !important;}
	#chessboard { width:256px !important; height:256px !important; border: 2px solid #000000; }
	.chessboardSide { height:256px !important; width:19px !important; }
	.black_square, .white_square { width:32px !important; height:32px !important; }
	#MessageCenter { font-size: 14px; }
}

@media only screen and (max-width:300px) { 
	.imageSlot { width: 18px !important; height: 18px !important; background-size: 18px 18px !important; }
	.imageSlotSide { width: 13px !important; height: 13px !important; background-size: 13px 13px !important; margin: 2px !important;}
	#chessboard { width:224px !important; height:224px !important; border: 2px solid #000000; }
	.chessboardSide { height:224px !important; width:15px !important; }
	.black_square, .white_square { width:28px !important; height:28px !important; }
}

@media only screen and (max-width:1300px) { 
	#hermPicture { right: 80%; }
}

@media only screen and (max-width:1175px) { 
	#hermPicture { right: 83%; }
}

@media only screen and (max-width:1070px) { 
	#hermPicture { right: 85%; }
}

@media only screen and (max-width:1008px) { 
	#hermPicture { right: 90%; }
	#overlayText { font-size: 50px !important; margin: 150px 50px 0 !important; }
}

@media only screen and (max-width:880px) { 
	#hermPicture { 	width: 8%; right:92%; }
}

@media only screen and (max-width:830px) { 
	#hermPicture { 	display:none; }
}

@media only screen and (max-width:790px) { 
	#MessageCenter { width: 80%; }
}


/***
#A8 {
    background-image: none;
}

#B8 {
    background-image: url(chess-images/blackKnight.png);
}
#C8 {
    background-image: none;
}
#D8 {
    background-image: none;
}
#E8 {
    background-image: url(chess-images/blackKing.png);
}
#F8 {
    background-image: none;
}
#G8 {
    background-image: none;
}
#H8 {
    background-image: url(chess-images/blackRook.png);
}

#A7 {
    background-image: none;
}
#B7 {
    background-image: none;
}
#C7 {
    background-image: none;
}
#D7 {
    background-image: none;
}
#E7 {
    background-image: none;
}
#F7 {
    background-image: none;
}
#G7 {
    background-image: none;
}
#H7 {
    background-image: none;
}

#A6 {
    background-image: none;
}
#B6 {
    background-image: none;
}
#C6 {
    background-image: none;
}
#D6 {
    background-image: none;
}
#E6 {
    background-image: none;
}
#F6 {
    background-image: none;
}
#G6 {
    background-image: none;
}
#H6 {
    background-image: none;
}

#A5 {
    background-image: none;
}
#B5 {
    background-image: none;
}
#C5 {
    background-image: none;
}
#D5 {
    background-image: none;
}
#E5 {
    background-image: none;
}
#F5 {
    background-image: none;
}
#G5 {
    background-image: none;
}
#H5 {
    background-image: none;
}

#A4 {
    background-image: none;
}
#B4 {
    background-image: none;
}
#C4 {
    background-image: none;
}
#D4 {
    background-image: none;
}
#E4 {
    background-image: none;
}
#F4 {
    background-image: none;
}
#G4 {
    background-image: none;
}
#H4 {
    background-image: none;
}

#A3 {
    background-image: none;
}
#B3 {
    background-image: none;
}
#C3 {
    background-image: none;
}
#D3 {
    background-image: none;
}
#E3 {
    background-image: none;
}
#F3 {
    background-image: none;
}
#G3 {
    background-image: none;
}
#H3 {
    background-image: none;
}

#A2 {
    background-image: none;
}
#B2 {
    background-image: none;
}
#C2 {
    background-image: none;
}
#D2 {
    background-image: none;
}
#E2 {
    background-image: none;
}
#F2 {
    background-image: none;
}
#G2 {
    background-image: none;
}
#H2 {
    background-image: none;
}

#A1 {
    background-image: url(chess-images/whiteRook.png);
}
#B1 {
    background-image: url(chess-images/whiteKnight.png);
}
#C1 {
    background-image: url(chess-images/whiteBishop.png);
}
#D1 {
    background-image: url(chess-images/whiteQueen.png);
}
#E1 {
    background-image: url(chess-images/whiteKing.png);
}
#F1 {
    background-image: url(chess-images/whiteBishop.png);
}
#G1 {
    background-image: url(chess-images/whiteKnight.png);
}
#H1 {
    background-image: url(chess-images/whiteRook.png);
}
**/


#A8 {
    background-image: url(chess-images/blackRook.png);
}

#B8 {
    background-image: url(chess-images/blackKnight.png);
}
#C8 {
    background-image: url(chess-images/blackBishop.png);
}
#D8 {
    background-image: url(chess-images/blackQueen.png);
}
#E8 {
    background-image: url(chess-images/blackKing.png);
}
#F8 {
    background-image: url(chess-images/blackBishop.png);
}
#G8 {
    background-image: url(chess-images/blackKnight.png);
}
#H8 {
    background-image: url(chess-images/blackRook.png);
}

#A7 {
    background-image: url(chess-images/blackPawn.png);
}
#B7 {
    background-image: url(chess-images/blackPawn.png);
}
#C7 {
    background-image: url(chess-images/blackPawn.png);
}
#D7 {
    background-image: url(chess-images/blackPawn.png);
}
#E7 {
    background-image: url(chess-images/blackPawn.png);
}
#F7 {
    background-image: url(chess-images/blackPawn.png);
}
#G7 {
    background-image: url(chess-images/blackPawn.png);
}
#H7 {
    background-image: url(chess-images/blackPawn.png);
}

#A6 {
    background-image: none;
}
#B6 {
    background-image: none;
}
#C6 {
    background-image: none;
}
#D6 {
    background-image: none;
}
#E6 {
    background-image: none;
}
#F6 {
    background-image: none;
}
#G6 {
    background-image: none;
}
#H6 {
    background-image: none;
}

#A5 {
    background-image: none;
}
#B5 {
    background-image: none;
}
#C5 {
    background-image: none;
}
#D5 {
    background-image: none;
}
#E5 {
    background-image: none;
}
#F5 {
    background-image: none;
}
#G5 {
    background-image: none;
}
#H5 {
    background-image: none;
}

#A4 {
    background-image: none;
}
#B4 {
    background-image: none;
}
#C4 {
    background-image: none;
}
#D4 {
    background-image: none;
}
#E4 {
    background-image: none;
}
#F4 {
    background-image: none;
}
#G4 {
    background-image: none;
}
#H4 {
    background-image: none;
}

#A3 {
    background-image: none;
}
#B3 {
    background-image: none;
}
#C3 {
    background-image: none;
}
#D3 {
    background-image: none;
}
#E3 {
    background-image: none;
}
#F3 {
    background-image: none;
}
#G3 {
    background-image: none;
}
#H3 {
    background-image: none;
}

#A2 {
    background-image: url(chess-images/whitePawn.png);
}
#B2 {
    background-image: url(chess-images/whitePawn.png);
}
#C2 {
    background-image: url(chess-images/whitePawn.png);
}
#D2 {
    background-image: url(chess-images/whitePawn.png);
}
#E2 {
    background-image: url(chess-images/whitePawn.png);
}
#F2 {
    background-image: url(chess-images/whitePawn.png);
}
#G2 {
    background-image: url(chess-images/whitePawn.png);
}
#H2 {
    background-image: url(chess-images/whitePawn.png);
}

#A1 {
    background-image: url(chess-images/whiteRook.png);
}
#B1 {
    background-image: url(chess-images/whiteKnight.png);
}
#C1 {
    background-image: url(chess-images/whiteBishop.png);
}
#D1 {
    background-image: url(chess-images/whiteQueen.png);
}
#E1 {
    background-image: url(chess-images/whiteKing.png);
}
#F1 {
    background-image: url(chess-images/whiteBishop.png);
}
#G1 {
    background-image: url(chess-images/whiteKnight.png);
}
#H1 {
    background-image: url(chess-images/whiteRook.png);
}