Update CSS Colors to vars

styles/style.css

@@ -1,6 +1,15 @@
+/* COLOR VARS */
+:root {
+  --main-bg-color: #aac4ee;
+  --accent-color: none;
+  --overlay-color: #027fe59d;
+  --main-text-color: #016ec7;
+  --link-color: azure;
+  --link-visited-color: azure;
+}
 body {
-  background-color: #aac4ee;
-  color: #0280e5;
+  background-color: var(--main-bg-color);
+  color: var(--main-text-color);
   font-family: sans-serif;
   text-align: center;
   padding-bottom: 60px; /*Footer height*/
@@ -60,7 +69,7 @@ body {
 }
 
 .form-info {
-  color: #0280e5;
+  color: var(--main-text-color);
   font-size: 17px;
   font-weight: bolder;
   margin-bottom: 4px;
@@ -69,7 +78,7 @@ body {
 .text-description {
   display: inline-block;
   width: 80%;
-  color: #0280e5;
+  color: var(--main-text-color);
   padding-top: 5px;
   padding-bottom: 5px;
   margin-left: auto;
@@ -85,7 +94,7 @@ body {
 
 .lookup-button {
   background-color: #3c78d8;
-  color: #f6f5f4;
+  color: var(--link-color);
   border: none;
   border-radius: 18px;
   font-size: 16px;
@@ -104,7 +113,7 @@ body {
   background-color: #3c78d8;
   border: none;
   border-radius: 10px;
-  color: #f6f5f4;
+  color: var(--link-color);
   padding: 7px;
   margin-bottom: 10px;
   font-size: 16px;
@@ -112,7 +121,7 @@ body {
 
 .inlinelink {
   text-decoration: underline;
-  color: #3c78d8;
+  color: var(--link-color);
   cursor: pointer;
 }
 
@@ -125,7 +134,7 @@ body {
 }
 .sidebar_control {
   background-color: transparent;
-  color: whitesmoke;
+  color: var(--link-color);
   border: none;
   font-family: sans-serif;
   font-size: larger;
@@ -144,7 +153,7 @@ body {
   display: block;
   max-width: 250px;
   width: 0;
-  background-color: navy;
+  background-color: var(--overlay-color);
   transition: 0.4s;
 }
 #sidebar a {
@@ -155,7 +164,7 @@ body {
   text-decoration: none;
   text-align: center;
   font-size: 25px;
-  color: white;
+  color: var(--link-color);
   display: block;
   white-space: nowrap;
   transition: 0.5s;