/* src/index.css */
:root {
  --cell-size: 4rem;
  --cell-spacing: .5rem;
  --piece-size: 3rem;
  --board-size: calc(var(--cell-size) * 8 + var(--cell-spacing) * 7);
  --margin-0: var(--cell-spacing);
  --margin-1: calc(2 * var(--cell-spacing)  + var(--cell-size));
  --margin-2: calc(3 * var(--cell-spacing)  + 2 * var(--cell-size));
  --margin-3: calc(4 * var(--cell-spacing)  + 3 * var(--cell-size));
  --foreground: white;
  --background: black;
  --text-color: white;
}

* {
  color: var(--text-color);
}

body {
  color: var(--text-color);
  background-color: var(--background);
  margin-left: auto;
  margin-right: auto;
  font-family: sans-serif;
}

html, body {
  overscroll-behavior-y: none;
  height: calc(100dvh - 2em);
}

h1 {
  text-align: center;
}

#all {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#game {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  justify-content: space-between;
  align-items:  center;
}

#board {
  width: var(--board-size);
  height: var(--board-size);
  position: relative;
  border: 1px solid var(--foreground);
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

#board > table {
  margin: auto;
}

#left, #right {
  width: calc(( 100% - var(--board-size)) / 2);
}

#right {
  display: flex;
  justify-content: end;
}

#right > div {
  height: calc(var(--board-size)  - 4em);
  border: 1px solid var(--foreground);
  display: block;
  flex-grow: 0;
  padding: 2em;
}

td {
  border: .1em solid var(--foreground);
  height: var(--cell-size);
  width: var(--cell-size);
}

td > div {
  color: #0000;
  width: var(--piece-size);
  height: var(--piece-size);
  border-radius: 3rem;
  margin: .4rem;
  transition: all .3s;
}

td > div.black {
  visibility: visible;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--foreground);
}

td > div.white {
  visibility: visible;
  background: var(--foreground);
  color: var(--background);
  border: 1px solid var(--background);
}

td > div.maybe {
  background: none;
  border: none;
}

div.maybe:after {
  color: var(--foreground);
  content: "+";
  text-align: center;
  font-size: calc(var(--cell-size) / 2);
  padding-left: calc(var(--cell-size) / 4);
  width: 0;
  height: 0;
  font-family: none;
  line-height: 1.5em;
}

button {
  color: var(--background);
  background-color: var(--foreground);
}

#right button {
  width: 100%;
  height: 2em;
  margin: 1em;
}

.hidden {
  visibility: hidden;
  height: 0;
}