Added dropdown for choosing theme. Did some refactoring and bug fixing.

common/main.css

@@ -2,17 +2,14 @@
   --accent-color-dark: #045d56;
   --button-color-dark: #045d56;
   --text-accent-color-dark: #1eb980;
-  --table-border-dark: #00000000;
+  --table-border-dark: #1b1b1b;
   --tr-color-dark: #1b1b1b;
   --tr-nth-color-dark: #121212;
   --table-highlight-dark: #616161;
   --dark-background-color: #121212;
   --dark-text-color: #eeeeee;
 }
-body.theme-dark {
-  --background-color: var(--dark-background-color);
-  --text-color: var(dark-text-color);
-}
+
 
 body{
   --accent-color:#303f9f;
@@ -29,9 +26,18 @@ body{
   background-color: var(--background-color);
   color: var(--text-color);
   font-size: 1.1rem;
-  min-height: 100vw;
 }
-
+body.theme-dark {
+  --background-color: var(--dark-background-color);
+  --text-color: var(--dark-text-color);
+  --tr-nth-color: var(--tr-nth-color-dark);
+  --table-border: var(--table-border-dark);
+  --table-highlight: var(--table-highlight-dark);
+  --accent-color: var(--accent-color-dark);
+  --text-accent-color: var(--text-accent-color-dark);
+  --tr-color: var(--tr-color-dark);
+  --button-color: var(--button-color-dark);
+}
 header {
   display: flex;
   justify-content: space-between;
@@ -64,6 +70,9 @@ table {
   font-weight: 410;
   margin: 0.8rem;
   border-radius: 0.4rem;
+  outline-style: solid;
+  outline-width: thin;
+  outline-color: var(--table-border);
 }
 
 td, th {
@@ -78,7 +87,7 @@ tr {
 tr:nth-child(even){background-color: var(--tr-nth-color);}
 
 tr:hover {
-  background-color: var(--table-highlight);
+  background-color: var(--table-highlight) !important;
 }
 tr:visited {
   background-color:var(--table-highlight);    
@@ -96,6 +105,7 @@ th {
   background-color: #4CAF50;
   color: white;
 }
+
 h4 {
   font-size: 20px;
   margin-bottom: auto;
@@ -116,12 +126,15 @@ h4 {
 
 
 .all-result{
+  margin-left: auto;
+  margin-right: auto;
   display: flex;
   flex-flow: column wrap;
-  align-content: space-between;
+  align-content: center;
+  gap: 1rem;
   /* Your container needs a fixed height, and it 
    * needs to be taller than your tallest column. */
-  height: 700rem; 
+  height: 400rem; 
 }
 .all-result::before,
 .all-result::after {
@@ -131,7 +144,6 @@ h4 {
   order: 2;
 }
 .all-result-div{
-  width: 32%;
   margin-bottom: 2%; /* Optional */
 }
 .all-result-div:nth-child(3n+1) { order: 1; }
@@ -162,10 +174,48 @@ h4 {
   body{
     font-size: 1rem;
   }
+}
+@media only screen and (max-width:1920px){
+  .all-result{
+    display: flex;
+    flex-flow: column wrap;
+    /* Your container needs a fixed height, and it 
+    * needs to be taller than your tallest column. */
+    height: 700rem; 
+  }
+  .all-result::before,
+  .all-result::after {
+    content: "";
+    flex-basis: 100%;
+    width: 0;
+    order: 2;
+  }
+  .all-result-div{
+    margin-bottom: 2%; /* Optional */
+  }
   .all-result-div:nth-child(2n+1) { order: 1; }
   .all-result-div:nth-child(2n) { order: 2; }
 }
-.hiddendiv {
+.theme-select {
+  margin-left: 2rem;
+}
+@media only screen and (max-width:1200px){
+  .all-result{
+    flex-direction: column;
+    width: fit-content;
+    align-content: unset;
+    height: max-content;
+    margin: auto;
+  }
+  .all-result-div{
+    max-width: 100%;
+  }
+  .all-result-div:nth-child(n) { order: 1; }
+  .theme-select {
+    margin-left: unset;
+  }
+}
+  .hiddendiv {
   display:none;
 }
 .nav-link {
@@ -191,6 +241,11 @@ h4 {
   color: #fff;
   background-color: var(--button-color);
 }
+.nav-link:focus{
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  outline: none;
+  box-shadow: 0 0 2px 2px var(--text-accent-color), 0 .5rem 1rem rgba(0,0,0,.15) !important; 
+}
 .result-div{
   width: max-content;
   margin: auto;
@@ -231,7 +286,7 @@ h4 {
   border: thin solid #3c4043;
   font-weight: 700;
   border-radius: 0.25rem;
-  transition: all 0.2s ease 0s;;
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   margin: 0.4rem;
   padding-top: 0.2rem;
   padding-bottom: 0.2rem;
@@ -245,19 +300,21 @@ h4 {
   background-color: var(--button-color);
   border: thin solid var(--button-color);
   font-weight: 700;
-  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
+  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
   transition: all 0.4s ease 0s;
 }
 }
 
 .fancy-button:active{
    background-color: var(--accent-color);
-   box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0,0,0,.12);
-   transform: translateY(3px);
    color: var(--dark-text-color);
+   transition: 0.1s ease-out;
+
 }
 .fancy-button:focus{
+  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
   outline: none;
+  box-shadow: 0 0 2px 2px var(--button-color), 0 .5rem 1rem rgba(0,0,0,.15);
 }
 
 
@@ -267,7 +324,10 @@ h4 {
     flex-wrap: wrap;
     padding-left: 0.2rem;
     padding-right: 0.2rem;
-    max-height: 5rem;
+    max-height: 7rem;
+  }
+  header select{
+    margin-left: auto;
   }
   .header-column{
     display: flex;
@@ -287,6 +347,8 @@ h4 {
   .ResultTable{
     width: 100%;
     margin: 0px;
+    margin-bottom: 0.1rem;
+    margin-top: 0.1rem;
     border-radius: .4rem;
   }
   .result-div{
@@ -298,18 +360,6 @@ h4 {
     margin: 0px;
     width: 100%;
   }
-  .all-result{
-    flex-direction: column;
-    width: 100vw;
-    align-content: unset;
-  }
-  .all-result-div{
-    width: 100vh;
-    max-width: 100%;
-    padding: 0px;
-    margin-left: 0;
-    margin-right: 0;
-  }
   .club-collum{
     display: none;
   }
@@ -323,6 +373,12 @@ h4 {
     width: 100%;
     min-width: 0;
   }
+  .all-result{
+    width: 100%;
+  }
+  .all-result-div {
+    width: 100%;
+  }
 }
 @media (prefers-color-scheme: dark) {
     body.theme-auto {