:root {
  --light: #edecbd;
  --dark: #1e1616;
}

body {
  color: var(--light);
  font-family: 'Kaushan Script', cursive, sans-serif;

  background-color: var(--dark);
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='64' viewBox='0 0 32 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 28h20V16h-4v8H4V4h28v28h-4V8H8v12h4v-8h12v20H0v-4zm12 8h20v4H16v24H0v-4h12V36zm16 12h-4v12h8v4H20V44h12v12h-4v-8zM0 36h8v20H0v-4h4V40H0v-4z' fill='%23332626' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

#title {
  font-size: 20px;
  margin-left: 40px;
  margin-bottom: 40px;
  display: inline-block;
}

#sizes {
  display: inline-block;
  margin-left: 40px;
}

#sizes a {
  margin-right: 5px;
}

a {
  color: var(--light);
}

.modes-and-captures {
  display: flex;
}

.mode-selector {
  margin-left: 40px;
  display: flex;
}

.mode-selector .mode {
  margin-right: 5px;
  padding: 4px;

  box-sizing: border-box;
  height: 54px;

  border-radius: 2px;

  color: var(--dark);
  background-color: var(--light);
}

.mode-selector .mode {
  width: 54px;
  font-size: 30px;
  background-color: rgba(237, 236, 189, 0.7);
}

.mode-selector .piece {
  display: inline-block;
  background-color: initial;
  border: 2px solid black;
}

.mode-selector .piece.White {
  border-color: white;
  background-color: initial;
}

.mode-selector.Static.Black .piece.Black {
  background-color: black;
}

.mode-selector.Static.White .piece.White {
  background-color: white;
}

.mode-selector .mode.Alternate .piece {
  height: 46px;
  width: 23px;

  background: none;
  box-sizing: border-box;
}

.mode-selector .mode.Alternate .piece.Black {
  border-top-left-radius: 92px;
  border-bottom-left-radius: 92px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.mode-selector .mode.Alternate .piece.White {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 92px;
  border-top-right-radius: 92px;

  border-color: white;
}

.mode-selector.Static.Black .mode.Black,
.mode-selector.Static.White .mode.White,
.mode-selector.Static.Empty .mode.Empty,
.mode-selector.Alternate .mode.Alternate {
  background-color: rgba(237, 236, 189, 1);
}

.mode-selector.Static .mode.Alternate .piece {
  background-color: initial;
}

.mode-selector.Alternate.Black .mode.Alternate .piece.Black {
  background-color: black;
}

.mode-selector.Alternate.White .mode.Alternate .piece.White {
  background-color: white;
}

.mode-selector .remove {
  text-align: center;
  color: grey;
  width: 42px;
}

.mode-selector.Static.Empty .remove {
  color: var(--dark);
}

.capture-zones {
  display: flex;
  margin-left: 40px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.capture-zone {
  display: flex;
  background: var(--light);
  height: 54px;
  padding: 5px;
  box-sizing: border-box;
  margin-right: 5px;
  border-radius: 3px;
}

.capture-cell.White {
  color: var(--dark);
}

.capture-cell .piece {
  text-align: center;
  line-height: 42px;
  margin-left: 3px;
}

.capture-zone .free-cell {
  width: 54px;
  height: 54px;
  color: grey;
  font-size: 20px;
  text-align: center;
  padding: 4px;
}

.board {
  margin: 40px;
  display: grid;
}

.board.x9 {
  grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}
.board.x13 {
  grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}
.board.x19 {
  grid-template-columns: 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px;
}

.cell {
  padding: 4px;
  height: 42px;
  background: var(--light);
}

.cell.nw {
  background-image: url('../image/nw.svg');
}
.cell.n {
  background-image: url('../image/n.svg');
}
.cell.ne {
  background-image: url('../image/ne.svg');
}
.cell.w {
  background-image: url('../image/w.svg');
}
.cell.m {
  background-image: url('../image/m.svg');
}
.cell.e {
  background-image: url('../image/e.svg');
}
.cell.sw {
  background-image: url('../image/sw.svg');
}
.cell.s {
  background-image: url('../image/s.svg');
}
.cell.se {
  background-image: url('../image/se.svg');
}

.piece {
  background: #000;
  border-radius: 50%;
  height: 42px;
  width: 42px;
  box-shadow: 1px 1px 2px grey;
}

.piece.White {
  background: #fff;
}