Updated styles and added variables

Author: tomcollis

public/styles.css

@@ -1,11 +1,10 @@
-/* Debug Start 
-* { outline: 1px solid red; }
-@media (min-width: 100vw) {
-    * {
-        background-color: rgba(255, 0, 0, 0.1);
-    }
+:root {
+    --primary-color: #007bff;
+    --warning-color: #ffff99;
+    --background-color: #ffffff;
+    --btn-primary-color: #28a745;
+    --btn-hover-color: #218838;
 }
- Debug End */
 
 body {
     font-family: Arial, sans-serif;
@@ -21,42 +20,43 @@ main {
     justify-content: center;
     text-align: center;
     max-width: 93%;
-    background-color: #ffffff;
+    background-color: var(--background-color);
     border-radius: 10px;
-    margin: 5% auto 0;
+    margin: 1rem auto;
     padding: 2rem;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: background-color 0.3s ease;
 }
 footer {
     display: flex;
+    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
     text-align: center;
-    margin: 0 auto;
-    padding: 5px;
+    margin: 1rem auto;
+    padding: 25px 5px 5px;
 }
 #time-container {
     text-align: center;
     margin-bottom: 20px;
 }
 .timer-item.warning {
-    background-color: #ffff99; /* Light yellow for warning state */
+    background-color: var(--warning-color);
 }
 h2 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
-    color: #333;
+    color: var(--primary-color);
 }
 .time-display {
     font-size: 4rem;
     font-weight: bold;
-    color: #007bff;
+    color: var(--primary-color);
 }
 .next-button, footer a {
     font-size: 1.2rem;
     padding: 10px 20px;
-    background-color: #28a745;
+    background-color: var(--btn-primary-color);
     color: white;
     border: none;
     border-radius: 5px;
@@ -67,10 +67,13 @@ h2 {
 }
 footer a {
     text-decoration: none;
-    margin: 0 10px
+    margin: 0 10px;
+    flex: 1;
+    min-width: 100px;
+    max-width: 200px;
 }
-.next-button:hover {
-    background-color: #218838;
+footer a:hover, .next-button:hover {
+    background-color: var(--btn-hover-color);
 }
 .next-button:disabled {
     background-color: #6c757d;
@@ -86,6 +89,14 @@ footer a {
     #next-item {
         padding: 1rem;
     }
+    footer {
+        flex-direction: column;
+    }
+    footer a {
+        min-width: 100%;
+        margin: 4px 0;
+        padding: 5px 0;
+    }
 }
 /* Tablet-specific styles */
 @media (min-width: 601px) and (max-width: 1024px) {
@@ -96,4 +107,5 @@ footer a {
     #next-item {
         padding: 1rem;
     }
+
 }