adding prefers reduced motion and clamp width to percent between values on body

src/resources/css/app.css

@@ -48,6 +48,16 @@
     --text-danger-color-gradient-end: hsl(344, 100%, 70%);
 }
 
+@media (prefers-reduced-motion) {
+    *, *::before, *::after {
+        animation-duration: 0s !important;
+        /* additional recommendation */
+        transition: none !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+
 body {
     background-image: linear-gradient(100deg, hsl(0, 0%, 98%), hsl(240, 5.9%, 90%));
     color: hsl(240, 5.9%, 10%);
@@ -57,6 +67,13 @@ body {
     overflow: auto;
     scrollbar-gutter: stable both-edges;
     text-rendering: optimizeLegibility;
+    font-size: 1.25rem;
+    line-height: 1.1;
+
+    /* these will clamp the width between the two values
+       and keep it at 90% of the max when between them */
+    max-width: clamp(320px, 90%, 1280px);
+    margin: auto;
 }
 
 html, body {