* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
  color: #ffffff;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #131313;
}

main {
  width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: min-content min-content;
  grid-template-areas: "instructions instructions instructions" "score1         gamespace          score2";
  flex-direction: column;
  justify-items: center;
  align-items: center;
  row-gap: 50px;
}
@media screen and (max-width: 1000px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content min-content;
    grid-template-areas: "instructions  instructions" "score1              score2" "gamespace        gamespace";
  }
}

.yellow {
  color: #ffae00;
}

.red {
  color: #ff0000;
}

.instructions {
  grid-area: instructions;
  display: grid;
}
.instructions h2 {
  font-size: 3rem;
  line-height: 0.8em;
  font-weight: 400;
  text-align: center;
  opacity: 0;
  grid-column: 1;
  grid-row: 1;
  z-index: -1;
}
@media screen and (max-width: 1000px) {
  .instructions h2 {
    font-size: 2rem;
  }
}
.instructions h2 span {
  font-weight: 500;
}
.instructions h2 span.rematch {
  font-size: 0.5em;
  font-weight: 400;
  opacity: 0.7;
  text-decoration: underline;
  cursor: pointer;
}
.instructions h2 span.rematch:hover {
  opacity: 1;
}

.score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  .score {
    font-size: 1rem;
  }
}
.score--value {
  font-size: 4rem;
}
@media screen and (max-width: 1000px) {
  .score--value {
    font-size: 2rem;
  }
}
.score:nth-child(2) {
  grid-area: score1;
}
.score:nth-child(3) {
  grid-area: score2;
}

