setup main block

app/src/views/LandingPage.vue

@@ -21,7 +21,7 @@ const scrollToSection = (sectionId) => {
     <div class="h-screen w-screen absolute top-0 left-0">
       <!-- game header -->
       <div
-        class="w-full h-20 px-5 flex flex-row items-center justify-between bg-bg-secondary"
+        class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
       >
         <div class="flex flex-row items-center gap-3">
           <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
@@ -89,21 +89,15 @@ const scrollToSection = (sectionId) => {
         </div>
       </div>
 
-      <div class="w-fit h-[94vh] m-3 justify-center px-10 overflow-y-auto">
-        <div
-          class="w-full h-full grid grid-cols-3 justify-items-center items-center"
-        >
-          <h1
-            class="text-text-primary mb-2 font-extrabold font-mono w-fit ml-20"
-            style="font-size: 14vh"
-          >
+      <!-- main content -->
+      <main class="w-full h-[94vh] overflow-y-auto">
+        <div class="h-1/2 m-3 px-10">
+          <div class="w-full h-full flex flex-col justify-around items-center">
+            <h1 class="text-text-primary text-7xl font-extrabold font-mono">
               Linux
             </h1>
-          <img src="../img/icon_totem.svg" class="h-[30vh] inline-flex mr-12" />
-          <h1
-            class="text-text-primary mb-2 font-extrabold font-mono w-fit mr-20"
-            style="font-size: 14vh"
-          >
+            <img src="../img/icon_totem.svg" class="h-[30vh]" />
+            <h1 class="text-text-primary text-7xl font-extrabold font-mono">
               Odyssey
             </h1>
           </div>
@@ -322,6 +316,7 @@ const scrollToSection = (sectionId) => {
             <h1 style="font-size: 2.5vh">team@linuxodyssey.xyz</h1>
           </section>
         </div>
+      </main>
     </div>
   </div>
 </template>