diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte
index d91f0f5..b800e77 100644
--- a/src/lib/components/chartDisplay.svelte
+++ b/src/lib/components/chartDisplay.svelte
@@ -1,18 +1,20 @@
 <script>
-  export let chart;
+	export let chart;
+	console.log(chart, chart.x != [''], chart.x);
 </script>
 
 <div class="chart-display">
-  {#if chart && chart.x && chart.y}
-    <div class="axis">
-      <div class="axis-label">X-Axis (Horizontal)</div>
-      <div>{chart.x[0]} ↔ {chart.x[1]}</div>
-    </div>
-    <div class="axis">
-      <div class="axis-label">Y-Axis (Vertical)</div>
-      <div>{chart.y[0]} ↔ {chart.y[1]}</div>
-    </div>
-  {:else}
-    <div class="empty-state">Click Generate!</div>
-  {/if}
-</div>
\ No newline at end of file
+	{#if chart.x.length > 1}
+		<div class="axis">
+			<div class="axis-label">X-Axis (Horizontal)</div>
+			<div>{chart.x[0]} ↔ {chart.x[1]}</div>
+		</div>
+		<div class="axis">
+			<div class="axis-label">Y-Axis (Vertical)</div>
+			<div>{chart.y[0]} ↔ {chart.y[1]}</div>
+		</div>
+	{:else}
+		<div class="empty-state">Click Generate!</div>
+	{/if}
+</div>
+
diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index 2d3652d..7593a6c 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/src/lib/components/themeSelector.svelte
@@ -1,25 +1,25 @@
 <script>
-  import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
-  export let currentTheme;
+	import { themeNames, themeDisplayNames } from '$lib/styles/themes.js';
+	export let currentTheme;
 </script>
 
 <div class="button-row">
-  {#each themeNames as theme}
-    <button 
-      on:click={() => currentTheme = theme}
-      class:active={currentTheme === theme}
-    >
-      {themeDisplayNames[theme]}
-    </button>
-  {/each}
+	{#each themeNames as theme}
+		<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
+			{themeDisplayNames[theme]}
+		</button>
+	{/each}
 </div>
 
 <style>
-  .button-row {
-    display: flex;
-    gap: 10px;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 10px;
-  }
-</style>
\ No newline at end of file
+	.button-row {
+		display: flex;
+		gap: 1rem;
+		justify-content: center;
+		flex-wrap: wrap;
+		button {
+			max-width: 33%;
+		}
+	}
+</style>
+
diff --git a/src/lib/styles/general.css b/src/lib/styles/general.css
index c77b234..b7cd4bd 100644
--- a/src/lib/styles/general.css
+++ b/src/lib/styles/general.css
@@ -1,7 +1,6 @@
 /* Base styles that apply to all themes */
 .container {
-  padding: 20px;
-  min-height: 100vh;
+  padding: 2rem;
 }
 
 .window {
@@ -17,6 +16,9 @@
   display: flex;
   align-items: center;
   gap: 15px;
+  span{
+    margin: 0 auto;
+  }
 }
 
 .home-button {
@@ -81,6 +83,5 @@ button {
 .empty-state {
   font-style: italic;
   text-align: center;
-  padding: 20px;
   opacity: 0.7;
-}
\ No newline at end of file
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c27e221..714ce50 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,29 +1,64 @@
 <script>
-  import '$lib/styles/themes.js';
-  import { writable } from 'svelte/store';
-  import { setContext } from 'svelte';
+	import '$lib/styles/themes.js';
+	import { writable } from 'svelte/store';
+	import { setContext } from 'svelte';
 
-  // Create a theme store that persists across pages
-  const theme = writable('win95');
-  setContext('theme', theme);
+	// Create a theme store that persists across pages
+	const theme = writable('win95');
+	setContext('theme', theme);
 
-  let currentTheme;
-  theme.subscribe(value => {
-    currentTheme = value;
-  });
+	let currentTheme;
+	theme.subscribe((value) => {
+		currentTheme = value;
+	});
 </script>
 
 <div class="app-container theme-{currentTheme}">
-  <slot />
+	<div class="wrapper">
+		<div class="container">
+			<div class="window">
+				<div class="title-bar">
+					<a href="/" class="back-button">←Back</a>
+					<span>A Sludge & Friends game</span>
+				</div>
+				<slot />
+			</div>
+		</div>
+	</div>
 </div>
 
 <style>
-  :global(body) {
-    margin: 0;
-    padding: 0;
-  }
+	:global(body) {
+		margin: 0;
+		padding: 0;
+	}
+	.back-button {
+		padding: 5px 15px;
+		cursor: pointer;
+		border-radius: 4px;
+		text-decoration: none;
+		color: inherit;
+		font-weight: bold;
+		transition: all 0.2s;
+	}
+	.wrapper {
+		min-height: 100vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 20px;
+	}
+
+	.container {
+		width: 100%;
+		max-width: 700px;
+	}
+
+	.window {
+		width: 100%;
+	}
+	.app-container {
+		min-height: 100vh;
+	}
+</style>
 
-  .app-container {
-    min-height: 100vh;
-  }
-</style>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 165c2c1..d46f03e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,142 +1,117 @@
 <script>
-  import { getContext } from 'svelte';
-  import ThemeSelector from '$lib/components/ThemeSelector.svelte';
+	import { getContext } from 'svelte';
+	import ThemeSelector from '$components/themeSelector.svelte';
 
-  const themeStore = getContext('theme');
-  let currentTheme = $themeStore;
-  
-  $: themeStore.set(currentTheme);
+	const themeStore = getContext('theme');
+	let currentTheme = $themeStore;
+
+	$: themeStore.set(currentTheme);
 </script>
 
-<div class="home-wrapper">
-  <div class="home-container">
-    <div class="home-window">
-      <div class="home-title-bar">
-        <span>A Sludge & Friends game</span>
-      </div>
-      
-      <div class="home-content">
-        <h1 class="title">On the Spectrum!</h1>
-        <p class="subtitle">Well.. are ya?</p>
-        
-        <div class="tabs">
-          <a href="/play" class="tab-button">
-            <span class="tab-icon">Play</span>
-          </a>
-          <a href="/rules" class="tab-button">
-            <span class="tab-icon">Rules</span>
-          </a>
-        </div>
+<div class="home-content">
+	<h1 class="title">On the Spectrum!</h1>
+	<p class="subtitle">Well.. are ya?</p>
 
-        <div class="theme-selector-container">
-          <fieldset>
-            <legend>Theme Selector</legend>
-            <ThemeSelector bind:currentTheme />
-          </fieldset>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div class="tabs">
+		<a href="/play" class="tab-button">
+			<span class="tab-icon">🎮</span>
+			<span>Play</span>
+		</a>
+		<a href="/rules" class="tab-button">
+			<span class="tab-icon">📖</span>
+			<span>Rules</span>
+		</a>
+	</div>
+
+	<div class="theme-selector-container">
+		<fieldset>
+			<legend>Theme Selector</legend>
+			<ThemeSelector bind:currentTheme />
+		</fieldset>
+	</div>
 </div>
 
 <style>
-  .home-wrapper {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-  }
+	.home-content {
+		padding: 40px;
+		text-align: center;
+	}
 
-  .home-container {
-    width: 100%;
-    max-width: 700px;
-  }
+	.title {
+		font-size: 3rem;
+		font-weight: bold;
+		margin-bottom: 1rem;
+		line-height: 1.2;
+	}
 
-  .home-window {
-    width: 100%;
-  }
+	.subtitle {
+		font-size: 1.3rem;
+		margin-bottom: 2.5rem;
+		opacity: 0.9;
+	}
 
-  .home-content {
-    padding: 40px;
-    text-align: center;
-  }
+	.tabs {
+		display: flex;
+		gap: 20px;
+		justify-content: center;
+		flex-wrap: wrap;
+		margin-bottom: 2.5rem;
+	}
 
-  .title {
-    font-size: 3rem;
-    font-weight: bold;
-    margin-bottom: 1rem;
-    line-height: 1.2;
-  }
+	.tab-button {
+		border: none;
+		border-radius: 10px;
+		padding: 25px 40px;
+		font-size: 1.3rem;
+		font-weight: bold;
+		cursor: pointer;
+		transition: all 0.3s ease;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 10px;
+		min-width: 180px;
+		text-decoration: none;
+	}
 
-  .subtitle {
-    font-size: 1.3rem;
-    margin-bottom: 2.5rem;
-    opacity: 0.9;
-  }
+	.tab-icon {
+		font-size: 2.5rem;
+	}
 
-  .tabs {
-    display: flex;
-    gap: 20px;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-bottom: 2.5rem;
-  }
+	.theme-selector-container {
+		margin-top: 2rem;
+	}
 
-  .tab-button {
-    border: none;
-    border-radius: 10px;
-    padding: 25px 40px;
-    font-size: 1.3rem;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 10px;
-    min-width: 180px;
-    text-decoration: none;
-  }
+	.theme-selector-container fieldset {
+		padding: 20px;
+	}
 
-  .tab-icon {
-    font-size: 2.5rem;
-  }
+	.theme-selector-container legend {
+		font-weight: bold;
+		padding: 0 10px;
+	}
 
-  .theme-selector-container {
-    margin-top: 2rem;
-  }
+	@media (max-width: 768px) {
+		.title {
+			font-size: 2rem;
+		}
 
-  .theme-selector-container fieldset {
-    padding: 20px;
-  }
+		.subtitle {
+			font-size: 1.1rem;
+		}
 
-  .theme-selector-container legend {
-    font-weight: bold;
-    padding: 0 10px;
-  }
+		.tab-button {
+			padding: 20px 30px;
+			font-size: 1.1rem;
+			min-width: 150px;
+		}
 
-  @media (max-width: 768px) {
-    .title {
-      font-size: 2rem;
-    }
+		.tab-icon {
+			font-size: 2rem;
+		}
 
-    .subtitle {
-      font-size: 1.1rem;
-    }
-
-    .tab-button {
-      padding: 20px 30px;
-      font-size: 1.1rem;
-      min-width: 150px;
-    }
-
-    .tab-icon {
-      font-size: 2rem;
-    }
-
-    .home-content {
-      padding: 30px 20px;
-    }
-  }
-</style>
\ No newline at end of file
+		.home-content {
+			padding: 30px 20px;
+		}
+	}
+</style>
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index 19bb7f4..dba820e 100644
--- a/src/routes/play/+page.svelte
+++ b/src/routes/play/+page.svelte
@@ -1,76 +1,84 @@
 <script>
-  import { getContext } from 'svelte';
-  import xAxes from '$lib/data/xAxes.js';
-  import yAxes from '$lib/data/yAxes.js';
-  import ChartDisplay from '$components/ChartDisplay.svelte';
-  import DiceRoller from '$components/DiceRoller.svelte';
-  import ThemeSelector from '$components/ThemeSelector.svelte';
-  import Toggle from '$components/Toggle.svelte';
+	import { xAxes, yAxes } from '$lib';
+	import ChartDisplay from '$components/chartDisplay.svelte';
+	import DiceRoller from '$components/diceRoller.svelte';
 
-  const theme = getContext('theme');
-  let currentTheme;
-  theme.subscribe(value => {
-    currentTheme = value;
-  });
+	let adultMode = $state(false);
+	let currentChart = $state({ x: [''], y: [''] });
+	let diceRoll = $state({ x: 0, y: 0 });
 
-  let adultMode = false;
-  let currentChart = null;
-  let diceRoll = null;
+	function generateChart() {
+		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
+		const availableYAxes = adultMode ? yAxes : yAxes.filter((axis) => !axis.adult);
 
-  function generateChart() {
-    const availableXAxes = adultMode ? xAxes : xAxes.filter(axis => !axis.adult);
-    const availableYAxes = adultMode ? yAxes : yAxes.filter(axis => !axis.adult);
-    
-    const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
-    const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
-    
-    currentChart = {
-      x: randomX.values,
-      y: randomY.values
-    };
-  }
+		const randomX = availableXAxes[Math.floor(Math.random() * availableXAxes.length)];
+		const randomY = availableYAxes[Math.floor(Math.random() * availableYAxes.length)];
 
-  function rollDice() {
-    diceRoll = {
-      x: Math.floor(Math.random() * 10) + 1,
-      y: Math.floor(Math.random() * 10) + 1
-    };
-  }
+		currentChart = {
+			x: randomX.values,
+			y: randomY.values
+		};
+	}
+
+	function rollDice() {
+		diceRoll = {
+			x: Math.floor(Math.random() * 10) + 1,
+			y: Math.floor(Math.random() * 10) + 1
+		};
+	}
 </script>
 
 <div class="container">
-  <div class="window">
-    <div class="title-bar">
-      <a href="/" class="home-button">← Home</a>
-      <span>On the Spectrum - Party Game</span>
-    </div>
-    
-    <div class="window-body">
-<!--       <fieldset>
-        <legend>Adult Mode (18+)</legend>
-        <Toggle bind:checked={adultMode} />
-      </fieldset> -->
+	<div class="window">
+		<fieldset>
+			<legend>Chart Generator</legend>
+			<ChartDisplay chart={currentChart} />
+			<div class="button-row">
+				<button onclick={generateChart}>Generate</button>
+			</div>
+		</fieldset>
 
-      <fieldset>
-        <legend>Chart Generator</legend>
-        <ChartDisplay chart={currentChart} />
-        <div class="button-row">
-          <button on:click={generateChart}>Generate</button>
-        </div>
-      </fieldset>
+		<fieldset>
+			<legend>Position Roller</legend>
+			<DiceRoller {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;
+	}
+
+	legend {
+		font-weight: bold;
+		padding: 0 0.5rem;
+	}
+
+	.button-row {
+		display: flex;
+		gap: 10px;
+		justify-content: center;
+		margin-top: 10px;
+	}
+
+	button {
+		padding: 0.5rem 1.75rem;
+		cursor: pointer;
+		font-weight: bold;
+	}
+</style>
 
-      <fieldset>
-        <legend>Position Roller</legend>
-        <DiceRoller roll={diceRoll} />
-        <div class="button-row">
-          <button on:click={rollDice}>Roll Dice</button>
-        </div>
-      </fieldset>
-      
-      <fieldset>
-        <legend>Theme Selector</legend>
-        <ThemeSelector bind:currentTheme={$theme} />
-      </fieldset>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte
index de1330d..c3f49cc 100644
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@@ -1,187 +1,149 @@
 <script>
-  import { getContext } from 'svelte';
-  import ThemeSelector from '$lib/components/ThemeSelector.svelte';
+	import { getContext } from 'svelte';
+	import ThemeSelector from '$components/themeSelector.svelte';
 
-  const themeStore = getContext('theme');
-  let currentTheme = $themeStore;
-  
-  $: themeStore.set(currentTheme);
+	const themeStore = getContext('theme');
+	let currentTheme = $themeStore;
+
+	$: themeStore.set(currentTheme);
 </script>
 
-<div class="rules-wrapper">
-  <div class="rules-container">
-    <div class="window">
-      <div class="title-bar">
-        <a href="/" class="back-button">← Back</a>
-        <span>Rules</span>
-      </div>
-      
-      <div class="window-body">
-        <fieldset>
-          <legend>Theme Selector</legend>
-          <ThemeSelector bind:currentTheme />
-        </fieldset>
+<div class="window-body">
+	<fieldset>
+		<legend>Theme Selector</legend>
+		<ThemeSelector bind:currentTheme />
+	</fieldset>
 
-        <div class="rules-content">
-          <h1>How to Play</h1>
+	<div class="rules-content">
+		<h1>How to Play</h1>
 
-          <section>
-            <h2>Basic Gameplay</h2>
-            <ol>
-              <li><strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes</li>
-              <li><strong>Play:</strong>Have the clue-giver roll 2d10 with one d10 being X and the other d10 being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other players.</li>
-              <li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
-            </ol>
-          </section>
+		<section>
+			<h2>Basic Gameplay</h2>
+			<ol>
+				<li>
+					<strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes
+				</li>
+				<li>
+					<strong>Play:</strong>Have the clue-giver roll 2d10 with one d10 being X and the other d10
+					being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a
+					phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other
+					players.
+				</li>
+				<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
+			</ol>
+		</section>
 
-          <section>
-            <h2>Understanding the Scale</h2>
-            <p>Each axis uses a 1-10 scale:</p>
-            <ul>
-              <li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
-              <li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
-              <li><strong>5-6:</strong> Slightly prefer right/top</li>
-              <li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
-              <li><strong>9-10:</strong> Strongly aligned with right/top option</li>
-            </ul>
-          </section>
+		<section>
+			<h2>Understanding the Scale</h2>
+			<p>Each axis uses a 1-10 scale:</p>
+			<ul>
+				<li><strong>1-2:</strong> Strongly aligned with left/bottom option</li>
+				<li><strong>3-4:</strong> Prefer left/bottom, but not extremely</li>
+				<li><strong>5-6:</strong> Slightly prefer right/top</li>
+				<li><strong>7-8:</strong> Prefer right/top, but not extremely</li>
+				<li><strong>9-10:</strong> Strongly aligned with right/top option</li>
+			</ul>
+		</section>
 
-          <section>
-            <h2>Scoring (Optional)</h2>
-            <p>Want to make it competitive? Try these scoring systems:</p>
-            <ul>
-              <li><strong>5 Points:</strong> On the Spectrum!</li>
-              <li><strong>4 Points:</strong> 1 away</li>
-              <li><strong>3 Points:</strong> 2 away</li>
-              <li><strong>2 Points:</strong> 3 away</li>
-              <li><strong>1 Points:</strong> 4 away</li>
-              <li><strong>0 Points:</strong> 5+ away</li>
-            </ul>
-          </section>
+		<section>
+			<h2>Scoring (Optional)</h2>
+			<p>Want to make it competitive? Try these scoring systems:</p>
+			<ul>
+				<li><strong>5 Points:</strong> On the Spectrum!</li>
+				<li><strong>4 Points:</strong> 1 away</li>
+				<li><strong>3 Points:</strong> 2 away</li>
+				<li><strong>2 Points:</strong> 3 away</li>
+				<li><strong>1 Points:</strong> 4 away</li>
+				<li><strong>0 Points:</strong> 5+ away</li>
+			</ul>
+		</section>
 
-          <section>
-            <h2>About Themes</h2>
-            <p>Choose from six visual themes to customize your experience:</p>
-            <ul>
-              <li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
-              <li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
-              <li><strong>Typewriter:</strong> Classic vintage paper look</li>
-              <li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
-              <li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
-              <li><strong>Nintendo:</strong> Bold and playful gaming style</li>
-            </ul>
-            <p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
-          </section>
+		<section>
+			<h2>About Themes</h2>
+			<p>Choose from six visual themes to customize your experience:</p>
+			<ul>
+				<li><strong>Windows 95:</strong> Nostalgic retro computing vibes</li>
+				<li><strong>Cyberpunk:</strong> Neon-soaked futuristic aesthetic</li>
+				<li><strong>Typewriter:</strong> Classic vintage paper look</li>
+				<li><strong>Nightmare:</strong> Dark and spooky atmosphere</li>
+				<li><strong>Vaporwave:</strong> Dreamy 80s-90s nostalgia</li>
+				<li><strong>Nintendo:</strong> Bold and playful gaming style</li>
+			</ul>
+			<p>Themes are purely cosmetic—pick what speaks to your vibe!</p>
+		</section>
 
-          <section>
-            <h2>FAQ</h2>
-            <p><strong>Can I play solo?</strong><br>
-            While designed for groups, you can use it for self-reflection or to prep for game night!</p>
-            
-            <p><strong>How many spectrums are there?</strong><br>
-            Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.</p>
-            
-            <p><strong>What if I'm perfectly neutral?</strong><br>
-            Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!</p>
-            
-            <p><strong>Can we make our own rules?</strong><br>
-            Absolutely! These are guidelines. House rules are encouraged!</p>
-          </section>
-        </div>
-      </div>
-    </div>
-  </div>
+		<section>
+			<h2>FAQ</h2>
+			<p>
+				<strong>Can I play solo?</strong><br />
+				While designed for groups, you can use it for self-reflection or to prep for game night!
+			</p>
+
+			<p>
+				<strong>How many spectrums are there?</strong><br />
+				Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.
+			</p>
+
+			<p>
+				<strong>What if I'm perfectly neutral?</strong><br />
+				Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!
+			</p>
+
+			<p>
+				<strong>Can we make our own rules?</strong><br />
+				Absolutely! These are guidelines. House rules are encouraged!
+			</p>
+		</section>
+	</div>
 </div>
 
 <style>
-  .rules-wrapper {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 40px 20px;
-  }
+	.rules-content {
+		padding: 20px 0;
+	}
 
-  .rules-container {
-    width: 100%;
-    max-width: 900px;
-  }
+	h1 {
+		font-size: 2.5rem;
+		margin-bottom: 30px;
+		text-align: center;
+	}
 
-  .title-bar {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
+	h2 {
+		font-size: 1.8rem;
+		margin-top: 30px;
+		margin-bottom: 15px;
+	}
 
-  .back-button {
-    padding: 5px 15px;
-    cursor: pointer;
-    border-radius: 4px;
-    text-decoration: none;
-    color: inherit;
-    font-weight: bold;
-    transition: all 0.2s;
-  }
+	section {
+		margin-bottom: 30px;
+	}
 
-  .rules-content {
-    padding: 20px 0;
-  }
+	p {
+		line-height: 1.6;
+		margin-bottom: 10px;
+	}
 
-  h1 {
-    font-size: 2.5rem;
-    margin-bottom: 30px;
-    text-align: center;
-  }
+	ol,
+	ul {
+		line-height: 1.8;
+		padding-left: 25px;
+	}
 
-  h2 {
-    font-size: 1.8rem;
-    margin-top: 30px;
-    margin-bottom: 15px;
-  }
+	li {
+		margin-bottom: 10px;
+	}
 
-  h3 {
-    font-size: 1.3rem;
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
+	strong {
+		font-weight: bold;
+	}
 
-  section {
-    margin-bottom: 30px;
-  }
+	@media (max-width: 768px) {
+		h1 {
+			font-size: 2rem;
+		}
 
-  p {
-    line-height: 1.6;
-    margin-bottom: 10px;
-  }
-
-  ol, ul {
-    line-height: 1.8;
-    padding-left: 25px;
-  }
-
-  li {
-    margin-bottom: 10px;
-  }
-
-  strong {
-    font-weight: bold;
-  }
-
-  em {
-    font-style: italic;
-  }
-
-  @media (max-width: 768px) {
-    .rules-wrapper {
-      padding: 20px;
-    }
-
-    h1 {
-      font-size: 2rem;
-    }
-
-    h2 {
-      font-size: 1.5rem;
-    }
-  }
-</style>
\ No newline at end of file
+		h2 {
+			font-size: 1.5rem;
+		}
+	}
+</style>