fix flex display

css/main.css

@@ -3,9 +3,9 @@
   margin: 0;
   vertical-align: middle;
 }
-
 body {
-  display: block;
+  height: vh;
+  width: vw;
 }
 
 .full-screen {
@@ -29,19 +29,21 @@ content {
     "white-pos"
     "board-space"
     "black-pos"; */
-  display: flex;
+  display: flex !important;
   flex-direction: column; 
   /* justify-content: flex-end; */
   justify-content: space-between !important;
-  justify-items: stretch !important;
+  /* justify-items: stretch !important; */
+  height: 100vh;
+  width: 100vw;
 }
 
 .player-pos {
   /* flex-grow: 2; */
   display: flex;
-  align-content: center;
   align-items: center;
-  justify-content: space-between;
+  justify-content: space-around;
+  flex: 5;
 }
 
 .player-pos#white-pos {
@@ -52,6 +54,7 @@ content {
 .player-pos#black-pos {
   /* grid-area: black-pos; */
   flex-direction: row-reverse;
+  justify-self: flex-end;
 }
 
 #kifu {
@@ -63,14 +66,14 @@ content {
 }
 
 #kifu table {
-
+  
 }
 
 .bowl {
   order: -1;
   margin: 1vh;
-  height: 8vh;
-  width: 8vh;
+  height: 10vh;
+  width: 10vh;
   /* border: solid black; */
   border-radius: 50%;
   background-color: rgb(116, 48, 17);
@@ -94,14 +97,12 @@ content {
   display: flex;
   flex-direction: column;
   background-color: #EAB24E;
-  width: 90vmin;
-  height: 90vmin;
+  /* width: 90vmin; */
+  /* height: 90vmin; */
   padding: 1vmin;
   z-index: 1;
   box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
-}
-
-#board-space::after {
+  flex: 1;
 }
 
 #board-space table {

index.html

@@ -289,12 +289,12 @@
     </div>
     <div id="black-pos" class="player-pos">
       <div id="black-bowl" class="bowl">Black Bowl</div>
-      <div id="black-caps" class="caps">Black Captures</div>
+      <div id="black-caps" class="caps">Black Caps</div>
       <div id="kifu">
         <table>
           <tr>
             <td>
-              
+
             </td>
           </tr>
         </table>  

js/main.js

@@ -100,12 +100,11 @@ class Point {
     console.log(this)
     return !this.findStone(gameState.turn * -1).some(val => val.emptyNeighbor());
   }
-  // returns 
+  // returns first opposing neighbor that does not have an opposing neighbor
   checkGroup = () => {
     return this.findStone(gameState.turn).some(val => val.emptyNeighbor());
-    // returns first neighbor of turn color that has an empty neighbor
+    // returns first friendly neighbor that has an empty neighbor
   } 
-
   findStone = (stone) => {
     return this.checkNeighbors().filter(val => {
       if ( val.stone === (stone) ) return val;