Spent way too much time on styling

index.html

@@ -150,10 +150,10 @@
         <div>
           <!-- <img class="logo" src="logo-davion.png" /> -->
           <p>
-            Davion
             <button type="button" class="clear-firing-arcs" data-allegiance="davion">
               Clear Firing Arcs
             </button>
+            <strong>Davion</strong>
             <br>
             <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
             17th Kestral Mechanized Infantry -->
@@ -211,10 +211,10 @@
         <div>
           <!-- <img class="logo" src="logo-liao.png" /> -->
           <p>
-            Liao
             <button type="button" class="clear-firing-arcs" data-allegiance="liao">
               Clear Firing Arcs
             </button>
+            <strong>Liao</strong>
             <br>
             <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
             Aldebaran Home Guard -->

style.css

@@ -15,11 +15,18 @@ svg {
 }
 
 div#content {
+  border-left: 1px solid gray;
   flex-basis: 0;
   /* overflow: scroll; */
   max-height: 100vh;
   display: flex;
   flex-direction: column;
+  /* padding: 2px; */
+}
+
+#content > div:first-of-type {
+  padding: 2px;
+  border-bottom: 1px solid gray;
 }
 
 #record-sheet {
@@ -28,18 +35,36 @@ div#content {
   display: flex;
   flex-direction: column;
   /* display: none; */
+  background-color: gray;
 }
 
 #record-sheet > div {
-  padding: 0 2px;
-  max-height: 50%;
+  /* padding: 0 2px; */
   overflow-y: auto;
+  /* border: 1px solid black; */
+}
+
+#record-sheet > div > p {
+  margin: 0;
+  margin-top: 0px;
+  margin-bottom: 1px;
+  padding: 6px 2px;
+  background-color: lightgray;
 }
 
 #record-sheet > div > div {
-  border: 1px solid black;
-  margin: 2px 0;
-  padding: 2px;
+  /* border: 1px solid black; */
+  margin-bottom: 1px;
+  padding: 6px 4px;
+  /* border-radius: 4px; */
+}
+
+#record-sheet > div:last-of-type {
+  margin-top: 2px;
+}
+
+#record-sheet > div > div:last-of-type {
+  margin-bottom: 0;
 }
 
 circle#point {
@@ -119,6 +144,7 @@ line.ruler {
   display: inline-block;
   position: relative;
   white-space: nowrap;
+  background-color: white;
 }
 
 image#img1 {
@@ -169,10 +195,30 @@ rect#debug-view-box {
 @media (width >= 1800px) {
   #record-sheet {
     flex-direction: row;
+    /* gap: 2px; */
+  }
+
+  #record-sheet > div > p {
+    margin-top: 0;
   }
 
   #record-sheet > div {
-    max-height: unset;
+    /* max-height: unset; */
     overflow-y: unset;
+    height: min-content;
+  }
+
+  #record-sheet div:last-of-type {
+    margin-top: 0;
+  }
+
+  #record-sheet > div:first-of-type > div {
+    /* margin-left: 1px; */
+    margin-right: 1px;
+  }
+
+  #record-sheet > div:last-of-type > div {
+    margin-left: 1px;
+    /* margin-right: 1px; */
   }
 }