Update style.css

style.css

@@ -1,28 +1,51 @@
+:root {
+    --font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    --text-color: rgb(107, 114, 128);
+    --card-border-color: lightgray;
+    --card-border-radius: 16px;
+    --card-padding: 1rem; /* 16px */
+    --body-padding: 2rem;
+}
+
+* {
+    box-sizing: border-box; /* CSS Reset for consistent box sizing */
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    padding: var(--body-padding);
+    font-family: var(--font-family);
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+    font-size: 1rem; /* 16px */
+    margin: 0; /* Reset margin for consistency */
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+    color: var(--text-color);
+    font-size: 0.9375rem; /* 15px */
+    margin: 0.3125rem 0 0.625rem; /* 5px top, 10px bottom */
 }
 
 .card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+    max-width: 620px;
+    margin: 0 auto;
+    padding: var(--card-padding);
+    border: 1px solid var(--card-border-color);
+    border-radius: var(--card-border-radius);
 }
 
 .card p:last-child {
-	margin-bottom: 0;
+    margin-bottom: 0; /* Remove margin for the last paragraph */
 }
+
+/* Media Queries for responsive design */
+@media (max-width: 768px) {
+    body {
+        padding: 1rem; /* Reduce padding on smaller screens */
+    }
+
+    .card {
+        padding: 0.5rem; /* Adjust card padding for smaller screens */
+    }
+}