html{
    width:100%;
}

body {
    display: table;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
    margin: 0px auto;	
}

.chessboard {
    display: grid;
    margin-top: 40px;
    grid-template-columns: repeat(9, 80px);
    grid-template-rows: repeat(9, 80px);
    grid-auto-rows: minmax(80px, auto);
    /*gap: 1px;*/
	
}

.chessboard div {
/*    width: calc(100% / 9);*/
/*    height: calc(100% / 9);*/
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    border: 1px solid #333;
/*    background-image : url('https://images.chesscomfiles.com/chess-themes/boards/dark_wood/80.png');*/
}

.chessboard .left {
	font-size: 14px;
	width:20%;
}
.chessboard .coordinates{ 
	font-size: 14px;
	height:35%;
	width:100%;
}

.chessboard .empty {
	font-size: 14px;
	width:100%;
	height:35%;
}
div.chessboard .cell.even-row.even-col,
div.chessboard .cell.odd-row.odd-col {
    background-color: white;
    cursor: pointer;
}


div.chessboard .cell.odd-row.even-col,
div.chessboard .cell.even-row.odd-col {
    background-color: #CCCCCC;
    cursor: pointer;
}

.chessboard .even-row .even-col:hover,
.chessboard .odd-row .odd-col:hover,
.chessboard .even-row .odd-col:hover,
.chessboard .odd-row .even-col:hover {
    background-color: #b58863;
    cursor: pointer;
}

.sidebar {
    /* position: relative; */
    width: 15%;
    text-align: center;
    margin: 0 auto;
}

#player-top {
    display:flex;
    position: fixed;
    top :0;
    height: 40px;
}

.restart-btn, .next-btn {
    background-color: #4caf50;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

.restart-btn:hover, next-btn:hover {
    background-color: #45a049;
}

.player-top {
    display: flex;
     top :0;
     position: absolute;
}