add of variable for main colors

src/components/SingleProject/SingleProject.css

@@ -42,7 +42,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    padding: 2rem 2rem 2rem 0rem;
+    padding: 2rem 2rem 2rem 0;
     align-items: flex-start;
     height: 100%;
 }
@@ -96,7 +96,7 @@
 
 .single-project-title {
     font-size: 2rem;
-    color: #EAEAEA;
+    color: var(--title-color);
     margin-top: 0;
     margin-bottom: 0;
     display: flex;
@@ -105,7 +105,7 @@
 }
 
 .single-project-description {
-    color: #B0B0B0;
+    color: var(--text-color);
     margin-bottom: 1.5rem;
     text-align: justify;
 }
@@ -120,7 +120,7 @@
 }
 
 .single-project-link {
-    color: #B0B0B0;
+    color: var(--text-color);
     text-decoration: none;
     font-weight: 600;
     margin-bottom : 0;
@@ -128,7 +128,7 @@
 
 .single-project-link:hover {
     cursor: pointer;
-    color: #EAEAEA;
+    color: var(--title-color);
 }
 
 .arrow {
@@ -137,7 +137,7 @@
     transform: translateY(-50%);
     background: none;
     border: none;
-    color: #EAEAEA;
+    color: var(--title-color);
     font-size: 35px;
     display: none;
     transition: all 0.3s ease;
@@ -145,7 +145,7 @@
 }
 
 .arrow:hover {
-    color: #D95F46;
+    color: var(--important-color);
     opacity: 0.8;
     transform: translateY(-50%) scale(1.2);
     cursor: pointer;
@@ -165,7 +165,7 @@
 
 
 .single-project-right-top-date{
-    color : #B0B0B0;
+    color : var(--text-color);
     margin : 0;
     margin-left : 2em;
     font-weight: bold;