body {
  display: flex;
  justify-content: center; /* в центр по горизонтали */
  min-height: 100vh;       /* растянуть body на высоту окна */
  margin: 0;               /* убрать лишние внешние отступы */
  align-items: center;     /* в центр по вертикали */
  font-size: 25px;         /* размер шрифта обозначений */
  /* переменные */
  --cell-size: 90px;
  --chess-border-size: 45px;
}

.chess-piece {
  width: 80px;             /* размер фигур */
}

.chess-field-row {
  display: flex;
  /* flex-direction: row; */
}

.square {
  display: flex;           /* для фигур: */
  justify-content: center; /*   в центр по горизонтали */
  align-items: center;     /*   в центр по вертикали */
  width: var(--cell-size);
  height: var(--cell-size);
}

.white-square {
  background-image: url("images/white-wood.webp");
}

.black-square {
  background-image: url("images/black-wood.webp");
}

/* обозначения рядов и столбцов */

.border-cell {
  display: flex;
  background-color: rgb(240, 224, 248);
  box-sizing: border-box; /* размер ячейки включает внутренние отступы */
  padding: 5px;           /* внутренние отступы */
}

.corner {
  width: var(--chess-border-size);
  height: var(--chess-border-size);
}

.letter {
  justify-content: center;
  align-items: start;
  width: var(--cell-size);
  height: var(--chess-border-size);
}

.digit {
  justify-content: end;
  align-items: center;
  width: var(--chess-border-size);
  height: var(--cell-size);
}

.top-letter {
  transform: rotate(180deg);
}

.right-digit {
  transform: rotate(180deg);
}

/* шапка и подвал */

.footer {
  display: flex;
  justify-content: right; /* по горизонтали */
  font-size: 14px;
  padding: 5px;
}