<commit_before>
body {
  text-align: center;
}

.tabuleiro {
  margin: 0, auto;
  margin: 2.3% 0% 0% 28%;
  position: absolute;
  width: 588px;
  height: 588px;
  /*border: 2px solid yellow;*/
}

#image-board {
  width: 650px;
  height: 650px;
  margin: -5.3% 0% 0% -54%;
  position: absolute;
}
<commit_msg>Create style for each single square and place on the right place on the board image<commit_after>
body {
  text-align: center;
}

.board {
  /*margin: 0, auto;*/
  margin: 5% 0% 0% 25%;
  position: absolute;
  width: 588px;
  height: 588px;
}

#image-board {
  width: 650px;
  height: 650px;
  margin: -4.5% 0% 0% -53.5%;
  position: absolute;
}

/*Set green and blues pieces style*/
.green, .blue {
  display: block;
  width: 60px;
  height: 60px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  border: 5px dashed #fff;
  border-radius: 100px;
}
.green {
  background: green;
}
.blue {
  background: blue;
}
.green:hover, .blue:hover  {
  border: 2px solid #fff;
  box-shadow: 0 0 40px rgb(255,255,255);
}



/*Position all the squares that will be used to place the pieces*/
/*Green pieces*/
#square1 {
  margin: 1% 0% 0% 14.7%;
  position: absolute;
}
#square2 {
  margin: 1% 0% 0% 39.5%;
  position: absolute;
}
#square3 {
  margin: 1% 0% 0% 64%;
  position: absolute;
}
#square4 {
  margin: 1% 0% 0% 88.7%;
  position: absolute;
}
#square5 {
  margin: 13.5% 0% 0% 2.5%;
  position: absolute;
}
#square6 {
  margin: 13.5% 0% 0% 26.9%;
  position: absolute;
}
#square7 {
  margin: 13.5% 0% 0% 51.5%;
  position: absolute;
}
#square8 {
  margin: 13.5% 0% 0% 76.5%;
  position: absolute;
}
#square9 {
  margin: 26% 0% 0% 14.7%;
  position: absolute;
}
#square10 {
  margin: 26% 0% 0% 39.6%;
  position: absolute;
}
#square11 {
  margin: 26% 0% 0% 64%;
  position: absolute;
}
#square12 {
  margin: 26% 0% 0% 88.5%;
  position: absolute;
}


/*available pieces*/
#square13 {
  margin: 38.3% 0% 0% 2.5%;
  position: absolute;
}
#square14 {
  margin: 38.3% 0% 0% 27%;
  position: absolute;
}
#square15 {
  margin: 38.3% 0% 0% 51.7%;
  position: absolute;
}
#square16 {
  margin: 38.3% 0% 0% 76.5%;
  position: absolute;
}
#square17 {
  margin: 50.5% 0% 0% 14.7%;
  position: absolute;
}
#square18 {
  margin: 50.5% 0% 0% 39.6%;
  position: absolute;
}
#square19 {
  margin: 50.5% 0% 0% 64%;
  position: absolute;
}
#square20 {
  margin: 50.5% 0% 0% 89%;
  position: absolute;
}


 /*Blue pices */
#square29 {
  margin: 88% 0% 0% 2.5%;
  position: absolute;
}
#square30 {
  margin: 88% 0% 0% 27%;
  position: absolute;
}
#square31 {
  margin: 88% 0% 0% 52%;
  position: absolute;
}
#square32 {
  margin: 88% 0% 0% 76.5%;
  position: absolute;
}

#square25 {
  margin: 75.5% 0% 0% 14.7%;
  position: absolute;
}
#square26 {
  margin: 75.5% 0% 0% 39.6%;
  position: absolute;
}
#square27 {
  margin: 75.5% 0% 0% 64%;
  position: absolute;
}
#square28 {
  margin: 75.5% 0% 0% 88.6%;
  position: absolute;
}

#square21 {
  margin: 63% 0% 0% 2.5%;
  position: absolute;
}
#square22 {
  margin: 63% 0% 0% 27%;
  position: absolute;
}
#square23 {
  margin: 63% 0% 0% 51.5%;
  position: absolute;
}
#square24 {
  margin: 63% 0% 0% 76.5%;
  position: absolute;
}

{'fraction_non_alphanumeric': 0.1794546607482562, 'fraction_numerical': 0.11414077362079898, 'mean_word_length': 3.118798955613577, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3470228', 'n_tokens_mistral': 1604, 'n_tokens_neox': 1325, 'n_words': 397}