use custom colors everywhere

src/App.jsx

@@ -9,7 +9,7 @@ function App() {
 	const [error, setError] = useState();
 	const [roster, setRoster] = useState();
 	const [onePerPage, setOnePerPage] = useState(false);
-	const [primaryColor, setPrimaryColor] = useState();
+	const [primaryColor, setPrimaryColor] = useState("#536766");
 	const uploadRef = useRef();
 	async function handleFileSelect(event) {
 		const files = event?.target?.files;
@@ -97,7 +97,13 @@ function App() {
 	}, [roster]);
 
 	return (
-		<div className="App">
+		<div
+			className="App"
+			style={{
+				"--primary-color": primaryColor,
+				"--primary-color-transparent": primaryColor + "60",
+			}}
+		>
 			<div className="header print-display-none">
 				<a href="/fancyscribe" style={{ color: "#fff", fontWeight: 800 }}>
 					FancyScribe
@@ -107,13 +113,7 @@ function App() {
 				</div>
 			</div>
 
-			<div
+			<div className="body">
-				className="body"
-				style={{
-					"--primary-color": primaryColor,
-					"--primary-color-transparent": primaryColor + "60",
-				}}
-			>
 				<div
 					className="print-display-none"
 					style={{ display: "flex", width: "100%", gap: 8 }}

src/index.css

@@ -57,8 +57,8 @@ button {
 	transition: border-color 0.25s;
 }
 button:hover {
-	border-color: #536766;
+	border-color: var(--primary-color);
-	background-color: #53676660;
+	background-color: var(--primary-color-transparent);
 }
 button:focus,
 button:focus-visible {
@@ -82,7 +82,7 @@ button:focus-visible {
 	justify-content: space-between;
 	align-items: center;
 	padding: 8px 16px;
-	background-color: #536766;
+	background-color: var(--primary-color);
 	width: 100%;
 	color: #fff;
 	font-size: 1.7em;
@@ -114,8 +114,8 @@ button:focus-visible {
 }
 
 .rosterUpload:hover {
-	border-color: #536766;
+	border-color: var(--primary-color);
-	background-color: #53676660;
+	background-color: var(--primary-color-transparent);
 	font-size: 2rem;
 }
 

src/roster40k.js

@@ -983,7 +983,6 @@ function ParseProfileCharacteristics(profile, profileName, typeName, map) {
 			if (!map) {
 				debugger;
 			}
-			console.log(map);
 			map.set(profileName, char.textContent);
 		}
 	}