swap some colors around

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">
+    <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">
       <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

@@ -1,13 +1,18 @@
-import React from 'react';
-import classnames from 'classnames';
+import React from "react";
+import classnames from "classnames";
 
 const getNavClasses = (isClient) =>
-  classnames("hover:underline mx-2 md:mx-3", isClient ? "text-vibrant-light" : 'text-gray-200');
+  classnames(
+    "hover:underline mx-2 md:mx-3",
+    isClient ? "text-vibrant-light" : "text-gray-200"
+  );
 
-const Nav = ({ ar, isClient }) => (
+const Nav = ({ imageIsLandscape, isClient }) => (
   <nav
     className={classnames(
-      ar > 1 || !isClient ? "landscape:w-screen" : "portrait:w-screen",
+      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",
       "p-2 flex justify-center",
       isClient && "bg-vibrant-dark blurred-or-opaque-bg-2"
     )}
@@ -89,4 +94,4 @@ const Nav = ({ ar, isClient }) => (
   </nav>
 );
 
-export default Nav;
+export default Nav;