styling

Author: TheMrIron2

compatibility.html

@@ -7,15 +7,17 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
     body {
-      font-family: Arial, sans-serif;
       margin: 0;
-      padding: 0;
-      text-align: center;
-      color: white;
-      background: linear-gradient(-45deg, #002244, #004488, #001122, #003366);
-      background-size: 400% 400%;
-      animation: gradientShift 15s ease infinite;
+      font-family: Arial, sans-serif;
+      color: #fff;
+      background: linear-gradient(-45deg, #440000, #532c00, #1b0707, #702121);
+      background-size: 600% 600%;
+      animation: gradientShift 20s ease infinite;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
     }
+
     @keyframes gradientShift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }

faq.html

@@ -9,7 +9,7 @@
       margin: 0;
       font-family: Arial, sans-serif;
       color: #fff;
-      background: linear-gradient(270deg, #003087, #1a4ca3, #0055cc);
+      background: linear-gradient(-45deg, #440000, #532c00, #1b0707, #702121);
       background-size: 600% 600%;
       animation: gradientShift 20s ease infinite;
       min-height: 100vh;

index.html

@@ -6,12 +6,11 @@
   <title>PS1 Classics on PS3</title>
   <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
   <style>
-    /* Animated Gradient Background */
     body {
       margin: 0;
       font-family: Arial, sans-serif;
       color: #fff;
-      background: linear-gradient(270deg, #003087, #1a4ca3, #0055cc);
+      background: linear-gradient(-45deg, #440000, #532c00, #1b0707, #702121);
       background-size: 600% 600%;
       animation: gradientShift 20s ease infinite;
       min-height: 100vh;
@@ -97,8 +96,7 @@
     <h1>PS1 Classics on PS3</h1>
     <p class="lead">
       This project tracks the compatibility of PS1 titles when run on PS3 via software emulation.<br>  
-      Data is collected and updated daily with community contributions.<br>
-      For more info, see "FAQ". For compatibility details and charts, see "Compatibility".
+      <br>For more info, see "FAQ". For compatibility details and charts, see "Compatibility".
     </p>
     <canvas id="compatChart"></canvas>
     <div id="last-updated"></div>