add project highlight item formatting and add project highlight desktop media query

Author: Daniel1000c

css/style.css

@@ -92,7 +92,6 @@ header {
     align-items: center;
     justify-content: space-between;
     animation: fadedown 1s ease-in-out;
-    background-color: rgba(211, 211, 211);
 }
 
 /*Format hamburger menu*/
@@ -196,14 +195,6 @@ section h2 {
     font-size: var(--second-font-size);
 }
 
-/*Format section bg*/
-.sectionBg {
-    background-image: url(../images/monochrome3d.jpg);
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-}
-
 /**Hero section formatting**/
 
 /*Format hero section*/
@@ -295,14 +286,53 @@ section h2 {
 /*Format about section*/
 .aboutContainer {
     margin-bottom: 50px;
+    text-align: left;
+    margin: 50px;
 }
+
 /*Format about section text*/
 .aboutContainer p {
     letter-spacing: 2px;
     line-height: 2;
     font-family: 'Barlow-Regular', sans-serif;
     font-weight: bolder;
-    font-size: 1em;
+    font-size: 15px;
+    text-align: left;
+    padding: 20px;
+}
+
+/*Format project highlight item*/
+.projectHighlightItem {
+    text-align: left;
+    margin-top: 80px;
+    margin: 80px 20px 20px 20px;
+}
+
+/*Format project high boxicon*/
+.projectHighlightItem i {
+    font-size: 10em;
+    padding: 25px;
+    background-color: #9ce2e1;
+    border-radius: 50%;
+}
+
+/*Format project highlight item h3*/
+.projectHighlightItem h3 {
+    font-family: var(--primary-round-font);
+    font-size: 5em;
+    color: black;
+    padding: 20px;
+}
+
+/*Format project highlight item p*/
+.projectHighlightItem p {
+    letter-spacing: 2px;
+    line-height: 2;
+    font-family: 'Barlow-Regular', sans-serif;
+    font-weight: bolder;
+    font-size: 15px;
+    text-align: left;
+    padding: 20px;
 }
 
 /**Project section Formatting**/
@@ -368,7 +398,6 @@ footer {
     font-size: var(--footer-font-size);
     font-family: var(--footer-font-family);
     font-weight: bolder;
-    background-color: rgba(212, 212, 212, 0.8);
 }
 /************End of Footer Formatting************/
 
@@ -456,18 +485,48 @@ footer {
     /*Format about section*/
     .aboutContainer {
         display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
+        flex-direction: row-reverse;
+        justify-content: space-between;
+        padding: 50px;
+        gap: 100px;
+        margin: 80px 20px 20px 20px;
     }
 
+    /*Format aboutcontainer img content*/
+    .aboutContainer .aboutContent img {
+        width: 30%;
+        margin-left: 20px;
+    }
+
+    /*Format about section h2*/
+    .aboutContainer .aboutContent h2 {
+        font-size: 4em;
+        margin-left: 20px;
+    }
     /*Format about section text*/
-    .aboutContainer p {
-        width: 65%;
-        padding: 50px;
-        font-size: 2em;
+    .aboutContainer .aboutContent p {
+        width: 100%;
+        margin-left: 20px;
+        font-size: 1.3em;
         text-align: left;
     }
+
+    /*Format project highlight items*/
+    .projectHighlightItem i {
+        font-size: 3em;
+        margin-left: 20px;
+    }
+
+    /*Format project highlight text*/
+    .projectHighlightItem h3 {
+        font-size: 2em;
+    }
+
+    /*Format project highlight p tag*/
+    .projectHighlightItem p {
+        font-size: 1.5em;
+        width: 100%;
+    }
     /*Format project grid*/
     .projectGrid {
         grid-template-columns: 1fr 1fr 1fr;/*Create a 3 column grid*/