Alot of CSS Changes don't ask stupid Nogger

static/style.css

@@ -1,20 +1,47 @@
-.background_image {
-    background-image: url("/img/trlbg1.jpg");
-}
-
 body {
+    background-image: url("/static/img/trlbg1.jpg");
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-size: cover;
+    position: relative; /* This allows the z-index on children elements to work */
+    z-index: -1; /* Send the background behind the content */
     font-family: Arial, sans-serif;
     margin: 20px;
 }
 
+header nav {
+    margin-bottom: 20px;
+}
+
+header nav a {
+    color: #4CAF50;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 10px 20px;
+}
+
+header nav a:hover {
+    color: #45a049;
+}
+
 h1 {
     color: #333;
+    margin-bottom: 20px;
+}
+
+.background-roster {
+    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for better readability */
+    padding: 20px;
+    border-radius: 10px;
+    z-index: 1;
 }
 
 table {
     width: 100%;
     border-collapse: collapse;
     margin-bottom: 20px;
+    overflow: hidden;
+    background-color: rgba(255, 255, 255, 0.8);
 }
 
 table, th, td {
@@ -22,12 +49,13 @@ table, th, td {
 }
 
 th, td {
-    padding: 8px;
+    padding: 10px;
     text-align: left;
 }
 
 th {
-    background-color: #f2f2f2;
+    color: #333;
+    background-color: rgba(255, 255, 255, 0.9);
 }
 
 button {
@@ -59,3 +87,14 @@ input {
     margin-right: 16px;
     font-size: 17px;
 }
+
+
+main{
+    position: relative;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+    margin-top: 10%;
+    padding: 20px 35px 35px 35px;
+    border-radius: 10px;
+    border: 2px solid black;
+}

templates/index.html

@@ -3,21 +3,23 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" type="image/x-icon" href="/static/img/TRL_Logo_Custom.jpg">
     <title>Gun Stats</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
-<body>
+<nav></nav>
-    <header>
+<header>
-        <nav>
+    <nav>
-            <a class="index-nav" href="{{ url_for('calculator') }}">Calculator</a>
+        <a class="index-nav" href="{{ url_for('calculator') }}">Calculator</a>
-        </nav>
+    </nav>
-    </header>
+</header>
-    <main class="background_image">
+<body class="background-image">
+<main>
     <h1>Gun Stats</h1>
-    <div>
+    <div class="search-container">
         <input type="text" id="search" placeholder="Search by name" onkeyup="filterTable()">
     </div>
-    <table id="gun-stats">
+    <table id="gun-stats" class="background-roster">
         <thead>
             <tr>
                 <th>ID</th>
@@ -40,6 +42,6 @@
     </table>
     <script src="{{ url_for('static', filename='populateTable.js') }}"></script>
     <script src="{{ url_for('static', filename='filterTable.js') }}"></script>
-    </main>
+</main>
 </body>
 </html>