made less ugly

default.css

@@ -5,16 +5,15 @@ This file could be used under both CC-BY-SA 4.0 or at your chosing GNU GPLv3 or
 html {}
 
 * {
-    background-color: #311a46;
+    background-color: #1a1a1a;  /* Dark background color */
     font-size: 20px;
     list-style-type: none;
-
 }
 
 body{
-    color: #95bcf2;
-    font-family:Open Sans;
-    font-weight: bold;
+    color: #e0e0e0;  /* Light text color */
+    font-family: Open Sans, sans-serif; 
+    font-weight: normal;
 
     margin-top: 5%;
     margin-bottom: 5%;
@@ -38,17 +37,17 @@ pre {
 
 h1 {
     font-size: 30px;
-    color: #CC35F0;
+    color: #4fc3f7;  /* Bright accent color */
 }
 
 h2 {
     font-size: 25px;
-    color: #FFFFFF;
+    color: #ffffff;
 }
 
 h3 {
-    font-size: 22px;
-    color: #3798DD;
+    font-size: 22px; 
+    color: #03a9f4;  /* Complementary accent color */
 }
 
 code {
@@ -74,12 +73,12 @@ th,td {
 }
 
 a {
-    color: #C648EA;
+    color: #4fc3f7;
     text-decoration: none;
 }
 
 a:hover {
-    color: #DB82F4;
+    color: #b3e5fc;  /* Lighter hover color */
     text-decoration: none;
 }
 
@@ -87,40 +86,36 @@ img {
     max-width: 50%;
     height: auto;
 }
-input[type=text] {
+
+input[type=text], button, .button {
   padding: 12px 20px;
   margin: 8px 0;
   box-sizing: border-box;
   border: 0px solid black;
-  background-color: #b058c6;
-  color: #311a46;
+  background-color: #424242;  /* Dark button background */
+  color: #e0e0e0;
   font-weight: bold;
 }
-button, .button {
-    padding: 12px 20px;
-    margin: 8px 0;
-    box-sizing: border-box;
-    border: 0px solid black;
-    background-color: #b058c6;
-    color: #311a46;
-    font-weight: bold;
-}
+
 .button {    line-height: 3 }
+
 summary {
-    color: #b058c6;
+    color: #4fc3f7;
     font-weight: bold;
 }
+
 summary:hover, summary:hover > h1 {
-    color: white;
+    color: #b3e5fc;
     cursor: pointer;
 }
+
 button:hover, input:hover, button:focus, input:focus, .button:hover, .button:focus  {
-    background-color: #3798DD;
-    color: white;
+    background-color: #03a9f4;
+    color: #ffffff;
 }
 
 hr {
-    border-top: 1px solid #b058c6;
+    border-top: 1px solid #4fc3f7;
 }
   
 p {
@@ -159,13 +154,80 @@ If a screen is at least 1024 pixels wide, we do some more things.
 
 /* prgoress bar theme */
 
-.back_progress {background-color: #543ba3;
-                width: 100%;
-                height: 7}
-.back_progress:hover {
-    background-color: #CC35F0;
+.back_progress {
+    background-color: #424242;
+    width: 100%;
+    height: 7px;
 }
-.front_progress {background-color: #96bbe8;
-                 height: 7}
 
+.back_progress:hover {
+    background-color: #4fc3f7;
 }
+
+.front_progress {
+    background-color: #03a9f4;
+    height: 7px;
+}
+
+/* Footer styles */
+footer {
+    padding: 20px 0; 
+    text-align: center;
+}
+
+footer .container {
+    max-width: 960px; 
+    margin: 0 auto;   
+    padding: 0 20px;  
+}
+
+footer p {
+    color: #e0e0e0; 
+    margin-bottom: 10px; 
+}
+
+.button-group {
+    background-color: transparent;
+    padding: 0;                     
+    margin: 0;                     
+}
+
+.button-group a.button {
+    padding: 8px 15px;          
+    margin: 5px;            
+    background-color: #4fc3f7;  
+    color: #1a1a1a;             
+    text-decoration: none;      
+    font-size: 0.9em;          
+    border: none;               
+    border-radius: 5px;         
+    transition: background-color 0.3s, color 0.3s;
+    min-width: 100px;          
+    max-width: 150px;           
+    white-space: normal;        
+}
+
+.button-group a.button:hover {
+    background-color: #03a9f4;  
+    color: #ffffff;           
+}
+
+
+/* Suggestions container */
+.suggestions-container {
+    margin-top: 40px;
+}
+
+/* Competitors heading */
+.competitors-heading {
+    font-size: 28px;
+    color: #4fc3f7;
+    margin-bottom: 20px;
+}
+
+/* Problematic heading */
+.problematic-heading {
+    font-size: 24px;
+    color: #f44336;
+    margin-bottom: 10px;
+}