body {
  background-color: darkgrey;
  margin: 0;
}

table {
  border-spacing: 0;
  height: 100vh;
  width: 100%;
  min-width: 800px;
  max-width: 100vh;
}

main {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  height: 100vh;
}

.desktop {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  row-gap: 30px;
}

.noPieceHere {
  background-color: #f0d2b4;
}

td {
  text-align: center;
  background-color: #ba7a3a;
  width: 100px;
  height: 100px;
}

.red-turn-text {
  text-align: center;
  color: lightgray;
  font-family: "open sans";
  font-size: 4vh;
}

.black-turn-text {
  text-align: center;
  font-family: "open sans";
  font-size: 4vh;
  color: black;
}

.black-piece {
  width: 25%;
  height: 25%;
  padding: 12px;
  background-color: black;
  border: 2px solid white;
  border-radius: 50px;
}

.red-piece {
  width: 25%;
  height: 25%;
  padding: 12px;
  background-color: darkred;
  border: 2px solid white;
  border-radius: 50px;
}

.king.red-piece {
  background-color: orange;
}

.king.black-piece {
  background-color: purple;
}

gazable-element {
  display: inline-block;
  transform-origin: center;
  --button-outer-border-color-gs: none;
}

gazable-element[gaze-focused].red-piece,
gazable-element[gaze-focused].black-piece,
td.gaze-allowed-cell > gazable-element[gaze-focused] {
  animation: animate-click var(--dwell-time) forwards;
}

td.gaze-allowed-cell {
  outline: 5px solid darkblue;
}

gazable-element[gaze-focused].cell.gaze-allowed-cell {
  animation: animate-click var(--dwell-time) forwards;
}

@keyframes animate-click {
  100% {
    background-color: darkblue;
  }
}

gazable-element.cell {
  width: 25%;
  height: 25%;
  padding: 12px;
  border-radius: 50%;
}

#divider {
  border: 2px solid black;
  width: 100%;
  background-color: red;
}

/* @media screen and (max-width: 560px) {
  .red-piece {
    height: 4.5vw;
    width: 4.5vw;
  }

  .black-piece {
    height: 4.5vw;
    width: 4.5vw;
  }

  td {
    width: 12vw;
    height: 12vw;
  }

  .red-turn-text {
    font-size: 40px;
  }

  .black-turn-text {
    font-size: 40px;
  }

  table {
    margin: 0;
  }

  .mobile {
    display: block;
  }

  .desktop {
    display: none;
  }

  .red-turn-text {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  }
}

@media screen and (max-width: 380px) {
  .red-piece {
    height: 3vw;
    width: 3vw;
  }

  .black-piece {
    height: 3vw;
    width: 3vw;
  }
}

@media screen and (max-width: 345px) {
  .red-piece {
    height: 2.5vw;
    width: 2.5vw;
  }

  .black-piece {
    height: 2.5vw;
    width: 2.5vw;
  }
}

@media screen and (max-width: 300px) {
  .red-piece {
    height: 1.5vw;
    width: 1.5vw;
  }

  .black-piece {
    height: 1.5vw;
    width: 1.5vw;
  }

  .red-turn-text {
    font-size: 35px;
  }

  .black-turn-text {
    font-size: 35px;
  }
} */