groovier borders

src/components/index/ActionButtons.js

@@ -12,7 +12,7 @@ const getButtonClasses = (isClient) =>
 
 const ActionButtons = ({ isClient, image, shuffleImage }) => (
   <div className="flex flex-col">
-    <div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 border-2 border-vibrant">
+    <div className="text-muted-light p-4 m-4 bg-muted-dark rounded-xl flex flex-col text-center z-10 cool-border-small-light">
       <h3 className="mb-2 drop-shadow">Try my word game!</h3>
       <a className="rounded-full bg-muted-light hover:bg-vibrant text-muted-dark p-2" href="https://buzzwords.gg">
         Buzzwords

src/components/index/Nav.js

@@ -10,11 +10,12 @@ const getNavClasses = (isClient) =>
 const Nav = ({ imageIsLandscape, isClient }) => (
   <nav
     className={classnames(
-      imageIsLandscape
-        ? "landscape:w-screen portrait:rounded-xl portrait:m-2 portrait:border-2 border-vibrant-light"
-        : "portrait:w-screen landscape:rounded-xl landscape:m-2 landscape:border-2 border-vibrant-light",
+      // imageIsLandscape
+      //   ? "landscape:w-screen portrait:rounded-3xl portrait:m-2"
+      //   : "portrait:w-screen landscape:rounded-3xl landscape:m-2",
+      "rounded-3xl m-2",
       "p-2 flex justify-center",
-      isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
+      isClient && "bg-vibrant-dark cool-border-small-light"
     )}
     style={{ zIndex: 100 }}
   >