fix contrast with rainbow background

src/app/page.tsx

@@ -93,14 +93,7 @@ export default function Home() {
 
   return (
     <Fragment>
-      <VStack
-        bg="cyan.950"
-        w="100vw"
-        minH="100vh"
-        h="100%"
-        py="5vh"
-        minW="fit-content"
-      >
+      <VStack bg="cyan.950" minH="100vh" h="100%" py="5vh" minW="fit-content">
         <VStack w={{ base: "100%", md: "90%" }} gap={10} minW="fit-content">
           <VStack w="80%" gap={10}>
             <Icon h="7.5rem" color="whiteAlpha">
@@ -235,19 +228,35 @@ export default function Home() {
           rgb(97, 55, 155),
           rgb(147, 40, 142)
            )`}
+        w="100%"
+        py="5vh"
+        textAlign="center"
       >
         <VStack
-          w="100vw"
-          py="5vh"
-          textAlign="center"
           color="white"
           textShadow="0px 0px 5px black;"
+          WebkitTextStroke="0.3px black;"
           gap={6}
+          w="100%"
         >
-          <Text fontSize="3xl" w="auto" bg="blackAlpha.400" maxW="62vw">
+          <Text
+            fontSize="3xl"
+            minW="fit-content"
+            w={{ base: "100%", sm: "auto" }}
+            bg="blackAlpha.600"
+            maxW={{ base: "", sm: "62vw" }}
+            px={2}
+          >
             {"Down with fascism! Fuck MAGA! Fuck Trump! Fuck Nazis!"}
           </Text>
-          <Text fontSize="3xl" w="auto" bg="blackAlpha.400" maxW="62vw">
+          <Text
+            fontSize="3xl"
+            minW="fit-content"
+            w={{ base: "100%", sm: "auto" }}
+            bg="blackAlpha.600"
+            maxW={{ base: "", sm: "62vw" }}
+            px={2}
+          >
             {
               "Trans rights are human rights! Trans women are women! Trans men are men! Never let them take away your happiness!"
             }