Polish styling and scaling

src/App.tsx

@@ -7,7 +7,6 @@ import store from "./Components/Plugins/Redux/Store/Store";
 const queryClient = new QueryClient();
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import "./styles.css";
 const router = createHashRouter([
   {
     path: "/",

src/styles.css

@@ -1,20 +0,0 @@
-@keyframes anvil {
-  0% {
-    transform: scale(1) translateY(0px);
-    opacity: 0;
-    box-shadow: 0 0 0 rgba(241, 241, 241, 0);
-  }
-  1% {
-    transform: scale(0.96) translateY(10px);
-    opacity: 0;
-    box-shadow: 0 0 0 rgba(241, 241, 241, 0);
-  }
-  100% {
-    transform: scale(1) translateY(0px);
-    opacity: 1;
-    box-shadow: 0 0 500px rgba(241, 241, 241, 0);
-  }
-}
-.popup-content {
-  -webkit-animation: anvil 0.3s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;
-}

src/styles.tsx

@@ -42,19 +42,19 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontWeight: "bold",
   },
   text_XL: {
-    fontSize: "clamp(1vw, 4rem, 2vw)",
+    fontSize: "clamp(2rem, 4rem, 8rem)",
   },
   text_L: {
-    fontSize: "clamp(1vw, 2rem, 2vw)",
+    fontSize: "clamp(1.5rem, 3rem, 6rem)",
   },
   text_M: {
-    fontSize: "clamp(1vw, 1rem, 2vw)",
+    fontSize: "clamp(1rem, 2rem, 4rem)",
   },
   text_S: {
-    fontSize: "clamp(1vw, 0.5rem, 2vw)",
+    fontSize: "clamp(0.5rem, 1rem, 2rem)",
   },
   text_XS: {
-    fontSize: "clamp(1vw, 0.2rem, 2vw)",
+    fontSize: "clamp(0.2rem, 0.5rem, 1rem)",
   },
   flex_row: {
     display: "flex",
@@ -70,10 +70,8 @@ const styles: { [key: string]: React.CSSProperties } = {
     fontSize: "clamp(1vw, 1rem, 2vw)",
     background: "none",
     borderRadius: 8,
-    maxWidth: "30vw",
+    maxWidth: "128px",
-    minWidth: "15vw",
+    minWidth: "100%",
-    minHeight: "5vh",
-    maxHeight: "10vh",
     marginTop: 16,
   },
 };