html, body {
  margin: 0;
  border: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  font-size: 1.4rem;
}

main {
  background-image: url('../img/Board.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: min(70vh, 70vw);
  height: min(70vh, 70vw);
  padding: 5px;
}

output {
  margin-top: 2rem;;
  font-size: 1.2rem;
}

.row-labels {
  /* debug */
  border: 0px solid tomato; 

  position: relative;
  top: calc(calc(min(70vh, 70vw) / 8) / 4);
  left: -22px;
  display: flex;
  flex-direction: column;
  align-items: start;;
  width: calc(min(70vh, 70vh) / 8);
  height: 100%;

  color: lightslategray;
  font-size: 1.2rem;
}

.row-labels > div {
  height: calc(min(70vh, 70vw) / 8)
}

table {
  position: relative;
  top: -100%;

  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  border-collapse: collapse;
  counter-reset: rowCounter 9;
}

.col-labels {
  /* debug */
  border: 0px solid tomato;

  position: relative;
  top: calc(max(-70vh, -70vw) + 8px);
  left: calc(calc(min(70vh, 70vw) / 8) / 3);
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 10px;

  color: lightslategray;
}

.col-labels > div {
  width: calc(min(70vh, 70vw) / 8);
  font-size: 1.2rem;
}

td {
  /* debug */
  border: 0px solid #00beef; 

  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

td.queen {
  background-image: url('../img/Crown8.png');
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(25%) scale(75%);
}

ol#highscore {
  list-style: none;
  color: gray;
  margin-top: 50px;
}

#highscore li {
  list-style-position: inherit;
}

#highscore:not(:empty)::before {
  content: "high score:";
  position: relative;
  left: 40%;
  top: -10px;
  transform: translateX(-50%);
}