updated the css color and sizing

Author: bodoszidi

Wireframe/index.html

@@ -20,7 +20,7 @@ <h1>Workflow</h1>
         <main>
             <div class="firstrow">
             <article>
-                <img src="Readme.png" alt="Readme file example" />
+                <img src="Readme.png" alt="Readme file example" id="readmeimg" />
                 <h2>README files</h2>
                 <p>
                     A README file explains a project to other developers and

Wireframe/style.css

@@ -14,19 +14,21 @@ body {
   color: var(--ink);
   font: var(--font);
   display: block;
-  margin: 10px;
+  margin: 0 auto;
+  background-color: rgb(213, 230, 224);
+  max-width: 1200px;
 }
 h1{
+  font-size: 90px;
   text-align: center;
+  color: rgb(47, 16, 77);
   padding: var(--space);
 }
 h2, p{
   margin: var(--space);
 }
-main {
-  max-width: 900px;
-  margin: 0 auto calc(var(--space) * 4) auto;
-}
+
+
 
 a {
   display: block;
@@ -35,6 +37,9 @@ a {
   border: var(--line);
   max-width: fit-content;
   border-radius: 5px;
+  background-color: rgb(221, 149, 191);
+  color: black;
+  text-decoration: none;
 }
 img,
 svg {
@@ -56,13 +61,31 @@ article {
   padding-bottom: var(--space);
   text-align: left;
   gap: 20px;
+  background-color: rgb(233, 210, 243);
 }
 .firstrow {
   display: grid;
   grid-template-columns: 1fr;
+  padding: 0 0 20px;
+ 
 }
 .secondrow {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
+}
+#readmeimg{
+  display: block;
+  margin: 0 auto;
+  width: 500px;
+}
+@media (max-width: 800px){
+  .firstrow, .secondrow{
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 20px;
+  }
+  #readmeimg{
+    width: 100%;
+  }
 }