css fix

src/components/P1/Meme/Meme.astro

@@ -0,0 +1,31 @@
+---
+import "./MemeStyles.css";
+---
+
+<div class="meme-container">
+    <div class="meme-wrapper">
+        <div class="meme-bg">
+            <div class="meme-columns meme-translucent">
+                <h2
+                    class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
+                >
+                    TITLE
+                </h2>
+                <h3
+                    class="left meme-bp text-[calc(30px_+_(45_-_30)_*_((100vw_-_300px)_/_(1600_-_300)))] min-w-[75vw] z-[999] mt-[0.5em]"
+                >
+                    Building a new world <wbr /> for your data
+                </h3>
+                <h4
+                    class="left rounded-[15px] text-[calc(15px_+_(21_-_15)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--cloud)] text-[length:var(--font-size-m)] font-normal not-italic max-w-[550px] leading-[35px] mt-[0.5em]"
+                >
+                    Right now, Lume has only one full-time developer and limited
+                    helper staff! We need help from developers, fundraisers,
+                    funders, and contributors to bring the new internet to the
+                    masses.
+                </h4>
+            </div>
+        </div>
+        <div class="img-right"></div>
+    </div>
+</div>

src/components/P1/Meme/MemeStyles.css

@@ -0,0 +1,99 @@
+.meme-container {
+    align-self: flex-start;
+    position: relative;
+    width: 100%;
+    justify-content: center;
+    margin-block: 5vh;
+    padding-block: 5vh;
+}
+
+.meme-bp {
+    padding-right: 45%;
+}
+
+.meme-wrapper {
+    background-image: url("../../../assets/tilted-rectangle.webp");
+    background-size: 100% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 100%;
+    padding-block: 2.1em;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    display: flex;
+    padding-left: 6.5%;
+    height: 80vh;
+    transition: 0.5s;
+}
+
+.meme-bg {
+    background-image: url("../../../assets/meme.webp");
+    background-position: 100% 50%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-left: -0.8vw;
+    height: calc(100% + 0.3vh);
+    transition: 0.5s;
+}
+
+.meme-columns {
+    display: grid;
+    position: relative;
+    margin-block: calc(10% + 1.5625vh);
+}
+
+@media screen and (width <=1050px) {
+    .meme-container {
+        z-index: 999 !important;
+        width: 100%;
+        transition: 0.5s;
+    }
+
+    .meme-bp {
+        padding-right: 0%;
+    }
+
+    .meme-wrapper {
+        width: 100%;
+        padding-inline: 15%;
+        padding-left: 20%;
+        height: 80vh;
+        transition: 0.5s;
+    }
+
+    .meme-translucent {
+        max-width: 100%;
+        transition: 0.5s;
+        background-color: #020e10ac;
+        border-radius: 15px;
+    }
+
+    .meme-bg {
+        background-position: 50% 50%;
+        z-index: 999 !important;
+    }
+
+    .meme-columns {
+        display: grid;
+        position: relative;
+        margin-block: calc(25% + 1.5625vh);
+        transition: 0.5s;
+    }
+}
+
+@media screen and (width >=2200px) {
+    .meme-container {
+        width: 100%;
+        justify-content: center;
+        display: inline-block;
+        transition: 0.5s;
+    }
+
+    .meme-translucent {
+        max-width: 30%;
+        transition: 0.5s;
+        background-color: none;
+        border-radius: 15px;
+    }
+}

src/index.css

@@ -1,26 +1,22 @@
 @import url("https://fonts.googleapis.com/css?family=Jaldi:400|JetBrains+Mono:400,700|IBM+Plex+Sans+Devanagari:400");
 
 :root {
-  --primary-dark: #000;
-  --primary-light: #fff;
-}
-
-:root {
+  --primary-dark: rgba(0 0 0 100%);
+  --primary-light: rgba(255 255 255 100%);
   --black:
-    rgba(0, 0, 0, 1);
+    rgba(0 0 0);
   --blue-charcoal:
-    rgba(1, 14, 16, 1);
+    rgba(1 14 16);
   --blue-charcoal-2:
-    rgba(3, 21, 24, 1);
+    rgba(3 21 24);
   --aquamarine:
-    rgba(122, 252, 187, 1);
+    rgba(122 252 187);
   --cloud:
-    rgba(199, 199, 199, 1);
+    rgba(199 199 199);
   --alto:
-    rgba(217, 217, 217, 1);
+    rgba(217 217 217);
   --white:
-    rgba(255, 255, 255, 1);
-
+    rgba(255 255 255);
   --font-size-s: 20px;
   --font-size-m: 21px;
   --font-size-l: 25px;
@@ -28,8 +24,7 @@
   --font-size-xxl: 32px;
   --font-size-xxxl: 45px;
   --font-size-xxxxl: 100px;
-
-  --font-family-ibm_plex_sans_devanagari: "IBM Plex Sans Devanagari";
+  --font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari";
   --font-family-jaldi: "Jaldi";
   --font-family-jetbrains-mono: "JetBrains Mono";
 }
@@ -87,10 +82,6 @@ body {
   white-space: nowrap;
 }
 
-a {
-  text-decoration: none;
-}
-
 h1 {
   font-size: calc(26px + (82 - 26) * ((100vw - 300px) / (1600 - 300)));
   font-weight: 100;
@@ -114,7 +105,6 @@ h4 {
   font-size: calc(15px + (21 - 15) * ((100vw - 300px) / (1600 - 300)));
   color: var(--cloud);
   font-family: var(--font-family-jaldi);
-  font-size: var(--font-size-m);
   font-weight: 400;
   font-style: normal;
   max-width: 550px;
@@ -151,7 +141,7 @@ ul {
   padding: 0 1rem;
 }
 
-@media screen and (max-width: 1050px) {
+@media screen and (width <=1050px) {
   .left {
     display: flex;
     position: relative;

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Navbar from "../components/Navbar/Navbar.jsx";
 import Header from "../components/P1/Header/Header.astro";
+import Meme from "../components/P1/Meme/Meme.astro";
 import Powered from "../components/P1/Powered/Powered.astro";
 import Vision from "../components/P1/Vision/Vision.astro";
 import Whatisweb3 from "../components/P1/Whatisweb3/Whatisweb3.astro";
@@ -29,5 +30,6 @@ import "../index.css";
 		<Vision />
 		<Whatisweb3 />
 		<Powered />
+		<Meme />
 	</body>
 </html>