.game-space {
  display: grid;
  height: fit-content;
  width: fit-content;
  grid-template-columns: repeat(7, min-content);
  grid-template-rows: repeat(6, 1fr);
  align-items: center;
  justify-items: center;
  border: #002ae0 1rem solid;
  border-radius: 10px;
  grid-area: gamespace;
}
.game-space img {
  height: 7.2vw;
  max-height: 86.4px;
  width: auto;
}
@media screen and (max-width: 1000px) {
  .game-space img {
    height: 11.52vw;
  }
}
.game-space img.board-piece {
  cursor: pointer;
}
.game-space img.chip {
  max-height: 6.48vw;
  max-height: 77.76px;
  opacity: 0;
  z-index: -1;
}
@media screen and (max-width: 1000px) {
  .game-space img.chip {
    height: 10.368vw;
  }
}
.game-space img:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.game-space img:nth-child(43) {
  grid-column: 1;
  grid-row: 1;
}
.game-space img:nth-child(85) {
  grid-column: 1;
  grid-row: 1;
}
.game-space img:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.game-space img:nth-child(44) {
  grid-column: 2;
  grid-row: 1;
}
.game-space img:nth-child(86) {
  grid-column: 2;
  grid-row: 1;
}
.game-space img:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}
.game-space img:nth-child(45) {
  grid-column: 3;
  grid-row: 1;
}
.game-space img:nth-child(87) {
  grid-column: 3;
  grid-row: 1;
}
.game-space img:nth-child(4) {
  grid-column: 4;
  grid-row: 1;
}
.game-space img:nth-child(46) {
  grid-column: 4;
  grid-row: 1;
}
.game-space img:nth-child(88) {
  grid-column: 4;
  grid-row: 1;
}
.game-space img:nth-child(5) {
  grid-column: 5;
  grid-row: 1;
}
.game-space img:nth-child(47) {
  grid-column: 5;
  grid-row: 1;
}
.game-space img:nth-child(89) {
  grid-column: 5;
  grid-row: 1;
}
.game-space img:nth-child(6) {
  grid-column: 6;
  grid-row: 1;
}
.game-space img:nth-child(48) {
  grid-column: 6;
  grid-row: 1;
}
.game-space img:nth-child(90) {
  grid-column: 6;
  grid-row: 1;
}
.game-space img:nth-child(7) {
  grid-column: 7;
  grid-row: 1;
}
.game-space img:nth-child(49) {
  grid-column: 7;
  grid-row: 1;
}
.game-space img:nth-child(91) {
  grid-column: 7;
  grid-row: 1;
}
.game-space img:nth-child(8) {
  grid-column: 1;
  grid-row: 2;
}
.game-space img:nth-child(50) {
  grid-column: 1;
  grid-row: 2;
}
.game-space img:nth-child(92) {
  grid-column: 1;
  grid-row: 2;
}
.game-space img:nth-child(9) {
  grid-column: 2;
  grid-row: 2;
}
.game-space img:nth-child(51) {
  grid-column: 2;
  grid-row: 2;
}
.game-space img:nth-child(93) {
  grid-column: 2;
  grid-row: 2;
}
.game-space img:nth-child(10) {
  grid-column: 3;
  grid-row: 2;
}
.game-space img:nth-child(52) {
  grid-column: 3;
  grid-row: 2;
}
.game-space img:nth-child(94) {
  grid-column: 3;
  grid-row: 2;
}
.game-space img:nth-child(11) {
  grid-column: 4;
  grid-row: 2;
}
.game-space img:nth-child(53) {
  grid-column: 4;
  grid-row: 2;
}
.game-space img:nth-child(95) {
  grid-column: 4;
  grid-row: 2;
}
.game-space img:nth-child(12) {
  grid-column: 5;
  grid-row: 2;
}
.game-space img:nth-child(54) {
  grid-column: 5;
  grid-row: 2;
}
.game-space img:nth-child(96) {
  grid-column: 5;
  grid-row: 2;
}
.game-space img:nth-child(13) {
  grid-column: 6;
  grid-row: 2;
}
.game-space img:nth-child(55) {
  grid-column: 6;
  grid-row: 2;
}
.game-space img:nth-child(97) {
  grid-column: 6;
  grid-row: 2;
}
.game-space img:nth-child(14) {
  grid-column: 7;
  grid-row: 2;
}
.game-space img:nth-child(56) {
  grid-column: 7;
  grid-row: 2;
}
.game-space img:nth-child(98) {
  grid-column: 7;
  grid-row: 2;
}
.game-space img:nth-child(15) {
  grid-column: 1;
  grid-row: 3;
}
.game-space img:nth-child(57) {
  grid-column: 1;
  grid-row: 3;
}
.game-space img:nth-child(99) {
  grid-column: 1;
  grid-row: 3;
}
.game-space img:nth-child(16) {
  grid-column: 2;
  grid-row: 3;
}
.game-space img:nth-child(58) {
  grid-column: 2;
  grid-row: 3;
}
.game-space img:nth-child(100) {
  grid-column: 2;
  grid-row: 3;
}
.game-space img:nth-child(17) {
  grid-column: 3;
  grid-row: 3;
}
.game-space img:nth-child(59) {
  grid-column: 3;
  grid-row: 3;
}
.game-space img:nth-child(101) {
  grid-column: 3;
  grid-row: 3;
}
.game-space img:nth-child(18) {
  grid-column: 4;
  grid-row: 3;
}
.game-space img:nth-child(60) {
  grid-column: 4;
  grid-row: 3;
}
.game-space img:nth-child(102) {
  grid-column: 4;
  grid-row: 3;
}
.game-space img:nth-child(19) {
  grid-column: 5;
  grid-row: 3;
}
.game-space img:nth-child(61) {
  grid-column: 5;
  grid-row: 3;
}
.game-space img:nth-child(103) {
  grid-column: 5;
  grid-row: 3;
}
.game-space img:nth-child(20) {
  grid-column: 6;
  grid-row: 3;
}
.game-space img:nth-child(62) {
  grid-column: 6;
  grid-row: 3;
}
.game-space img:nth-child(104) {
  grid-column: 6;
  grid-row: 3;
}
.game-space img:nth-child(21) {
  grid-column: 7;
  grid-row: 3;
}
.game-space img:nth-child(63) {
  grid-column: 7;
  grid-row: 3;
}
.game-space img:nth-child(105) {
  grid-column: 7;
  grid-row: 3;
}
.game-space img:nth-child(22) {
  grid-column: 1;
  grid-row: 4;
}
.game-space img:nth-child(64) {
  grid-column: 1;
  grid-row: 4;
}
.game-space img:nth-child(106) {
  grid-column: 1;
  grid-row: 4;
}
.game-space img:nth-child(23) {
  grid-column: 2;
  grid-row: 4;
}
.game-space img:nth-child(65) {
  grid-column: 2;
  grid-row: 4;
}
.game-space img:nth-child(107) {
  grid-column: 2;
  grid-row: 4;
}
.game-space img:nth-child(24) {
  grid-column: 3;
  grid-row: 4;
}
.game-space img:nth-child(66) {
  grid-column: 3;
  grid-row: 4;
}
.game-space img:nth-child(108) {
  grid-column: 3;
  grid-row: 4;
}
.game-space img:nth-child(25) {
  grid-column: 4;
  grid-row: 4;
}
.game-space img:nth-child(67) {
  grid-column: 4;
  grid-row: 4;
}
.game-space img:nth-child(109) {
  grid-column: 4;
  grid-row: 4;
}
.game-space img:nth-child(26) {
  grid-column: 5;
  grid-row: 4;
}
.game-space img:nth-child(68) {
  grid-column: 5;
  grid-row: 4;
}
.game-space img:nth-child(110) {
  grid-column: 5;
  grid-row: 4;
}
.game-space img:nth-child(27) {
  grid-column: 6;
  grid-row: 4;
}
.game-space img:nth-child(69) {
  grid-column: 6;
  grid-row: 4;
}
.game-space img:nth-child(111) {
  grid-column: 6;
  grid-row: 4;
}
.game-space img:nth-child(28) {
  grid-column: 7;
  grid-row: 4;
}
.game-space img:nth-child(70) {
  grid-column: 7;
  grid-row: 4;
}
.game-space img:nth-child(112) {
  grid-column: 7;
  grid-row: 4;
}
.game-space img:nth-child(29) {
  grid-column: 1;
  grid-row: 5;
}
.game-space img:nth-child(71) {
  grid-column: 1;
  grid-row: 5;
}
.game-space img:nth-child(113) {
  grid-column: 1;
  grid-row: 5;
}
.game-space img:nth-child(30) {
  grid-column: 2;
  grid-row: 5;
}
.game-space img:nth-child(72) {
  grid-column: 2;
  grid-row: 5;
}
.game-space img:nth-child(114) {
  grid-column: 2;
  grid-row: 5;
}
.game-space img:nth-child(31) {
  grid-column: 3;
  grid-row: 5;
}
.game-space img:nth-child(73) {
  grid-column: 3;
  grid-row: 5;
}
.game-space img:nth-child(115) {
  grid-column: 3;
  grid-row: 5;
}
.game-space img:nth-child(32) {
  grid-column: 4;
  grid-row: 5;
}
.game-space img:nth-child(74) {
  grid-column: 4;
  grid-row: 5;
}
.game-space img:nth-child(116) {
  grid-column: 4;
  grid-row: 5;
}
.game-space img:nth-child(33) {
  grid-column: 5;
  grid-row: 5;
}
.game-space img:nth-child(75) {
  grid-column: 5;
  grid-row: 5;
}
.game-space img:nth-child(117) {
  grid-column: 5;
  grid-row: 5;
}
.game-space img:nth-child(34) {
  grid-column: 6;
  grid-row: 5;
}
.game-space img:nth-child(76) {
  grid-column: 6;
  grid-row: 5;
}
.game-space img:nth-child(118) {
  grid-column: 6;
  grid-row: 5;
}
.game-space img:nth-child(35) {
  grid-column: 7;
  grid-row: 5;
}
.game-space img:nth-child(77) {
  grid-column: 7;
  grid-row: 5;
}
.game-space img:nth-child(119) {
  grid-column: 7;
  grid-row: 5;
}
.game-space img:nth-child(36) {
  grid-column: 1;
  grid-row: 6;
}
.game-space img:nth-child(78) {
  grid-column: 1;
  grid-row: 6;
}
.game-space img:nth-child(120) {
  grid-column: 1;
  grid-row: 6;
}
.game-space img:nth-child(37) {
  grid-column: 2;
  grid-row: 6;
}
.game-space img:nth-child(79) {
  grid-column: 2;
  grid-row: 6;
}
.game-space img:nth-child(121) {
  grid-column: 2;
  grid-row: 6;
}
.game-space img:nth-child(38) {
  grid-column: 3;
  grid-row: 6;
}
.game-space img:nth-child(80) {
  grid-column: 3;
  grid-row: 6;
}
.game-space img:nth-child(122) {
  grid-column: 3;
  grid-row: 6;
}
.game-space img:nth-child(39) {
  grid-column: 4;
  grid-row: 6;
}
.game-space img:nth-child(81) {
  grid-column: 4;
  grid-row: 6;
}
.game-space img:nth-child(123) {
  grid-column: 4;
  grid-row: 6;
}
.game-space img:nth-child(40) {
  grid-column: 5;
  grid-row: 6;
}
.game-space img:nth-child(82) {
  grid-column: 5;
  grid-row: 6;
}
.game-space img:nth-child(124) {
  grid-column: 5;
  grid-row: 6;
}
.game-space img:nth-child(41) {
  grid-column: 6;
  grid-row: 6;
}
.game-space img:nth-child(83) {
  grid-column: 6;
  grid-row: 6;
}
.game-space img:nth-child(125) {
  grid-column: 6;
  grid-row: 6;
}
.game-space img:nth-child(42) {
  grid-column: 7;
  grid-row: 6;
}
.game-space img:nth-child(84) {
  grid-column: 7;
  grid-row: 6;
}
.game-space img:nth-child(126) {
  grid-column: 7;
  grid-row: 6;
}

/*# sourceMappingURL=style.css.map */