Added animations, improved footer

V1/resources/css/components/hero.css

@@ -1,5 +1,5 @@
 .hero-title {
-  color: white;
+  color: #F8FAFC;
   font-size: 10vmin;
   font-family: 'Mona-Sans';
   font-weight: bold;
@@ -10,13 +10,15 @@
   position: relative;
   top: 25px;
   left: 15px;
-  color: white;
+  color: #F8FAFC;
   font-family: "Moonstone History";
   font-size: 10vmin;
   line-height: 10vh;
 }
 
 .hero-container {
+  z-index: -2;
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -28,6 +30,8 @@
 }
 
 .hero-sub-container {
+  position: fixed;
+  z-index: -1;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -37,7 +41,7 @@
 .hero-sub-container-separator {
   height: 400px;
   width: 2px;
-  background-color: #ffffff;
+  background-color: #F8FAFC;
   transform: rotate(15deg);
   margin: 100px;
 }
@@ -56,7 +60,7 @@
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-  color: #ffffff;
+  color: #F8FAFC;
   text-decoration: none;
   transition: 0.5s;
   border-radius: 50px;
@@ -76,11 +80,11 @@
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
-  color: #ffffff;
+  color: #F8FAFC;
   text-decoration: none;
   transition: 0.5s;
   border-radius: 50px;
-  border: 3px solid white;
+  border: 3px solid #F8FAFC;
 }
 
 .hero-sub-container-menu-item2:hover {
@@ -101,7 +105,7 @@
 }
 
 .hero-decoration-text span {
-  color: #ffffff;
+  color: #F8FAFC;
   font-family: "Montserrat", sans-serif;
   font-optical-sizing: auto;
   font-weight: 600;
@@ -151,12 +155,12 @@
   position: absolute;
   height: 50px;
   width: 50px;
-  color: #ffffff;
+  color: #F8FAFC;
 }
 
 .hero-decoration-arrow {
   position: absolute;
-  color: #ffffff;
+  color: #F8FAFC;
   width: 10vmin;
   bottom: 150px;
   right: 180px;