css improvements

Signed-off-by: Manuel <manuel@kmpr.at>

css/main.css

@@ -11,9 +11,25 @@ body {
     background-color: #e6eeff;
 }
 
-h1, h2 {
+h1, h2, h3 {
     font-weight: bold;
     color: #333;
+    padding-bottom: 20px;
+    padding-left: 15px;
+}
+
+p {
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+ol.usage {
+    list-style-type: upper-roman;
+    margin-left: 15px;
+    padding-left: 20px;
+    padding-bottom: 5px;
 }
 
 button {
@@ -21,13 +37,13 @@ button {
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    background-color: #4CAF50;
+    background-color: #3399ff;
     color: #fff;
 }
 
-button:hover {
-    background-color: #3e8e41;
-}
+    button:hover {
+        background-color: #0066cc;
+    }
 
 footer {
     position: fixed;

index.html

@@ -20,7 +20,7 @@
 	<div class="setupinfo">
 		<h2>Usage information</h2>
 		<p>To get started with FTMS Video Rower, follow these simple steps:</p>
-		<p><ol>
+		<p><ol class="usage">
 			<li><b>Power on your rower:</b> Follow the instructions of your devices manufaturer to power on your traiining device and enabling FTMS service.</li>
 			<li><b>Connect your rower:</b> Click the button above to see the list of available rowers. Select your rower from the list of available devices and wait for the connection to establish.</li>
 			<li><b>Start your exercise:</b> As you start your exercise, the training video will begin playing, providing real-time guidance and motivation. Meanwhile, your live training statistics will be displayed on your device, tracking your progress and providing valuable insights into your performance.</li>