body {
    background-color: #faf8ff;
    display: flex;
    justify-content: center;
    font-family: "Clear Sans", Helvetica, serif;
}

h2{
    font-size: 80px;
    line-height: 0.7;
    color: #8f7a66;
    text-align: center;
    margin: 0;

}
h3, p{
margin: 0;
}

.container {
    width: 468px;
    margin-top: 30px;
}

.info{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

/* make the grid layout responsive for any NxN */
.grid {
  display: grid;
  background-color: #bbada0;
  border: 6px solid #bbada0;
  border-radius: 8px;
  margin-top: 20px;
  gap: 8px;
  justify-content: center;
  width: fit-content; /* container will fit the grid content */
  padding: 10px; /* optional */
}

/* tiles */
.grid .square {
  aspect-ratio: 1 / 1;
  min-width: 40px;    /* ensure small boards still look OK */
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: clamp(18px, 3vmin, 48px); /* scales with board */
  border-radius: 6px;
  background-color: #eee4da;
  color: #776e65;
}


/* Score  - Playboard */


.score-container{
    text-align: center;
    width: 160px;
    height: 60px;
    border-radius: 4px;
    background-color:#8f7a66;
    color: #fff;
}

#score{
    font-size: 40px;
    margin: 0;
}

.score-title{
    font-size: 16px;
}

#restart{
    font-size: 20px;
    text-align: center;
    padding: 5px 20px;
    border-radius: 6px;
    background-color: #8f7a66;
    color: #fff;
    border: none;
    cursor: pointer;
}