.container {
      display: flex;
      justify-content: center;
      align-items: center;
   
    }

.grid {
	display: grid;
      grid-template-columns: repeat(10, 1fr);
      width: 210px;
      height: 25px;
      background-color: white;
      border: 2px solid #567F3A;
    }
    
    .cell {
      border-right: 1px solid darkgreen;
      text-align: center;
      padding: 2px;
      font-size: 9px; /* Adjust the font size as needed */
   font-family: Arial, sans-serif; /* Set the font-family to Arial */
      color: rgb(95, 126, 62); /* Set the text color to black */
display: flex;
      align-items: center; /* Vertical alignment */
    }
    
.colored {
      background-color: rgb(95, 126, 62);
font-weight: bold; /* Set the text to bold */
color: white;
    }

.midcol {
      background-color: rgb(129, 152, 105);
font-weight: bold; /* Set the text to bold */
color: white;
    }

.lightcol {
      background-color: rgb(203, 219, 186);
font-weight: bold; /* Set the text to bold */
color: rgb(95, 126, 62);
    }

.grid-caption {
      text-align: center;
      font-size: 10px;
      font-family: Arial, sans-serif;
margin-top: 10px;
    }