// Styles for diagrams and board (partial).

.light-square-diag
  background-color: #dfdfdf

.dark-square-diag
  background-color: #7287b6

div.board
  user-select: none
  float: left
  height: 0
  display: inline-block
  position: relative

div.board5
  width: 20%
  padding-bottom: 20%

div.board8
  width: 12.5%
  padding-bottom: 12.5%

div.board9
  width: 11.1%
  padding-bottom: 11.1%

div.board10
  width: 10%
  padding-bottom: 10%

div.board11
  width: 9.09%
  padding-bottom: 9.09%

div.board12
  width: 8.33%
  padding-bottom: 8.33%

img.piece
  width: 100%
  z-index: 10

img.piece, img.mark-square, img.circle-square
  max-width: 100%
  height: auto
  display: block

img.mark-square, img.circle-square
  position: absolute
  z-index: 20

img.mark-square
  opacity: .7
  width: 76%
  top: 12%
  left: 12%

img.circle-square
  opacity: 0.7
  width: 100%
  top: 0
  left: 0

.in-shadow
  filter: brightness(50%)