Changed the color scheme

css/styles.css

@@ -1,3 +1,9 @@
+:root {
+    --main-bg-color: #568ea3;
+    --main-card-bg-color: #E96400;
+    --main-highlight-color: #a40e4c;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -11,7 +17,7 @@ body {
     margin: 0;
     font-family: 'Roboto', sans-serif;
     height: 100%;
-    background-color: #85144b;
+    background-color: var(--main-bg-color);
 }
 
 h1 {
@@ -30,12 +36,12 @@ a {
 }
 
 a:hover {
-    color: #FFDC00;
+    color: var(--main-highlight-color);
 }
 
 .go-down {
     color: white;
-    background-color: #0074D9;
+    background-color: var(--main-card-bg-color);
     font-family: 'Roboto', sans-serif;
     font-size: 1.75em;
     cursor: pointer;
@@ -43,7 +49,7 @@ a:hover {
     transition-duration: 0.3s;
     padding: 0.5em;
     border-radius: 0.5em;
-    border: 0.1em solid #FFDC00;
+    border: 0.1em solid var(--main-highlight-color);
 }
 
 .go-down:hover {
@@ -51,8 +57,8 @@ a:hover {
     -webkit-transition: ease-in-out;
     -moz-transition: ease-in-out;
     -o-transition: ease-in-out;
-    background-color: #FFDC00;
-    border: 0.1em solid #0074D9;
+    background-color: var(--main-highlight-color);
+    border: 0.1em solid var(--main-card-bg-color);
     color: black;
 }
 
@@ -78,7 +84,7 @@ a:hover {
 }
 
 .Navbar {
-    background-color: #0074D9;
+    background-color: var(--main-card-bg-color);
     display: flex;
     padding: 16px;
     font-family: 'Roboto', sans-serif;
@@ -159,14 +165,14 @@ h1 {
 .card {
     height: 100%;
     width: 100%;
-    background-color: #0074D9;
-    box-shadow: 5px 10px #FFDC00;
+    background-color: var(--main-card-bg-color);
+    box-shadow: 5px 10px var(--main-highlight-color);
     cursor: pointer;
     position: relative;
 }
 
 .card:hover {
-    box-shadow: 10px 20px #FFDC00;
+    box-shadow: 10px 20px var(--main-highlight-color);
     transition: box-shadow 0.25s ease-in-out;
     -webkit-transition: box-shadow 0.25s ease-in-out;
     -o-transition: box-shadow 0.25s ease-in-out;
@@ -220,7 +226,7 @@ h1 {
 }
 
 .footer {
-    background-color: #0074D9;
+    background-color: var(--main-card-bg-color);
     color: white;
     text-align: center;
     position: absolute;
@@ -255,15 +261,15 @@ h1 {
     margin-right: 400px;
     height: 600px;
     line-height: 1em;
-    background-color: #0074D9;
-    box-shadow: 10px 15px #FFDC00;
+    background-color: var(--main-card-bg-color);
+    box-shadow: 10px 15px var(--main-highlight-color);
     position: relative;
     align-items: center;
     justify-content: center;
 }
 
 .main-box:hover {
-    box-shadow: 20px 30px #FFDC00;
+    box-shadow: 20px 30px var(--main-highlight-color);
     transition: box-shadow 0.25s ease-in-out;
     -webkit-transition: box-shadow 0.25s ease-in-out;
     -o-transition: box-shadow 0.25s ease-in-out;