diff --git a/index.html b/index.html
index 891cd4c..82addee 100644
--- a/index.html
+++ b/index.html
@@ -4,330 +4,803 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Metrobots 3324</title>
+  <title>Match Simulator</title>
+
+  <link rel="apple-touch-icon" sizes="180x180" href="https://metrobots.github.io/assets/favicon/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="https://metrobots.github.io/assets/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="https://metrobots.github.io/assets/favicon/favicon-16x16.png">
+  <link rel="manifest" href="https://metrobots.github.io/assets/favicon/site.webmanifest">
+  <link rel="mask-icon" href="https://metrobots.github.io/assets/favicon/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#333333">
+  <meta name="theme-color" content="#ffffff">
+
   <style>
     body {
-      display: grid;
-      place-items: center;
-      height: 100vh;
+      font-family: "Poppins", sans-serif;
       margin: 0;
-      position: relative;
+      padding: 0;
+      background-color: #f4f4f4;
     }
 
-    h1 {
-      font-family: 'Space Mono', monospace;
-      font-size: clamp(3rem, 10vw, 10rem);
-      color: white;
-      padding: 0rem clamp(1rem, 2vw, 3rem);
-      border-radius: clamp(0.4rem, 0.75vw, 1rem);
-      z-index: 1;
+    .container {
+      max-width: 400px;
+      margin: 50px auto;
+      text-align: center;
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     }
 
-    h1:hover {
-      background-color: darkRed;
+    input[type="text"] {
+      padding: 10px;
+      margin: 10px 0;
+      width: calc(100% - 20px);
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      box-sizing: border-box;
+    }
+
+    button {
+      padding: 10px 20px;
+      background-color: #007bff;
       color: white;
+      border: none;
+      cursor: pointer;
+      border-radius: 5px;
+      transition: background-color 0.3s;
     }
 
-    .background-video-container {
-      position: absolute;
-      top: 0;
-      left: 0;
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    #team-data {
+      margin-top: 20px;
+      text-align: center;
+    }
+
+    .statistic-container {
+      background-color: #f0f0f0;
+      padding: 10px;
+      border-radius: 10px;
+      margin-top: 10px;
+    }
+
+    .combined-scores {
+      background-color: #f0f0f0;
+      padding: 10px;
+      border-radius: 10px;
+      margin-top: 10px;
+      display: inline-block;
+    }
+
+    table {
       width: 100%;
-      height: 100%;
-      z-index: 0;
-      pointer-events: none;
-      overflow: hidden;
-      opacity: 0;
-      animation: fadeIn 3s forwards;
+      border-collapse: collapse;
+    }
+
+    th,
+    td {
+      padding: 8px;
+      border-bottom: 1px solid #ddd;
+      text-align: left;
+    }
+
+    th {
+      background-color: #007bff;
+      color: white;
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
+    .total-score {
+      font-weight: bold;
+      color: #007bff;
+    }
+
+    @keyframes drawCircle {
+      0% {
+        stroke-dasharray: 0 251.2;
       }
 
-      to {
-        opacity: 1;
+      100% {
+        stroke-dasharray: 251.2 0;
       }
     }
 
-    .background-video {
-      position: absolute;
-      top: 47%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(1.25);
-      min-width: 100%;
-      min-height: 100%;
-      width: auto;
-      height: auto;
-      z-index: 0;
+    .circle {
+      fill: none;
+      stroke-width: 30;
+      stroke-dasharray: 0 251.2;
+      stroke-dashoffset: 0;
+      border-radius: 50%;
+      cursor: pointer;
     }
 
-    .video-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(139, 0, 0, 0.7);
+    .circle {
+      fill: none;
+      stroke-width: 30;
+      stroke-dasharray: 0 251.2;
+      stroke-dashoffset: 0;
+      border-radius: 50%;
+      cursor: pointer;
+      position: relative;
       z-index: 1;
     }
 
-    .meta-link {
-      align-items: center;
-      backdrop-filter: blur(3px);
-      background-color: rgba(255, 255, 255, 0.05);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 6px;
-      bottom: 10px;
-      box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+    .score-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(0%, 0%);
+      font-size: 24px;
+      fill: gray;
       cursor: pointer;
-      display: inline-flex;
-      gap: 5px;
-      left: 10px;
-      padding: 10px 20px;
-      position: fixed;
-      text-decoration: none;
-      transition: background-color 400ms, border-color 400ms;
-      z-index: 10000;
     }
 
-    .meta-link:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
+    .red {
+      color: red;
     }
 
-    .meta-link>i,
-    .meta-link>span {
-      height: 20px;
-      line-height: 20px;
+    .dark-mode body {
+      background-color: #000 !important;
+      color: #fff !important;
     }
 
-    .meta-link>span {
-      color: white;
-      font-family: "Rubik", sans-serif;
-      font-weight: 500;
+    .blue {
+      color: blue;
     }
 
-    .button-container {
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      display: flex;
-      justify-content: center;
-      z-index: 2;
-      pointer-events: none;
+    .black {
+      color: black;
     }
 
-    .button-container.show {
-      pointer-events: auto;
+    .light-mode .score-text {
+      fill: black;
+      o
     }
 
+    .dark-mode .score-text {
+      fill: white !important;
+    }
 
-    .always-buttons {
-      position: absolute;
-      bottom: 10px;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+    .dark-mode-toggle {
+      position: absolute !important;
+      top: 10px !important;
+      left: 10px !important;
+      width: 20px !important;
+      height: 20px !important;
+      background-color: #ccc !important;
+      border-radius: 50% !important;
+      cursor: pointer !important;
+      transition: transform 0.5s, background-color 0.5s !important;
     }
 
-    .always-buttons .button {
-      background-color: transparent;
-      color: white;
-      padding: 10px 20px;
-      margin: 5px;
-      border: 2px solid white;
-      border-radius: 5px;
-      font-family: 'Space Mono', monospace;
-      cursor: pointer;
-      transition: all 0.3s ease-in-out;
-      opacity: 0;
-      transform: translateY(20px);
+    .dark-mode-toggle::after {
+      content: "" !important;
+      display: block !important;
+      width: 10px !important;
+      height: 10px !important;
+      border-radius: 50% !important;
+      background-color: #000 !important;
+      position: relative !important;
+      top: 50% !important;
+      left: 50% !important;
+      transform: translate(-50%, -50%) !important;
+      transition: transform 0.5s, background-color 0.5s !important;
     }
 
-    .always-buttons .button:nth-child(1) {
-      animation: slideFadeIn 0.9s ease forwards 0.6s;
+    .dark-mode .dark-mode-toggle {
+      background-color: #333 !important;
+      transform: rotate(180deg) scale(1.2) !important;
     }
 
-    .always-buttons .button:nth-child(2) {
-      animation: slideFadeIn 0.9s ease forwards 0.7s;
+    .dark-mode .dark-mode-toggle::after {
+      background-color: #fff !important;
+      transform: rotate(180deg) scale(1.2) !important;
     }
 
-    .always-buttons .button:nth-child(3) {
-      animation: slideFadeIn 0.9s ease forwards 0.8s;
+    .dark-mode .container {
+      background-color: #333 !important;
+      color: #fff !important;
     }
 
-    .always-buttons .button:nth-child(4) {
-      animation: slideFadeIn 0.9s ease forwards 0.9s;
+    .dark-mode input[type="text"] {
+      background-color: #444 !important;
+      color: #fff !important;
+      border-color: #666 !important;
     }
 
-    @keyframes slideFadeIn {
-      0% {
-        opacity: 0;
-        transform: translateY(30px);
-      }
+    .dark-mode .dark-mode-toggle {
+      background-color: #ccc !important;
+    }
 
-      100% {
-        opacity: 1;
-        transform: translateY(0);
-      }
+    .dark-mode .team-data {
+      fill: white !important;
     }
 
-    .always-buttons .button:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-      color: white;
-      transform: translateY(-3px) !important;
-      transition: transform 0.3s ease, background-color 0.3s ease;
+    .dark-mode .dark-mode-toggle::after {
+      background-color: #000 !important;
     }
 
-    .always-buttons .button:focus {
-      outline: none;
-      box-shadow: 0 0 10px darkRed;
+    .dark-mode .statistic-container {
+      background-color: #444 !important;
+      color: #fff !important;
+      border-color: #666 !important;
     }
 
-.silly {
-  position: absolute;
-  top: 81%;
-  left: 0;
-  display: block;
-  opacity: 0;
-}
+    .green-mode .team-data {
+      fill: green;
+    }
+
+    .dark-mode-toggle {
+      position: absolutev;
+      top: 10px !important;
+      left: 10px !important;
+      width: 20px !important;
+      height: 20px !important;
+      background-color: #ccc !important;
+      border-radius: 50% !important;
+      cursor: pointer !important;
+    }
+
+    .dark-mode-toggle::after {
+      content: "" !important;
+      display: block !important;
+      width: 10px !important;
+      height: 10px !important;
+      border-radius: 50% !important;
+      background-color: #000 !important;
+      position: relative !important;
+      top: 50% !important;
+      left: 50% !important;
+      transform: translate(-50%, -50%) !important;
+    }
+
+    .dark-mode .dark-mode-toggle {
+      background-color: #333 !important;
+    }
 
-.silly .button {
-  background-color: transparent !important;
-  color: white !important;
-  padding: 10px 20px !important;
-  margin: 5px !important;
-  border: 2px solid white;
-  border-radius: 5px !important;
-  font-family: 'Space Mono', monospace !important;
-  cursor: pointer !important;
-  transition: all 0.3s ease-in-out !important;
+    .dark-mode .dark-mode-toggle::after {
+      background-color: #fff !important;
+    }
+
+    .taClass {
+      color: black;
+    }
+
+    .atClass {
+      color: black;
+    }
+
+    .tatClass {
+      color: black;
+    }
+
+    .docs-button {
+      position: fixed;
+      bottom: 20px;
+      left: 20px;
+      background-color: #007bff;
+      color: #fff;
+      padding: 10px 20px;
+      border-radius: 5px;
+      text-decoration: none;
+    }
+
+    .docs-button:hover {
+      background-color: #0056b3;
+    }
+  </style>
+</head>
+
+<body>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
+
+  <div class="container">
+    <h2 class="taClass">3324 - Team Analysis</h2>
+    <input type="text" id="teamNumbers" placeholder="####...">
+    <button onclick="getTeamData()">Search</button>
+    <div class="dark-mode-toggle" onclick="toggleDarkMode()"></div>
+    <a href="https://metrobots.github.io/docs/docs.html" class="docs-button">Docs</a>
+    <div id="team-data"></div>
+  </div>
+
+  <script>
+    function getTeamData() {
+  checkInputFormat();
+  
+  // Split and clean up the team numbers
+  var teamNumbers = document.getElementById('teamNumbers').value.split(',').map(num => num.trim());
+
+  // If team numbers are provided, generate the search ID and update the URL
+  if (teamNumbers.length > 0) {
+    const searchID = generateSearchID(teamNumbers); // Generate Base64 encoded search ID
+    window.history.replaceState({}, '', `?search=${searchID}`); // Update the URL with the search ID
+
+    // Fetch data for all team numbers entered
+    Promise.all(teamNumbers.map(teamNumber => {
+        return fetch(`https://api.statbotics.io/v3/team_year/${teamNumber}/${new Date().getFullYear()}`)
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Failed to fetch team data. Status: ' + response.status);
+            }
+            return response.json();
+          });
+      }))
+      .then(teamDataArray => {
+        if (teamDataArray.length === 1) {
+          // If only one team, display single team data
+          var teamData = teamDataArray[0];
+          var teamPerformance = calculateTeamPerformance(teamData);
+          displaySingleTeamData(teamData, teamPerformance);
+        } else {
+          // If multiple teams, display aggregated data
+          var aggregatedData = aggregateTeamData(teamDataArray);
+          displayAggregatedData(aggregatedData, teamDataArray);
+          if (teamNumbers.length === 6) {
+            animateCircle(aggregatedData.compositeScore); // Animate circle if 6 teams are entered
+          }
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching team data:', error.message);
+      });
+  }
 }
 
-.silly .button:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-  color: white;
-  transform: translateY(-3px) !important;
-  transition: transform 0.3s ease, background-color 0.3s ease;
+// Function to generate a Base64 encoded search ID from team numbers
+function generateSearchID(teamNumbers) {
+  return btoa(teamNumbers.join(',')); // Join the team numbers and encode to Base64
 }
 
-.silly .button:focus {
-  outline: none;
-  box-shadow: 0 0 10px darkRed;
+// Function to check if a search ID exists in the URL and load the corresponding search
+function loadSearchFromURL() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const searchID = urlParams.get('search'); // Get 'search' parameter from URL
+  if (searchID) {
+    const teamNumbers = atob(searchID).split(','); // Decode Base64 search ID
+    document.getElementById('teamNumbers').value = teamNumbers.join(', '); // Populate input with team numbers
+    getTeamData(); // Trigger the search automatically
+  }
 }
 
-    .slide-out {
-      animation: slideOut 0.5s forwards;
+// Ensure this function runs when the page loads to check for a search ID
+window.onload = loadSearchFromURL;
+
+
+    function calculateTeamPerformance(data) {
+      var maximumPossibleMatchScore = 130;
+      var maximumPossibleTeleopScore = 95;
+      var maximumPossibleAutoScore = 20;
+      var maximumPossibleEndgameScore = 15;
+      var winLossRatio = data.record.season.winrate;
+      var overallRank = data.epa.ranks.total.rank;
+      var totalNumberOfTeams = data.epa.ranks.total.team_count;
+      var averageMatchScore = data.epa.breakdown.total_points.mean;
+      var averageTeleopScore = data.epa.breakdown.teleop_points.mean;
+      var rankingInArea = data.epa.ranks.state.rank;
+      var averageAutoScore = data.epa.breakdown.auto_points.mean;
+      var averageEndgameScore = data.epa.breakdown.endgame_points.mean;
+      var sdMatchScore = data.epa.breakdown.total_points.sd;
+      var sdTeleopScore = data.epa.breakdown.teleop_points.sd;
+      var sdAutoScore = data.epa.breakdown.auto_points.sd;
+      var sdEndgameScore = data.epa.breakdown.endgame_points.sd;
+      var normalizedWinLossRatio = winLossRatio;
+      var normalizedOverallRank = 1 - (overallRank - 1) / totalNumberOfTeams;
+      var normalizedAverageMatchScore = averageMatchScore / maximumPossibleMatchScore;
+      var normalizedAverageTeleopScore = averageTeleopScore / maximumPossibleTeleopScore;
+      var normalizedAverageAutoScore = averageAutoScore / maximumPossibleAutoScore;
+      var normalizedEndgameScore = averageEndgameScore / maximumPossibleEndgameScore;
+      var normalizedRankingInArea = 1 - (rankingInArea - 1) / totalNumberOfTeams;
+      var weight = 1 / 7;
+      var compositeScore = (normalizedWinLossRatio + normalizedOverallRank + normalizedAverageMatchScore + normalizedAverageTeleopScore + normalizedAverageAutoScore + normalizedEndgameScore + normalizedRankingInArea) * weight;
+      return compositeScore;
     }
 
-    .slide-in {
-      animation: slideIn 0.5s forwards;
+    function aggregateTeamData(teamDataArray) {
+      var totalPerformance = 0;
+      teamDataArray.forEach(data => {
+        totalPerformance += calculateTeamPerformance(data);
+      });
+      var averagePerformance = totalPerformance / teamDataArray.length;
+      return {
+        compositeScore: averagePerformance
+      };
     }
 
-    @keyframes slideOut {
-      0% {
-        transform: translateX(0);
-        opacity: 0;
+    function displaySingleTeamData(data, performance) {
+      var teamData = document.getElementById('team-data');
+      fetchTeamColors(data.team);
+      teamData.innerHTML = `
+                <h2 class="atClass">${data.name} (${new Date().getFullYear()})</h2>
+<svg width="200" height="200" onclick="toggleTeamData()">
+    <circle class="circle" cx="100" cy="100" r="80"></circle>
+    <text x="100" y="100" dominant-baseline="middle" text-anchor="middle" class="score-text">${performance.toFixed(2)}</text>
+</svg>
+
+                <div class="statistic-container">
+                    <p>Win-Loss Ratio (0-1): <b>${data.record.season.winrate.toFixed(4)}</b></p>
+                    ${data.epa.ranks.total ? `<p>Overall Rank (World): <b>${data.epa.ranks.total.rank}</b> / ${data.epa.ranks.total.team_count}</p>` : ''}
+                    <p>Average Match Score: <b>${data.epa.breakdown.total_points.mean.toFixed(2)}</b> ± ${data.epa.breakdown.total_points.sd.toFixed(2)}</p>
+                    <p>Average Teleop Score: <b>${data.epa.breakdown.teleop_points.mean.toFixed(2)}</b> ± ${data.epa.breakdown.teleop_points.sd.toFixed(2)}</p>
+                    <p>Average Auto Score: <b>${data.epa.breakdown.auto_points.mean.toFixed(2)}</b> ± ${data.epa.breakdown.auto_points.sd.toFixed(2)}</p>
+                    <p>Average Endgame Score: <b>${data.epa.breakdown.endgame_points.mean.toFixed(2)}</b> ± ${data.epa.breakdown.endgame_points.sd.toFixed(2)}</p>
+                    ${data.state ? `<p>Ranking in Area: <b>${data.epa.ranks.state.rank}</b> / ${data.epa.ranks.state.team_count} ${data.state}</p>` : ''}
+                </div>
+            `;
+      animateCircle(performance);
+    }
+
+    function displayAggregatedData(aggregatedData, teamDataArray) {
+      clearColors();
+      var teamData = document.getElementById('team-data');
+      var totalWinLossRatio = 0;
+      var totalOverallRank = 0;
+      var totalAverageMatchScore = 0;
+      var totalAverageTeleopScore = 0;
+      var totalAverageAutoScore = 0;
+      var totalEndgameScore = 0;
+      var totalSDMatchScore = 0;
+      var totalSDTeleopScore = 0;
+      var totalSDAutoScore = 0;
+      var totalSDEndgameScore = 0;
+      var teamNames = '';
+      teamDataArray.forEach(data => {
+        totalWinLossRatio += data.record.season.winrate;
+        totalOverallRank += data.epa.ranks.total.rank;
+        totalAverageMatchScore += data.epa.breakdown.total_points.mean;
+        totalAverageTeleopScore += data.epa.breakdown.teleop_points.mean;
+        totalAverageAutoScore += data.epa.breakdown.auto_points.mean;
+        totalEndgameScore += data.epa.breakdown.endgame_points.mean;
+        totalSDMatchScore += data.epa.breakdown.total_points.sd;
+        totalSDTeleopScore += data.epa.breakdown.teleop_points.sd;
+        totalSDAutoScore += data.epa.breakdown.auto_points.sd;
+        totalSDEndgameScore += data.epa.breakdown.endgame_points.sd;
+        teamNames += `${data.name}, `;
+      });
+      teamNames = teamNames.slice(0, -2);
+      var averageWinLossRatio = totalWinLossRatio / teamDataArray.length;
+      var averageOverallRank = totalOverallRank / teamDataArray.length;
+      var averageAverageMatchScore = totalAverageMatchScore;
+      var averageAverageTeleopScore = totalAverageTeleopScore;
+      var averageAverageAutoScore = totalAverageAutoScore;
+      var averageEndgameScore = totalEndgameScore;
+      var averageSDMatchScore = totalSDMatchScore / teamDataArray.length;
+      var averageSDTeleopScore = totalSDTeleopScore / teamDataArray.length;
+      var averageSDAutoScore = totalSDAutoScore / teamDataArray.length;
+      var averageSDEndgameScore = totalSDEndgameScore / teamDataArray.length;
+      var compositeScore = aggregatedData.compositeScore;
+      teamData.innerHTML = `
+        <h2>Alliance Data</h2>
+        <svg width="200" height="200" onclick="toggleTeamData()">
+            <circle class="circle" cx="100" cy="100" r="80"></circle>
+            <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="black" font-size="24px">${compositeScore.toFixed(2)}</text>
+        </svg>
+        <div class="statistic-container">
+            <p>Teams: ${teamNames}</p> <!-- Display team names here -->
+            <p>Est. Win-Loss Ratio: ${averageWinLossRatio.toFixed(4)}</p>
+            <p>Est. Average Match Score: <b>${averageAverageMatchScore.toFixed(2)}</b> ± ${averageSDMatchScore.toFixed(2)}</p>
+            <p>Est. Average Teleop Score: <b>${averageAverageTeleopScore.toFixed(2)}</b> ± ${averageSDTeleopScore.toFixed(2)}</p>
+            <p>Est. Average Auto Score: <b>${averageAverageAutoScore.toFixed(2)}</b> ± ${averageSDAutoScore.toFixed(2)}</p>
+            <p>Est. Average Endgame Score: <b>${averageEndgameScore.toFixed(2)}</b> ± ${averageSDEndgameScore.toFixed(2)}</p>
+        </div>
+    `;
+      animateCircle(compositeScore);
+    }
+
+    function animateCircle(performance) {
+      var circle = document.querySelector('.circle');
+      circle.style.animation = 'none';
+      circle.getBoundingClientRect();
+      circle.style.animation = 'drawCircle 1s ease forwards';
+      var color = getColorForPerformance(performance);
+      circle.style.stroke = color;
+    }
+
+    function toggleTeamData() {
+      var teamData = document.querySelector('.statistic-container');
+      teamData.style.display = teamData.style.display === 'none' ? 'block' : 'none';
+    }
+
+    function getColorForPerformance(performance) {
+      var hue = performance * 120;
+      var color;
+      if (performance <= 0.5) {
+        color = "hsl(" + hue + ",100%,50%)";
+      } else {
+        color = "hsl(" + hue + ",100%,50%)";
       }
+      return color;
+    }
 
-      100% {
-        transform: translateX(-100%);
-        opacity: 1;
+    function checkInputFormat() {
+      var teamNumbersInput = document.getElementById('teamNumbers').value;
+      var regex = /^\s*(\d{1,4}(,\s?\d{1,4})* - \d{1,4}(,\s?\d{1,4})*)?\s*$/;
+      if (regex.test(teamNumbersInput)) {
+        console.log('Input matches the desired format:', teamNumbersInput);
+        fetchAndProcessTeamData(teamNumbersInput);
+        var [group1, group2] = teamNumbersInput.split(' - ');
+        var teamNumbers1 = group1.split(',').map(num => num.trim());
+        var teamNumbers2 = group2.split(',').map(num => num.trim());
+        var teamDataElement = document.getElementById('team-data');
+        var teamDataHTML = '';
+        teamDataHTML += '<span class="red"> 🟥🟥 </span> ';
+        teamDataHTML += '<span class="black"> - </span> ';
+        teamDataHTML += '<span class="blue"> 🟦🟦 </span> ';
+        teamDataElement.innerHTML = teamDataHTML;
+        setTimeout(() => {
+          removeColoring();
+        }, 1);
+      } else {
+        console.log('Input does not match the desired format.');
       }
     }
 
-    @keyframes slideIn {
-      0% {
-        transform: translateX(-100%);
-        opacity: 0;
+    function removeColoring() {
+      var coloredNumbers = document.querySelectorAll('.red, .blue');
+      coloredNumbers.forEach(number => {
+        number.classList.remove('red', 'blue');
+      });
+    }
+
+    function fetchAndProcessTeamData(teamNumbersInput) {
+      var [group1, group2] = teamNumbersInput.split(' - ');
+      var teamNumbers1 = group1.split(',').map(num => num.trim());
+      var teamNumbers2 = group2.split(',').map(num => num.trim());
+      Promise.all([...teamNumbers1, ...teamNumbers2].map(teamNumber => {
+          return fetch(`https://api.statbotics.io/v3/team_year/${teamNumber}/${new Date().getFullYear()}`)
+            .then(response => {
+              if (!response.ok) {
+                throw new Error('Failed to fetch team data. Status: ' + response.status);
+              }
+              return response.json();
+            });
+        }))
+        .then(teamDataArray => {
+          var totalPoints1 = teamDataArray.slice(0, 3).reduce((sum, data) => sum + data.epa.breakdown.total_points.mean, 0);
+          var totalPoints2 = teamDataArray.slice(3, 6).reduce((sum, data) => sum + data.epa.breakdown.total_points.mean, 0);
+          displaySummedPoints(totalPoints1, totalPoints2, teamDataArray);
+        })
+        .catch(error => {
+          console.error('Error fetching or processing team data:', error);
+        });
+    }
+
+    function displaySummedPoints(totalPoints1, totalPoints2, teamDataArray) {
+      clearColors();
+      var teamData = document.getElementById('team-data');
+      var p1 = totalPoints1.toFixed(2);
+      var p2 = totalPoints2.toFixed(2);
+      var pd1 = totalPoints1.toFixed(2) - totalPoints2.toFixed(2);
+      var pd2 = totalPoints2.toFixed(2) - totalPoints1.toFixed(2);
+      var sd1 = Math.sqrt(Math.pow(teamDataArray[0].epa.breakdown.auto_points.sd, 2) + Math.pow(teamDataArray[1].epa.breakdown.teleop_points.sd, 2) + Math.pow(teamDataArray[2].epa.breakdown.endgame_points.sd, 2));
+      var sd2 = Math.sqrt(Math.pow(teamDataArray[3].epa.breakdown.auto_points.sd, 2) + Math.pow(teamDataArray[4].epa.breakdown.teleop_points.sd, 2) + Math.pow(teamDataArray[5].epa.breakdown.endgame_points.sd, 2));
+      teamData.innerHTML = '<h2>Point Diff:</h2>';
+      var table = document.createElement('table');
+      if (pd1 > 0) {
+        var row1 = table.insertRow();
+        var cell1_1 = row1.insertCell(0);
+        var cell1_2 = row1.insertCell(1);
+        cell1_1.textContent = 'Point Diff (A1):';
+        cell1_2.id = 'pointDiffCellA1';
+        cell1_2.className = 'point-diff-cell';
+        cell1_2.innerHTML = `<span style="color: #F91A48;"><b>${pd1.toFixed(2)} ± ${sd1.toFixed(2)}</b></span>`;
+        cell1_2.style.cursor = 'pointer';
+        cell1_2.addEventListener('click', function() {
+          console.log('Clicked Point Diff (A1)');
+          toggleCombinedScores(teamDataArray.slice(0, 3), teamDataArray.slice(3, 6));
+        });
+      }
+      if (pd2 > 0) {
+        var row2 = table.insertRow();
+        var cell2_1 = row2.insertCell(0);
+        var cell2_2 = row2.insertCell(1);
+        cell2_1.textContent = 'Point Diff (A2):';
+        cell2_2.id = 'pointDiffCellA2';
+        cell2_2.className = 'point-diff-cell';
+        cell2_2.innerHTML = `<span style="color: #087cfc;"><b>${pd2.toFixed(2)} ± ${sd2.toFixed(2)}</b></span>`;
+        cell2_2.style.cursor = 'pointer';
+        cell2_2.addEventListener('click', function() {
+          console.log('Clicked Point Diff (A2)');
+          toggleCombinedScores(teamDataArray.slice(0, 3), teamDataArray.slice(3, 6));
+        });
       }
+      teamData.appendChild(table);
+    }
 
-      100% {
-        transform: translateX(0);
-        opacity: 1;
+    function toggleCombinedScores(alliance1, alliance2) {
+      console.log('Toggling Combined Scores');
+      var combinedScores = document.getElementById('combined-scores');
+      if (combinedScores.style.display === 'none') {
+        displayCombinedScores(alliance1, alliance2);
+        combinedScores.style.display = 'block';
+      } else {
+        combinedScores.style.display = 'none';
       }
     }
-  </style>
-</head>
 
-<body>
-  <div class="background-video-container">
-    <iframe class="background-video" id="youtubeVideo" frameborder="0" allowfullscreen loop></iframe>
-    <div class="video-overlay"></div>
-  </div>
-  <h1 data-value="METROBOTS">TEAM 3324</h1>
+    function displayCombinedScores(alliance1, alliance2) {
+      clearColors();
+      var teamData = document.getElementById('team-data');
+      var combinedScores = document.getElementById('combined-scores');
+      if (combinedScores) {
+        combinedScores.remove();
+      }
+      combinedScores = document.createElement('div');
+      combinedScores.id = 'combined-scores';
+      combinedScores.innerHTML = '<h2>Match Breakdown</h2>';
+      var totalPointsAuto1 = alliance1.reduce((sum, data) => sum + data.epa.breakdown.auto_points.mean, 0);
+      var totalPointsTeleop1 = alliance1.reduce((sum, data) => sum + data.epa.breakdown.teleop_points.mean, 0);
+      var totalPointsEndgame1 = alliance1.reduce((sum, data) => sum + data.epa.breakdown.endgame_points.mean, 0);
+      var totalSDAuto1 = Math.sqrt(alliance1.reduce((sum, data) => sum + Math.pow(data.epa.breakdown.auto_points.sd, 2), 0));
+      var totalSDTeleop1 = Math.sqrt(alliance1.reduce((sum, data) => sum + Math.pow(data.epa.breakdown.teleop_points.sd, 2), 0));
+      var totalSDEndgame1 = Math.sqrt(alliance1.reduce((sum, data) => sum + Math.pow(data.epa.breakdown.endgame_points.sd, 2), 0));
+      var totalPointsAuto2 = alliance2.reduce((sum, data) => sum + data.epa.breakdown.auto_points.mean, 0);
+      var totalPointsTeleop2 = alliance2.reduce((sum, data) => sum + data.epa.breakdown.teleop_points.mean, 0);
+      var totalPointsEndgame2 = alliance2.reduce((sum, data) => sum + data.epa.breakdown.endgame_points.mean, 0);
+      var totalSDAuto2 = Math.sqrt(alliance2.reduce((sum, data) => sum + Math.pow(data.epa.breakdown.auto_points.sd, 2), 0));
+      var totalSDTeleop2 = Math.sqrt(alliance2.reduce((sum, data) => sum + Math.pow(data.epa.breakdown.teleop_points.sd, 2), 0));
+      var totalSDEndgame2 = Math.sqrt(alliance2.reduce((sum, data) => sum + Math.pow(data.epa.breakdown.endgame_points.sd, 2), 0));
+      var table = document.createElement('table');
+      table.innerHTML += `
+        <tr>
+            <th>Alliance</th>
+            <th>Auto (± SD)</th>
+            <th>Teleop (± SD)</th>
+            <th>Endgame (± SD)</th>
+        </tr>
+        <tr>
+            <td>Red Alliance:</td>
+            <td><b>${totalPointsAuto1.toFixed(2)}</b> ± ${totalSDAuto1.toFixed(2)}</td>
+            <td><b>${totalPointsTeleop1.toFixed(2)}</b> ± ${totalSDTeleop1.toFixed(2)}</td>
+            <td><b>${totalPointsEndgame1.toFixed(2)}</b> ± ${totalSDEndgame1.toFixed(2)}</td>
+        </tr>
+        <tr>
+            <td>Blue Alliance:</td>
+            <td><b>${totalPointsAuto2.toFixed(2)}</b> ± ${totalSDAuto2.toFixed(2)}</td>
+            <td><b>${totalPointsTeleop2.toFixed(2)}</b> ± ${totalSDTeleop2.toFixed(2)}</td>
+            <td><b>${totalPointsEndgame2.toFixed(2)}</b> ± ${totalSDEndgame2.toFixed(2)}</td>
+        </tr>
+    `;
+      combinedScores.appendChild(table);
+      var datasets = [{
+        label: 'Red Alliance',
+        borderColor: 'rgba(249, 26, 72, 1)',
+        data: [totalPointsAuto1, totalPointsTeleop1, totalPointsEndgame1]
+      }, {
+        label: 'Blue Alliance',
+        borderColor: 'rgba(8,124,252, 1)',
+        data: [totalPointsAuto2, totalPointsTeleop2, totalPointsEndgame2]
+      }];
+      var chartContainer = document.createElement('div');
+      chartContainer.classList.add('chart-container');
+      combinedScores.appendChild(chartContainer);
+      var combinedChartCanvas = document.createElement('canvas');
+      combinedChartCanvas.id = 'combined-chart';
+      chartContainer.appendChild(combinedChartCanvas);
+      var combinedChart = new Chart(combinedChartCanvas, {
+        type: 'line',
+        data: {
+          labels: ['Auto', 'Teleop', 'Endgame'],
+          datasets: datasets
+        },
+        options: {
+          scales: {
+            x: {
+              title: {
+                display: true,
+                text: 'Game Phases'
+              }
+            },
+            y: {
+              title: {
+                display: true,
+                text: 'Scores'
+              }
+            }
+          },
+          plugins: {
+            tooltip: {
+              mode: 'nearest',
+              callbacks: {
+                label: function(context) {
+                  var label = context.dataset.label || '';
+                  if (label) {
+                    label += ': ';
+                  }
+                  if (context.parsed.y !== null) {
+                    label += context.parsed.y.toFixed(2);
+                  }
+                  if (context.dataset.label === 'Red Alliance') {
+                    var blueAllianceValue = datasets[1].data[context.dataIndex].toFixed(2);
+                    label += ' - (' + blueAllianceValue + ')';
+                  } else {
+                    var redAllianceValue = datasets[0].data[context.dataIndex].toFixed(2);
+                    label += ' - (' + redAllianceValue + ')';
+                  }
+                  return label;
+                }
+              }
+            }
+          }
+        }
+      });
+      teamData.appendChild(combinedScores);
+    }
 
-  <div class="always-buttons">
-    <div class="button"><b><center>About Us</center></b></div>
-    <div class="button"><b>Our Season</b></div>
-    <div class="button"><b><center>Our Community</center></b></div>
-    <div class="button"><b><center>Resources </center></b></div>
-  </div>
+    function toggleCombinedScores(alliance1, alliance2) {
+      var combinedScores = document.getElementById('combined-scores');
+      if (!combinedScores) {
+        displayCombinedScores(alliance1, alliance2);
+      } else {
+        combinedScores.remove();
+      }
+    }
 
-  <script>
-    document.querySelector('.always-buttons .button:nth-child(1)').addEventListener('click', function() {
-      window.location.href = "about/about.html";
-    });
-
-    document.querySelector('.always-buttons .button:nth-child(2)').addEventListener('click', function() {
-      window.location.href = "our-season/our-season.html";
-    });
-
-    document.querySelector('.always-buttons .button:nth-child(3)').addEventListener('click', function() {
-      window.location.href = "mission/mission.html";
-    });
-
-    document.querySelector('.always-buttons .button:nth-child(4)').addEventListener('click', function() {
-      window.location.href = "resources/resources.html";
-    });
-
-    const letters = "∑∫√∆∞≠≈≤≥±×÷∝∴∵∇∂≡∼≅∩∪⊂⊃⊆⊇∅∈∉∋←→↑↓↔↖↗↘↙⇐⇒⇑⇓⇔↤↥↦↧⇄⇅⇆⇇⇈⇉⇊⇰⇱⇲⇳⇴⇵⇶⇷⇸⇹⇺⇻⇼⇽⇾⇿∝ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz$€£¥₹¢.,?!:;-/\@#$%&*+=<>ɑɒæɐaɑɒbʙβɓcçɕdðɖɗʤʣdzdʑɱeɘəɚɛɜɝɞɟɠɡɢʛɦɧhɥɨɪɪjɟʄɨʝɟkʞlɭʎʟɬɮʟɺɫɬɭmɱɯɰŋɳɲɴɶɷɵɸʘɹɺɻɼɽɾɸʁɹɻɽʀʁɾɸsʃʂtθʈʧʦʨtʃtʂtɕʈtɕʈʋuʊʌʍwɯɰʷxɣχʁɥʎʟʒʑʐʝʎʟβɵʉɪɪʏʊʊ";
-    const youtubeLinks = [
-      "https://www.youtube.com/embed/3KtxX7LDcuQ?autoplay=1&loop=1000&mute=1&playlist=3KtxX7LDcuQ&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_2?autoplay=1&loop=1000&mute=1&playlist=NpmZqjq6XOk&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=UAJ4ri4wFbs&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=WeH5BYzY87Q&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=CGivBFyF8Ug&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=5Y8rrHjDAV4&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=VPQ9QdmkgdM&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=XljNNMhltS8&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=3B1TMGdccOY&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=ZPYKY2GIuAA&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=oirnxmxF3R4&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=cn81Fup2Nm4&start=5",
-      "https://www.youtube.com/embed/VIDEO_ID_3?autoplay=1&loop=1000&mute=1&playlist=PC3MpMCt7yk&start=5"
-    ];
-
-    const randomIndex = Math.floor(Math.random() * youtubeLinks.length);
-    const randomYouTubeLink = youtubeLinks[randomIndex];
-    document.getElementById("youtubeVideo").src = randomYouTubeLink;
-
-    let interval = null;
-    document.querySelector("h1").onmouseover = event => {
-      let iteration = 0;
-      clearInterval(interval);
-      interval = setInterval(() => {
-        event.target.innerText = event.target.innerText
-          .split("")
-          .map((letter, index) => {
-            if (index < iteration) {
-              return event.target.dataset.value[index];
+    function toggleDarkMode() {
+      document.body.classList.toggle('dark-mode');
+    }
+
+    function fetchTeamColors(teamNumber) {
+      fetch(`https://api.statbotics.io/v3/team/${teamNumber}`)
+        .then(response => response.json())
+        .then(data => {
+          const primaryColor = data.colors.primary;
+          const secondaryColor = data.colors.secondary;
+          const container = document.querySelector('.container');
+          const taClass = document.querySelector('.taClass');
+          const atClass = document.querySelector('.atClass');
+          const tatClass = document.querySelector('.team-data');
+          document.body.style.transition = 'background-color 1s ease';
+          if (container) {
+            container.style.transition = 'background-color 1s ease';
+          }
+          document.body.style.backgroundColor = primaryColor;
+          if (container) {
+            container.style.backgroundColor = secondaryColor;
+            const secondaryColorBrightness = getColorBrightness(secondaryColor);
+            if (secondaryColorBrightness <= 50) {
+              if (taClass) {
+                taClass.style.color = 'white';
+                atClass.style.color = 'white';
+                tatClass.style.fill = 'white';
+                console.log("Text color set to white because the background is dark enough.");
+              }
+            } else {
+              if (taClass) {
+                taClass.style.color = 'black';
+                atClass.style.color = 'black';
+                tatClass.style.fill = 'black';
+                console.log("Text color set to black because the background is light.");
+              }
             }
-            return letters[Math.floor(Math.random() * 26)]
-          })
-          .join("");
-        if (iteration >= event.target.dataset.value.length) {
-          clearInterval(interval);
-          document.querySelector('.button-container').classList.add('show');
-        }
-        iteration += 1 / 3;
-      }, 30);
+          } else {
+            console.error('Container element not found.');
+          }
+        })
+        .catch(error => {
+          console.error('Error fetching team colors:', error);
+        });
+    }
+
+    function getColorBrightness(color) {
+      const hex = color.replace('#', '');
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      return (r * 0.299 + g * 0.587 + b * 0.114);
+    }
+
+    function clearColors() {
+      document.body.style.backgroundColor = '';
+      const container = document.querySelector('.container');
+      if (container) {
+        container.style.backgroundColor = '';
+      }
+      const teamData = document.querySelector('.team-data');
+      if (teamData) {
+        teamData.style.fill = '';
+      }
     }
   </script>
 </body>
