Centered title

Standard button width
Removed emoji from home
Removed extra window from play

src/lib/components/themeSelector.svelte

@@ -18,7 +18,7 @@
 		justify-content: center;
 		flex-wrap: wrap;
 		button {
-			max-width: 33%;
+			width: 25%;
 		}
 	}
 </style>

src/lib/styles/general.css

@@ -15,9 +15,9 @@
 .title-bar {
   display: flex;
   align-items: center;
-  gap: 15px;
   span{
-    margin: 0 auto;
+    text-align: center; 
+    flex-grow: .75;
   }
 }
 

src/routes/+page.svelte

@@ -14,12 +14,10 @@
 
 	<div class="tabs">
 		<a href="/play" class="tab-button">
-			<span class="tab-icon">🎮</span>
+			<span class="tab-icon">Play</span>
-			<span>Play</span>
 		</a>
 		<a href="/rules" class="tab-button">
-			<span class="tab-icon">📖</span>
+			<span class="tab-icon">Rules</span>
-			<span>Rules</span>
 		</a>
 	</div>
 
@@ -59,7 +57,7 @@
 	}
 
 	.tab-button {
-		border: none;
+		border:color(from color srgb r g b);
 		border-radius: 10px;
 		padding: 25px 40px;
 		font-size: 1.3rem;

src/routes/play/+page.svelte

@@ -29,7 +29,6 @@
 </script>
 
 <div class="container">
-	<div class="window">
 		<fieldset>
 			<legend>Chart Generator</legend>
 			<ChartDisplay chart={currentChart} />
@@ -40,24 +39,14 @@
 
 		<fieldset>
 			<legend>Position Roller</legend>
-			<DiceRoller {diceRoll} />
+			<DiceRoller roll={diceRoll} />
 			<div class="button-row">
 				<button onclick={rollDice}>Roll Dice</button>
 			</div>
 		</fieldset>
 </div>
-</div>
 
 <style>
-	.window {
-		max-width: 60rem;
-		margin: 0 auto;
-		padding: 1.5rem;
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-	}
-
 	fieldset {
 		padding: 1.25rem;
 		margin: 0;