html {
  box-sizing: border-box;
}

body {
  background-color: #2d2d2d;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;

  @media (min-width: 960px) {
    width: 80vw;
  }

  @media (min-height: 960px) {
    height: 80vh;
  }
}

button[title="Rotate"] {
  position: absolute;
  top: 20px;
  right: 20px;
  background: 0;
  border: 0;
  cursor: pointer;
  transition: transform 1.5s;

  &.flipped {
    transform: rotate(180deg);
  }
}

#board {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 100%;
  max-height: 100vw;
  max-width: 100vh;
  aspect-ratio: 1 / 1;
  margin: auto auto;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  transition: transform 1.5s;

  .piece {
    transition: transform 1.5s;
    pointer-events: none;
  }

  &.flipped {
    transform: rotate(180deg);

    .piece {
      transform: rotate(180deg);
    }
  }
}

[class*=column-],
[class*=row-] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 48px;
}

[class*=column-] {
  cursor: pointer;

  &.highlight {
    filter: hue-rotate(180deg);
  }
}

[class*=row-]:nth-child(even) {
  [class*=column-] {
    background-color: #b58863;

    &:nth-child(even) {
      background-color: #f0d9b5
    }
  }
}

[class*=row-]:nth-child(odd) {
  [class*=column-] {
    background-color: #b58863;

    &:nth-child(odd) {
      background-color: #f0d9b5
    }
  }
}


[data-player="white"],
[data-player="black"] {
  transition: font-size .25s;
  cursor: pointer;

  &:hover,
  &:active,
  &:focus {
    @media (min-width: 960px) {
      font-size: 96px;
    }
  }
}

[data-player="white"] {
  color: white;
}

[data-player="black"] {
  color: black;
}