prettier characteristic boxes

src/10th/Roster.jsx

@@ -660,8 +660,9 @@ const FancyBox = ({ children }) => {
 			style={{
 				color: "var(--primary-color)",
 				padding: 2,
-				background:
+				background: "var(--primary-color)",
-					"linear-gradient(-45deg, transparent 4px, var(--primary-color) 0)",
+				clipPath:
+					"polygon(12% 0, 100% 0, 100% 20%, 100% 88%, 88% 100%, 20% 100%, 0 100%, 0 12%)",
 			}}
 		>
 			<div
@@ -671,7 +672,9 @@ const FancyBox = ({ children }) => {
 					display: "flex",
 					alignItems: "center",
 					justifyContent: "center",
-					background: "linear-gradient(315deg, transparent 3px, #E8EDE7 0)",
+					background: "#E8EDE7",
+					clipPath:
+						"polygon(10% 0, 100% 0, 100% 20%, 100% 90%, 90% 100%, 20% 100%, 0 100%, 0 10%)",
 					padding: 3,
 					fontSize: "1.6em",
 					fontWeight: 800,

src/10th/Weapons.jsx

@@ -114,7 +114,6 @@ const Weapon = ({ weapon, previousWeapon, nextWeapon, isMelee, className }) => {
 				</td>
 				<td style={{ textAlign: "left" }}>
 					<div
-						className="min-w-[24vw]"
 						style={{
 							display: "flex",
 							alignItems: "center",