@font-face {
    font-family: 'Noto Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url('/600.woff2') format('woff2');

}
#FenInDiv {
	position: relative;
	left: 60px;
}

#fenIn { 
 width: 480px;
 left: 60px;
}

#Board {
	position: relative;
	top: 40px;
	left:32%;
	right:-32%;
	
	
	width: 640px;
	height: 640px;
	border-style: solid;
	border-width: 2px;
}

#EngineOutput {
	display: flex;
    justify-content: center;
}



#Rules {
	position: absolute;
	left: 750px;
	top: 75px;
}

.Square {
	position: absolute;	
	width: 80px;
	height: 80px;
}

.Dark {
	background-color:#585959;
}

.Light {
	background-color: whitesmoke;
}

.SqSelected {
	background-color:darkslategray;
}

.rank1 { top: 560px; }
.rank2 { top: 480px; }
.rank3 { top: 400px; }
.rank4 { top: 320px; }
.rank5 { top: 240px; }
.rank6 { top: 160px; }
.rank7 { top: 80px; }
.rank8 { top: 0px; }

.rank1Type1 { top: 605px; } /* 560*/
.rank2Type1 { top: 525px; }
.rank3Type1 { top: 445px; }
.rank4Type1 { top: 365px; }
.rank5Type1 { top: 285px; }
.rank6Type1 { top: 205px; }
.rank7Type1 { top: 125px; }
.rank8Type1 { top: 45px; }

.rank1Type2 { top: 605px; } 
.rank2Type2 { top: 525px; }
.rank3Type2 { top: 445px; }
.rank4Type2 { top: 365px; }
.rank5Type2 { top: 285px; }
.rank6Type2 { top: 205px; }
.rank7Type2 { top: 125px; }
.rank8Type2 { top: 45px; }

.file1Type2 { left: 44px; } 
.file2Type2 { left: 124px; }
.file3Type2 { left: 204px; }
.file4Type2 { left: 284px; }
.file5Type2 { left: 364px; }
.file6Type2 { left: 444px; }
.file7Type2 { left: 524px; }
.file8Type2 { left: 604px; }

.rank1Current { top: 560px; }
.rank2Current { top: 480px; }
.rank3Current { top: 400px; }
.rank4Current { top: 320px; }
.rank5Current { top: 240px; }
.rank6Current { top: 160px; }
.rank7Current { top: 80px; }
.rank8Current { top: 0px; }

.file1Current { left: 14px; }
.file2Current { left: 94px; }
.file3Current { left: 174px; }
.file4Current { left: 254px; }
.file5Current { left: 334px; }
.file6Current { left: 414px; }
.file7Current { left: 494px; }
.file8Current { left: 574px; }


.file1 { left: 0px; }
.file2 { left: 80px; }
.file3 { left: 160px; }
.file4 { left: 240px; }
.file5 { left: 320px; }
.file6 { left: 400px; }
.file7 { left: 480px; }
.file8 { left: 560px; }


.Piece { 
	position: absolute;
}

.CurrentPiece {
	display: inline-block;     
	position: absolute;    
	z-index: 1;     
	padding: 1em;     
	margin: -1em; 
}

.PieceType1 {
	position: absolute;
}

.PieceType2 {
	position: absolute;
}