No background on subhead text

src/pages/index.js

@@ -166,26 +166,19 @@ const IndexPage = ({
             >
               Chuck Dries
             </h1>
-            <div
-              className={classnames(
-                ar > 1 && "landscape:shadow-lg",
-                "z-20 mb-4 inline-block mx-2",
-                isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
-              )}
-            >
-              <div className="flex-auto">
             <h2
               className={classnames(
-                    "p-3 text-center",
-                    isClient && "text-vibrant-light"
+                "p-3 text-center z-20 filter drop-shadow-dark font-bold",
+                isClient &&
+                  (ar > 1
+                    ? "text-vibrant-light landscape:text-gray-100"
+                    : "text-gray-100 landscape:text-vibrant-light")
               )}
-                  style={{ fontSize: "max(1.25vw, 25px)" }}
+              style={{ fontSize: "max(1.3vw, 35px)" }}
             >
               Full Stack Software Engineer &amp; Hobbyist Photographer
             </h2>
           </div>
-            </div>
-          </div>
           <ActionButtons
             image={image}
             isClient={isClient}