diff --git a/css/default.css b/css/default.css
index 845c111..2f2607e 100644
--- a/css/default.css
+++ b/css/default.css
@@ -1,9 +1,29 @@
+:root {
+  --yellow-color: yellow;
+}
+
 body {background-color: black;
     background-image: url('/html/img/galaxy-animated.gif');
     font-family:  "Comic Sans MS", "Chalkboard SE-Regular", "Chalkboard", "Comic Neue", Tahoma, sans-serif;
     font-size: 15pt;
     color: snow;}
 
+  .yellowFont {
+      color: var(--yellow-color);
+  }
+  
+  .yellowFont:hover {
+      color: var(--yellow-color);
+  }
+  
+  .yellowFont:active {
+      color: var(--yellow-color);
+  }
+  
+  .yellowFont:visited {
+      color: var(--yellow-color);
+  }
+
     pre {
       font-family: monospace, "Courier New", Courier;
       margin: 0;
@@ -46,22 +66,6 @@ body {background-color: black;
         color: hotpink;
       }
 
-    #gitHubProfilelink {
-        color: yellow; /* Default color */
-    }
-    
-    #gitHubProfilelink:hover {
-        color: yellow /* Color when hovered */
-    }
-    
-    #gitHubProfilelink:active {
-        color: yellow /* Color when clicked */
-    }
-    
-    #gitHubProfilelink:visited {
-        color: yellow; /* Color for visited links */
-    }
-
     #video-embedded {
       width: 480px;
       height: 270px;
diff --git a/index.htm b/index.htm
index 9821d07..7574670 100644
--- a/index.htm
+++ b/index.htm
@@ -58,9 +58,9 @@
             </div>
             ------------------------------------------------------------------------
             <br>
-            <b>Ready to Test (QA) GitHub Profile</b> 👤
+            <span class="sections" data-testid="github-profile-title"><b>Ready to Test (QA) GitHub Profile</b></span> 👤
             <br>
-            <a href="https://github.com/readytotest" id="gitHubProfilelink" target="_blank" rel="noopener noreferrer">https://github.com/readytotest</a>
+            <a href="https://github.com/readytotest" target="_blank" rel="noopener noreferrer">https://github.com/readytotest</a>
             <br>
             <a href ="#repo-list">Down to repo list <span class="arrow" datatest-id="repo-jump-link">⇩</span></a>
             <br> 
@@ -120,7 +120,7 @@
             <br>
             Helper Function 1: <a href="https://github.com/readytotest/test-playwright/blob/main/scripts/verifyTextAndLink.ts" target="_blank" rel="noopener noreferrer">verifyTextAndLink.ts</a>
             <br>
-            <sup>
+            <sup class="yellowFont">
             Verifies an element's text content, visibility, and optionally its `href` attribute.
             <br>
             The visibility check defaults to true; pass false if you want to verify it's hidden.