responsive design

style.css

@@ -23,20 +23,21 @@ main {
 }
 
 h1 {
+    margin-top:0;
     margin-bottom: .5em;
 }
 
 #table-container {
-    margin: auto;
     padding: 1em;
     background-color: #F5F5F5;
-    width: fit-content;
+    width: 100vw;
+    margin:0 -1.5rem;
 }
 
 table {
     border-collapse: collapse;
-    margin: 0;
     font-size: .9em;
+    margin: 0;
 }
 
 td {
@@ -53,8 +54,9 @@ td > * {
 }
 
 td:first-child {
+    font-size:.8em;
     text-align: right;
-    width: 9rem;
+    width: 5rem;
 }
 
 td:nth-child(2), td:nth-child(4) {
@@ -66,9 +68,10 @@ td:nth-child(3), td:nth-child(5) {
 }
 
 td:nth-child(6), td[colspan="5"] + td {
-    padding-left: 1rem;
+    font-size:.8em;
+    padding-left: 0.5rem;
     text-align: left;
-    width: 11rem;
+    width: 8rem;
 }
 
 td[colspan="5"] {
@@ -91,7 +94,27 @@ canvas {
         max-width: 42rem;
     }
 
+    h1{
+        margin-top: .5em;
+    }
+
     table {
         font-size: inherit;
     }
+
+    #table-container{
+        margin:auto;
+        width:fit-content;
+    }
+
+    td:first-child {
+        font-size:inherit;
+        width: 9rem;
+    }
+
+    td:nth-child(6), td[colspan="5"] + td {
+        font-size:inherit;
+        padding-left: 1rem;
+        width: 11rem;
+    }
 }