Many improvements

common/main.css

@@ -9,7 +9,7 @@
   --dark-background-color: #121212;
   --dark-text-color: #eeeeee;
 }
-
+html{ height: 100% }
 
 body{
   --accent-color:#303f9f;
@@ -27,6 +27,14 @@ body{
   color: var(--text-color);
   font-size: 1.1rem;
   margin: 0;
+  height: 100%;
+  display: grid;
+  grid-template-areas:
+    'header'
+    'menu'
+    'main'
+    'footer';
+  grid-template-rows: auto auto 1fr auto;
 }
 body.theme-dark {
   --background-color: var(--dark-background-color);
@@ -40,6 +48,7 @@ body.theme-dark {
   --button-color: var(--button-color-dark);
 }
 header {
+  grid-area: header;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -64,7 +73,24 @@ header div{
   margin-left: auto;
   align-items: center;
 }
+footer {
+  grid-area: footer;
+  border-radius: 0.4rem;
+  outline-style: solid;
+  outline-width: thin;
+  outline-color: var(--table-border);
 
+  margin: auto;
+}
+
+footer p{
+  margin: 0.5rem;
+  line-height: 1.5;
+
+}
+.tab-container{
+  grid-area: main;
+}
 table {
   border-collapse: collapse;
   line-height: 1.1rem;
@@ -135,7 +161,7 @@ h4 {
   gap: 1rem;
   /* Your container needs a fixed height, and it 
    * needs to be taller than your tallest column. */
-  height: 400rem; 
+  height: 200rem; 
 }
 .all-result::before,
 .all-result::after {
@@ -215,6 +241,10 @@ h4 {
   .theme-select {
     margin-left: unset;
   }
+  .splits-table{
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
   .hiddendiv {
   display:none;
@@ -238,6 +268,7 @@ h4 {
 }
 .splits-table{
   display: none;
+  max-width: 100vw;
 }
 .splits-table td:first-child{
   position: sticky;
@@ -255,7 +286,23 @@ h4 {
   min-width: 600px;
   margin: auto;
 }
+a{
+  color: var(--text-accent-color);
+  border-bottom: 1px solid var(--text-accent-color);
+  border-bottom-style: inset;
+  text-decoration: none;
+  padding: 0 1px 0;
+  margin: 0 -1px 0;
+}
+a:hover{
+  border-bottom-width: 3px;
+  margin-bottom: -2px;
+}
+select{
+  cursor: pointer;
+}
 .fancy-button {
+  cursor: pointer;
   background-color: transparent;
   color: var(--text-accent-color);
   text-align: center;
@@ -294,6 +341,7 @@ h4 {
   box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
 }
 .tab-list{
+  grid-area: menu;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
@@ -306,12 +354,13 @@ h4 {
   margin: 0.2rem;
 }
 .tab-button{
+  all: revert;
   display: block;
   padding: 0.5rem 1rem;
   border-radius: .25rem;
   text-decoration: none;
   font-weight: 600;
-  transition: 0.3s;
+  transition: 0.15s;
   color: var(--text-accent-color);
 }
 .tab-button.active{
@@ -325,7 +374,7 @@ h4 {
   box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important;
 }
 .tab-button:hover {
-  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
 }
 .tab-content{
  display: none; 
@@ -352,6 +401,7 @@ h4 {
     flex: 1;
     width: fit-content;
     justify-items: left;
+    max-width: 50vw;
   }
   .status-div{
     margin-left: auto;
@@ -360,6 +410,9 @@ h4 {
     align-self: flex-start;
     width: 100%;
   }
+  footer{
+    width: 100%;
+  }
   .tab-list{
     padding: 0;
     justify-content: space-around;