Massive Refactor

1 files changed, 74 insertions, 34 deletions

diff --git a/styles.css b/styles.css
index c755b81..d30dbc2 100644
--- a/styles.css
+++ b/styles.css
@@ -1,64 +1,104 @@
-/* Grey */
-/* Tan */
-/* Rust */
-/* Teal */
-/* Muted Green */
 * {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
   background-size: cover;
   background-repeat: no-repeat;
-  background-color: #DDD1C7;
-  font-family: sans-serif;
+  background-color: #e6e6e6;
 }
 
-.landing-page {
-  height: 100vh;
-  width: 100%;
-  background-color: #DDD1C7;
+body {
+  font-family: "Josefin Slab";
+  font-weight: 400;
+  color: #27327b;
+}
+
+a {
+  font-family: "Josefin Sans";
+  font-weight: 400;
+  color: #27327b;
+}
+
+h1, h2, h3, h4, h5 {
+  font-family: "Josefin Sans";
+  font-weight: 700;
+  color: #27327b;
+}
+
+html {
+  font-size: 100%;
+} /* 16px */
+h1 {
+  font-size: 4.21rem; /* 67.36px */
+}
+
+h2 {
+  font-size: 3.158rem; /* 50.56px */
+}
+
+h3 {
+  font-size: 2.369rem; /* 37.92px */
 }
-.landing-page .menu-container {
+
+h4 {
+  font-size: 1.777rem; /* 28.48px */
+}
+
+h5 {
+  font-size: 1.333rem; /* 21.28px */
+}
+
+small {
+  font-size: 0.75rem; /* 12px */
+}
+
+@keyframes reveal {
+  0% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+.menu-container {
   position: fixed;
   top: 0;
   left: 0;
   height: 100vh;
   width: 100%;
-  z-index: 5;
-  opacity: 1;
-  transition: opacity 1500ms;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.landing-page .menu-container .menu-wrapper {
+.menu-container .menu-wrapper {
   list-style: none;
 }
-.landing-page .menu-container .menu-wrapper li {
+.menu-container .menu-wrapper li {
   margin: 0.5vmin 0;
   display: flex;
   justify-content: left;
+  opacity: 0;
+  animation: reveal 1s ease-out forwards;
+}
+.menu-container .menu-wrapper li:nth-child(1) {
+  animation-delay: 0.15s;
+}
+.menu-container .menu-wrapper li:nth-child(2) {
+  animation-delay: 0.3s;
+}
+.menu-container .menu-wrapper li:nth-child(3) {
+  animation-delay: 0.45s;
+}
+.menu-container .menu-wrapper li:nth-child(4) {
+  animation-delay: 0.6s;
 }
-.landing-page .menu-container .menu-wrapper li a {
+.menu-container .menu-wrapper li a {
   text-decoration: none;
   font-weight: 700;
   font-size: 15vmin;
-  color: rgba(255, 255, 255, 0);
-  -webkit-text-stroke: 0.12vmin #353535;
-  transition-duration: 200ms;
-}
-.landing-page .menu-container .menu-wrapper li a:hover {
-  color: #353535;
-  -webkit-text-stroke: 0px #353535;
-}
-.landing-page .menu-container .menu-wrapper li span {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 68vmin;
-  font-weight: 900;
-  color: rgba(0, 0, 0, 0.2);
+  color: #27327b;
 }
 
 /*# sourceMappingURL=styles.css.map */