better scaling + styling

web/new website/style.css

@@ -30,6 +30,8 @@ body {
     border: 2px solid #333;
     clear: both;
     margin-bottom: 10px;
+    position: relative;
+    top: -20vh;
 }
 .groupTitle {
     width: 100%;
@@ -56,11 +58,11 @@ body {
     background-color: #ddd;
     color: #333;
     padding: 10px;
-    margin: 5px;
+    margin: 10px;
     border-radius: 10px;
     text-align: center;
     position: relative;
-    padding-bottom: 50px; /* Increase bottom padding */
+    padding-bottom: 6vh; /* Increase bottom padding */
 
 }
 
@@ -78,7 +80,7 @@ body {
 .gaugeImage {
     width: 100%;
     height: auto;
-    max-height: 180%;
+    max-height: 200%;
     object-fit: contain;
     position: absolute; /* Make the image position absolute */
     top: 0;
@@ -98,10 +100,10 @@ body {
 .gaugeText {
     width: 100%;
     text-align: center;
-    font-size: 24px;
+    font-size: 1.4vw;
     z-index: 2;
     position: absolute;
-    bottom: -50px; /* Adjust this value to move the text further down */
+    bottom: -3.2vw; /* Adjust this value to move the text further down */
 
 }
 
@@ -134,3 +136,33 @@ body {
     height: 100%;
 }
 
+.navbar {
+    background-color: #333;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed; /* Fix the navbar at the top of the page */
+    top: 0; /* Position it at the very top */
+    width: 100%; /* Make it span the full width of the page */
+    z-index: 1000; /* Make sure it's above all other elements */
+}
+
+.navbar-nav {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center the links horizontally */
+    height: 100%;
+    width: 100%; /* Make it span the full width of the navbar */
+}
+
+.nav-item {
+    margin-right: 20px;
+}
+
+.nav-link {
+    color: #fff;
+    text-decoration: none;
+    font-size: 18px;
+}