/* Default configuration */
*{
    padding: 0;
    border: 0;
    margin: 0;
}
html{
    font-size: 10px;
}
body{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
/* grid implementation */
.container{
    width: 50%;
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* optimised way to separate the chessboard into 8 equal sizes.*/
    grid-template-rows: repeat(8, 1fr);
}
/* customising the chess squares */
.black{
    width: 10rem;
    height: 10rem;
    background-color: #b58863;
}
.white{
    width: 10rem;
    height: 10rem;
    background-color: #f0d9b5;
}