.p1piece,
.p2piece,
.promotion-piece {
  background: transparent;
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
/* 
#p1graveyard .piece,
#p2graveyard .piece {
  position:relative;
} */

.piece:hover {
  cursor: pointer;
}

.white.pawn {
  background-image: url("../images/white-pawn.svg");
}

.black.pawn {
  background-image: url("../images/black-pawn.svg");
}

.white.knight,
.promotion-piece.p1knight {
  background-image: url("../images/white-knight.svg");
}

.black.knight,
.promotion-piece.p2knight {
  background-image: url("../images/black-knight.svg");
}

.white.bishop,
.promotion-piece.p1bishop {
  background-image: url("../images/white-bishop.svg");
}

.black.bishop,
.promotion-piece.p2bishop {
  background-image: url("../images/black-bishop.svg");
}

.white.rook,
.promotion-piece.p1rook {
  background-image: url("../images/white-rook.svg");
}

.black.rook,
.promotion-piece.p2rook {
  background-image: url("../images/black-rook.svg");
}

.white.queen,
.promotion-piece.p1queen {
  background-image: url("../images/white-queen.svg");
}

.black.queen,
.promotion-piece.p2queen {
  background-image: url("../images/black-queen.svg");
}

.white.king {
  background-image: url("../images/white-king.svg");
}

.black.king {
  background-image: url("../images/black-king.svg");
}