#gameboard{
    width: 400px;
    height: 400%; 
    display:flex;
    flex-wrap: wrap;
}


.square{
    height: 50px;
    width: 50px;
    position: relative;

}

.square svg{
    height: 35px;
    width:  35px;
    margin: 5px;
    position: relative;
    z-index: -9;
}
path{
    position: relative;
    z-index: -10;
}

.piece{
    position: relative;
    z-index: 9;
}
.yellow{
    background-color: rgb(250, 251, 192);
}

.green{
    background-color:rgb(10, 187, 57);
}

.black{
    fill: black;
    filter: 
    drop-shadow(0px 1px 0px #ffffff) 
    drop-shadow(0px 1px 0px #ffffff) 
}

.white{
    fill: white;
    filter: 
    drop-shadow(0px 1px 1px #000000) 
    drop-shadow(0px 1px 1px #000000) 
    drop-shadow(0px 1px 1px #000000)
}

/* Add styles for touch interactions */
.square:active {
    /* Add some visual feedback, like changing the background color */
    background-color: lightblue;
}