Initial Menu

css/index.css

@@ -21,12 +21,12 @@ body {
   --stick-white: #fff;
 
   --font-1: grotesk-diamond;
-  --font-2: LA-LUXE;
+  --font-2: MonumentExtended;
   --font-3: grotesk;
 
   color: var(--color-black);
   background-color: var(--color-bg);
-  font-family: var(--font-1), sans-serif;
+  font-family: var(--font-2), sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeSpeed;
@@ -76,3 +76,90 @@ a:focus-visible {
   outline: 2px solid #fff;
   background: transparent;
 }
+
+.hero-main {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 70px repeat(2, 1fr);
+  grid-template-areas:
+    "... ... ..."
+    "... ... ..."
+    "images ... ...";
+}
+
+.images {
+  grid-area: images;
+}
+
+.nav {
+  z-index: 998;
+  position: absolute;
+  top: 0%;
+  bottom: auto;
+  left: 0%;
+  right: 0%;
+}
+.padding_global.nav_padding {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.padding_global {
+  height: 100%;
+  padding-left: 2.5%;
+  padding-right: 2.5%;
+}
+@media screen and (max-width: 991px) {
+  .nav_grid {
+    grid-column-gap: 0rem;
+    grid-row-gap: 0rem;
+  }
+}
+.nav_grid {
+  grid-column-gap: 1rem;
+  grid-row-gap: 1rem;
+  grid-template-rows: auto;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-auto-columns: 1fr;
+  grid-auto-flow: row;
+  justify-content: space-between;
+  align-items: center;
+  display: grid;
+}
+.nav_logo_parent {
+  justify-content: flex-start;
+  display: flex;
+  overflow: hidden;
+}
+.est_nav {
+  align-items: flex-start;
+  display: flex;
+  overflow: hidden;
+  justify-content: center;
+  cursor: pointer;
+}
+.est_nav svg {
+  padding-left: 8px;
+}
+
+.nav_menu_btn {
+  width: auto;
+  height: auto;
+  cursor: pointer;
+  background-color: rgba(239, 239, 239, 0);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+  display: flex;
+}
+
+.mid-moon--dark {
+  fill: var(--color-black);
+}
+.mid-moon--light {
+  fill: var(--color-bg);
+}
+
+.logo-close {
+  color: var(--color-black);
+}