Complete Overhaul

1 files changed, 53 insertions, 64 deletions

diff --git a/styles.css b/styles.css
index 0fa1300..9fbff72 100644
--- a/styles.css
+++ b/styles.css
@@ -1,75 +1,64 @@
-/* Simple Reset */
+/* Grey */
+/* Tan */
+/* Rust */
+/* Teal */
+/* Muted Green */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+  background-size: cover;
+  background-repeat: no-repeat;
+  font-family: sans-serif;
 }
 
-/* Basic Styling */
-body {
-    font-family: 'Helvetica', sans-serif;
-    background-color: #fff;
-    color: #000;
-    line-height: 1.4;
+.landing-page {
+  height: 100vh;
+  width: 100%;
+  background-color: #DDD1C7;
 }
-
-.container {
-    max-width: 400px;
-    margin: 50px auto;
-    padding: 20px;
-    text-align: center;
+.landing-page .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;
 }
-
-header h1 {
-    font-size: 2em;
-    margin-bottom: 0.5em;
+.landing-page .menu-container .menu-wrapper {
+  list-style: none;
 }
-
-header p {
-    font-size: 1.2em;
-    color: #000;
-    margin-bottom: 2em;
+.landing-page .menu-container .menu-wrapper li {
+  margin: 10px 0;
+  display: flex;
+  justify-content: left;
 }
-
-/* Responsive Design */
-@media (max-width: 400px) {
-    .container {
-        width: 100%;
-        margin: 20px auto;
-        padding: 10px;
-    }
+.landing-page .menu-container .menu-wrapper li a {
+  text-decoration: none;
+  letter-spacing: 5px;
+  font-weight: 700;
+  font-size: 15vmin;
+  color: rgba(255, 255, 255, 0);
+  -webkit-text-stroke: 1.4px #353535;
+  transition-duration: 200ms;
 }
-
-.button {
-    display: inline-block;
-    padding: 10px 30px;
-    font-size: 18px;
-    cursor: pointer;
-    background-color: #000; /* Dark grey for OLED efficiency */
-    color: #fff;
-    border: none;
-    border-radius: 50px; /* High border-radius for pill shape */
-    transition: background-color 0.3s;
+.landing-page .menu-container .menu-wrapper li a:hover {
+  color: #353535;
+  -webkit-text-stroke: 0px #353535;
 }
-
-.button:hover {
-    background-color: #333333; /* Slightly lighter grey for hover state */
+.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);
 }
 
-.menu-option {
-    margin-bottom: 20px;
-}
-
-.menu-option a {
-    text-decoration: none;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.menu-option svg.logo {
-    width: 50px;
-    height: 50px;
-    margin-right: 40px;
-}
+/*# sourceMappingURL=styles.css.map */