#main {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#boardContainer {
  /* Should be a multiple of 160 to have things line up */
  /* calc(60% - mod(60%, 160)) = round(down, 60%, 160px) */
  aspect-ratio: 1/1;
  height: round(up, 60%, 160px);
  width: auto;
  position: relative;
}

#board {
  height: 100%;
  width: 100%;
  box-shadow:
    0 2px 2px 0 rgba(0, 0, 0, 0.1 4),
    0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

#promotionMenu {
  position: absolute;
  width: 12.5%;
  height: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 15%;
}

#promotionMenu>div {
  width: 100%;
  height: 25%;
  cursor: pointer;
  position: relative;
  background-color: #f8f8ffe6;
}

#promotionMenu>div:hover {
  border: 2px solid black;
  border-radius: 15%;
}

#promotionMenu>div:first-child {
  border-top-left-radius: 30%;
  border-top-right-radius: 30%;
}

#promotionMenu>div:last-child {
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 30%;
}

#promotionMenu>div>piece {
  width: 100%;
  height: 100%;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}

cg-board {
  background-color: var(--shade);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.cg-wrap coords {
  font-weight: bold;
}

.cg-wrap coords.ranks {
  right: -4px;
  top: 2px;
  left: auto;
}

.cg-wrap coords.ranks coord {
  transform: none;
}

.cg-wrap coords.files {
  bottom: 0px;
  left: 2px;
  height: 1.4em;
  text-transform: lowercase;
  text-align: left;
}