World Simulation update.

css/main.scss

@@ -110,8 +110,12 @@ html {
 #canopy{
     height: 5px;
 }
-#programming-gibberish{
+#programming-gibberish, .programming-old, #programming-title{
     height: 0.8rem!important;
     font-size: 0.8rem;
     color: white;
+}
+#programming-title {
+    color: #ffffff44;
+    margin-bottom: 3rem!important;
 }

index.html

@@ -609,6 +609,50 @@ <h4 class="category-title text-center">0 Karma</h4>
 					</div>
 				</div>
 		</div>
+		<div class="category container-xl text-center mt-2 px-0 py-2 rounded d-none after-karma" data-reveals="changed-world, high-profile, impactful, average, uneventful">
+			<div class= "category-header category-bg rounded-top mb-0 py-1 px-4">
+                <h1 class="category-title pt-2 px-5">Body Selection</h2>
+                <span class="text-white fs-5">Now that you've chosen your world it is time to decide upon the vessel that will carry your soul. What kind of body you wish to inhabit.</span>
+            </div>
+				<div class="container-xl category-bg shadow-lg rounded p-4">
+					<div class="row row-cols-3 justify-content-center g-2">
+						<div class="col">
+							<div class="card choice" id="design-body" data-karma="0">
+								<div class="card-header card-img-overlay">
+									<h2 class="category-title text-center">Design Your Body</h2>
+									<h4 class="category-title text-center">0 Karma</h4>
+								</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
+								<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>Should you wish to craft your own form, you may design your new body to your liking. Choose your appearance, your physical attributes, and any unique features you desire. This is a rare opportunity to create the perfect vessel for your journey ahead. But remember, the more extraordinary your design, the higher the Karma cost.</span></div>
+							</div>
+						</div>
+						<div class="col">
+							<div class="card choice" id="old-body" data-karma="0">
+								<div class="card-header card-img-overlay">
+									<h2 class="category-title text-center">Old Body</h2>
+									<h4 class="category-title text-center">0 Karma</h4>
+								</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
+								<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>Alternatively, you may choose to retain the body you once had. This option allows you to continue your journey with a familiar form, though it may also carry the burdens and limitations of your previous life. The choice is yours: embrace the comfort of the familiar or seek a fresh start.</span></div>
+							</div>
+						</div>
+						<div class="col">
+							<div class="card choice" id="random-body" data-karma="-5">
+								<div class="card-header card-img-overlay">
+									<h2 class="category-title text-center">Random Body</h2>
+									<h4 class="category-title text-center">0 Karma</h4>
+								</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
+								<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>Lastly, you may choose to leave your new body to fate, just as most people who are born into the world. Your appearance, physical traits, and other attributes will be determined by chance. This option is the most unpredictable, yet it is also the most authentic, mirroring the natural process of birth.</span></div>
+							</div>
+						</div>
+					</div>
+				</div>
+		</div>
+
+
+		<!-- Footbar Here -->
+		<div class="footer text-start fixed-bottom justify-content-start m-1 programming-old"></div>
+		<div class="footer text-start fixed-bottom justify-content-start m-1 programming-old"></div>
+		<div class="footer text-start fixed-bottom justify-content-start m-1 programming-old"></div>
+		<div class="footer text-start fixed-bottom justify-content-start m-1 programming-old"></div>
 		<div class="footer text-start fixed-bottom justify-content-start m-1" id="programming-gibberish">Universe Sim v1.23643</div>
 		<div class="footer mx-5 g-2 row fixed-bottom justify-content-center" id="pointBar">
 			<div class="col-2 text-center text-white fs-5 d-none" data-reveals="changed-world, high-profile, impactful, average, uneventful"><span id="karma">Karma: 0</span></div>

js/main.js

@@ -223,4 +223,13 @@ const setChoice = (element) => {
 	}
 
 	hideHandler();
-}
+}
+const programming = document.getElementsByClassName('programming-old');
+let margin = 1.2;
+let color = 0xffffffaa;
+for (let i = 0; i < programming.length; i++) {
+	programming[i].style= `margin-bottom: ${margin}rem !important; color: #${color.toString(16)} !important`;
+	margin += 0.9;
+	color -= 0x33;
+	console.log(margin, color);
+  }