Update styling.

index.html

@@ -95,7 +95,7 @@ <h3 class="project__heading">Video Chat App</h3>
     <section class="section promo">
       <div class="container">
         <h2 class="promo__heading">
-          A master craftsman of <br />
+          A master craftsman&nbsp;of <br />
           clean, maintainable code.
         </h2>
         <p class="promo__description">
@@ -143,7 +143,7 @@ <h3 class="project__heading">3D Collectibles App</h3>
       <div class="container">
         <h2 class="promo__heading">
           A keen eye for design <br />
-          and creating the best UX.
+          and creating the best&nbsp;UX.
         </h2>
         <p class="promo__description">
           I started my career as a designer, so I bring products to life with
@@ -343,7 +343,7 @@ <h3 class="project__heading">And so much more...</h3>
         </ul>
         <p>
           I've been on such an incredible journey throughout my career, using
-          all kinds of tools, technologies and techniques spanning all sorts of
+          all kinds of tools, technologies and techniques, spanning all sorts of
           use-cases and sectors – I simply couldn't share it all here. If you
           have a specific requirement and would like some more relevant
           examples, please <a href="#contact">get in&nbsp;touch</a>.

styles.css

@@ -18,7 +18,7 @@ html {
   min-width: 20em;
   min-height: 20em;
   background: #1a1a1a;
-  color: #ffffff;
+  color: #a1a1a1;
   font-family: "Gilroy", sans-serif;
   text-align: center;
   line-height: 2;
@@ -60,10 +60,6 @@ a:hover {
   color: #3399ff;
 }
 
-br.desktop {
-  display: none;
-}
-
 .section {
   display: flex;
   position: relative;
@@ -81,19 +77,22 @@ br.desktop {
 }
 
 .promo__heading {
+  color: #ffffff;
   margin-bottom: 0.5rem;
-  font-size: 1.5em;
+  font-size: 2.25em;
   line-height: 1.25;
   letter-spacing: -0.025em;
 }
 
+.promo__heading > br {
+  display: none;
+}
+
 .promo__description {
   margin: 0 auto;
-  color: #a3a3a3;
 }
 
 .project {
-  color: #a3a3a3;
   position: relative;
   text-align: justify;
 }
@@ -128,6 +127,7 @@ br.desktop {
 }
 
 .project__link {
+  color: #ffffff;
   display: inline-block;
   font-weight: bold;
 }
@@ -192,6 +192,10 @@ br.desktop {
   line-height: 1.25;
 }
 
+.contact__heading {
+  color: #ffffff;
+}
+
 .contact__options {
   margin: 1rem 0;
   padding: 0;
@@ -226,13 +230,13 @@ br.desktop {
   .promo__heading {
     font-size: 2em;
   }
-}
 
-@media screen and (min-width: 45em) {
-  br.desktop {
+  .promo__heading > br {
     display: inline;
   }
+}
 
+@media screen and (min-width: 45em) {
   .promo {
     font-size: 21px;
     line-height: 2.5;