styles.css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: lightgrey;
}

.chessboard {
    box-shadow: 0px 0px 20px 5px grey;
}

.row {
    display: flex;
}

.cell {
    width: 50px; /* Adjust the size as needed */
    height: 50px; /* Adjust the size as needed */
}

.white {
    background-color: #f5f5f5; /* Light color for white squares */
}

.black {
    background-color: #333; /* Dark color for black squares */
}

.highlight {
/*    red color with opacity*/
    background-color: rgba(255, 0, 0, 0.5);
}


.knight {
    /* You can customize these styles to achieve the desired appearance */
    width: 40px;
    height: 40px;
    background-color: #000; /* Knight's color */
    border-radius: 50%; /* Makes the knight look round */
    position: relative;
    margin: auto;
    transition: all 0.5s ease;
}

.knight::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #fff; /* White head */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.5s ease;
}