Your starter files

style.css

@@ -0,0 +1,42 @@
+/* ---------------------------------------------------------------------------
+   This top block is set up for you. Leave it alone and everything below it
+   will behave sensibly.
+
+   box-sizing: border-box makes padding and borders count INSIDE an element's
+   width instead of getting added on top. The default does the opposite, which
+   means the arithmetic never works out and you spend an hour wondering why
+   your boxes are too wide.
+--------------------------------------------------------------------------- */
+html { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: inherit; }
+
+img { max-width: 100%; height: auto; }
+
+
+/* ---------------------------------------------------------------------------
+   Your styles start here. Change anything.
+
+   One habit worth keeping: use max-width, not width. A page is responsive by
+   default — a fixed width is what breaks it on a phone.
+--------------------------------------------------------------------------- */
+
+body {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.6;
+  max-width: 40rem;      /* not width */
+  margin: 0 auto;
+  padding: 2rem 1.25rem;
+  color: #1a1a1a;
+  background: #fdfdfb;
+}
+
+h1 {
+  font-size: 2rem;
+  line-height: 1.2;
+}
+
+a {
+  color: #2b5eaa;
+}
+
+/* Try changing a colour and pushing. Watch your live page change. */