Header background changed, Buttons added for Read Me links, article backgound changed and padding added.

Author: grantriches-byte

Wireframe/style.css

@@ -9,14 +9,14 @@ V/* Reset */
 body {
   font-family: Arial, Helvetica, sans-serif;
   background-color: #f4f4f4;
-  color: #333;
+  color: black;
   line-height: 1.6;
 }
 
 /* Header */
 header {
-  background: #222;
-  color: #fff;
+  background: #f4f4f1;
+  color: black;
   padding: 2rem 1rem;
   text-align: center;
 }
@@ -26,7 +26,27 @@ header p {
   margin: 0 auto;
 }
 
-/* Main container */
+
+a {
+  color: #007BFF;
+  text-decoration: none;
+}
+
+.button {
+  display: inline-block;
+  padding: 10px 20px;
+   background-color: #0056b3;
+  color: #ffffff;
+  border-radius: 5px;
+  text-decoration: none;
+  font-weight: bold;
+  transition: background-color 0.3s;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
 main {
   max-width: 1100px;
   margin: 2rem auto;
@@ -46,14 +66,20 @@ section article:first-child {
   grid-column: 1 / -1;
 }
 
-/* Article styling */
+article img {
+  width: 100%;
+  max-width: 200px; 
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
 article {
-  background: #fff;
+  background-color: #f4f6f8;
   padding: 1.5rem;
-  border: 1px solid #ccc;
-  border-radius: 6px;
 }
 
+
 /* Images */
 article img {
   width: 100%;
@@ -86,8 +112,8 @@ footer {
   color: black;
   left: 45%;
   padding: 1rem;
- position: fixed;
- bottom: 0;
+  position: fixed;
+  bottom: 0;
 }
 
 /* MOBILE: stack everything */