#board {
  background-image: url("assets/board.jpg");
  background-size: 100%;
  opacity: 0.9;
  margin: 0 auto;
  padding: 5vh;
  height: 60vh;
  aspect-ratio: 1; }

@media screen and (max-width: 600px) {
  #board {
    height: 80vw;
    padding: 5vw; } }

table {
  height: 100%;
  width: 100%; }

table, tr, td {
  border: 1px solid black;
  padding: 0;
  margin: 0;
  border-collapse: collapse; }

.stone {
  position: absolute;
  display: block; }

.stone img {
  width: 100%; }

.link {
  position: absolute;
  display: block;
  opacity: 0.5;
  cursor: pointer;
  vertical-align: middle; }

.link img {
  display: block;
  padding: 10%;
  width: 80%; }

.link:not(:hover) {
  opacity: 0;
  width: 200%; }

#head {
  display: block;
  height: 14vh;
  margin: 0;
  padding: 0;
  overflow: scroll; }

@media screen and (max-width: 600px) {
  #head {
    height: 30vw;
    margin-top: calc(20vh - 20vw); } }

img.player-image-left {
  left: calc(50% - 35vh);
  position: absolute;
  display: inline-block;
  z-index: 1;
  height: 8.4vh;
  margin: 2.8vh;
  top: 0; }

img.player-image-right {
  left: calc(50% + 21vh);
  position: absolute;
  display: inline-block;
  z-index: 1;
  height: 8.4vh;
  margin: 2.8vh;
  top: 0; }

@media screen and (max-width: 600px) {
  img.player-image-left {
    left: calc(50% - 52.8vw);
    height: 12vw;
    margin: 9vw;
    top: calc(20vh - 20vw); }
  img.player-image-right {
    left: calc(50% + 22.8vw);
    height: 12vw;
    margin: 9vw;
    top: calc(20vh - 20vw); } }

.turn {
  width: 20vh;
  height: 4vh;
  margin: 0 auto;
  margin-top: calc(7vh - 4vh);
  background-color: black;
  clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); }

.turn h2 {
  font-size: 3vh; }

.turn .border {
  height: 4vh;
  margin: 0 auto;
  margin-top: 4vh;
  background-color: black;
  clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); }

.turn .inner {
  height: 100%;
  width: 100%;
  text-align: center;
  background-color: #efd;
  clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%); }

div.player-label-left {
  clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%);
  left: calc(50% - 25.4vh);
  width: 16vh;
  height: 4vh;
  font-size: 3vh;
  text-align: center;
  background-color: #000b;
  color: white;
  position: absolute;
  top: calc(5vh); }

div.player-label-right {
  clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%);
  left: calc(50% + 9.4vh);
  width: 16vh;
  height: 4vh;
  font-size: 3vh;
  text-align: center;
  background-color: #000b;
  color: white;
  position: absolute;
  top: calc(5vh); }

@media screen and (max-width: 600px) {
  div.player-label-left {
    left: calc(50% - 37.2vw);
    width: 26vw;
    height: 6vw;
    font-size: 5vw;
    top: calc(20vh - 20vw + 15vw - 3vw); }
  div.player-label-right {
    left: calc(50% + 45vw - 33.8vw);
    width: 26vw;
    height: 6vw;
    font-size: 5vw;
    top: calc(20vh - 20vw + 15vw - 3vw); } }

body {
  background-image: url("assets/dismal.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center top;
  background-attachment: fixed;
  background-color: #efd;
  margin: 0; }