Increase separation between input elements and reduce their width

index.html

@@ -30,7 +30,7 @@ <h1>Simulate Compound Growth With Volatility</h1>
             <label for="timeHorizon">Time horizon (years): <span id="timeHorizonValue">10</span></label>
             <input type="range" id="timeHorizon" name="timeHorizon" min="1" max="40" value="15" step="1" oninput="updateSliderValue('timeHorizon', 'timeHorizonValue')">
             <label for="monteCarloSimulations">Number of Monte Carlo simulations:</label>
-            <input type="number" id="monteCarloSimulations" name="monteCarloSimulations" value="5000" min="1000" step="1000">
+            <input type="number" id="monteCarloSimulations" name="monteCarloSimulations" value="7000" min="1000" step="1000">
             <button id="runSimulations" onclick="runSimulations()">Run simulations</button>
 
             <p>Monte Carlo simulations are a way to predict the outcome of a scenario that has a significant degree of uncertainty. By running thousands of simulations, each with random variations based on your inputted volatility, the tool can model a vast range of possible investment paths. However, to keep the graph clear and easy to interpret, only ten representative trajectories are displayed—each one corresponding to a different percentile of the final investment distribution. This approach gives you a snapshot of potential outcomes, from the lower end (what you might end up with in less favorable conditions) to the higher end (the outcome if things go exceptionally well).</p>

styles.css

@@ -5,16 +5,34 @@
     display: flex; /* Added this line to enable Flexbox layout */
     flex-direction: column; /* Stack children vertically on small screens */
 }
-.content,
+
 #simulationResult {
     width: 100%;
 }
-.content input[type="number"],
+
+.content {
+    width: 100%; 
+    display: flex; /* Added this line to enable Flexbox layout */
+    flex-direction: column; /* Stack children vertically */
+}
+
+.content input[type="number"] {
+    width: 20%; 
+    margin-bottom: 30px; /* Increase vertical separation */
+}
+
 .content input[type="range"],
 .content button {
-    width: 50%; /* Set the width of inputs and button to 50% */
-    margin-bottom: 20px; /* Increase vertical separation */
+    width: 40%; 
+    margin-bottom: 30px; /* Increase vertical separation */
+}
+
+#runSimulations {
+    padding: 15px 30px; /* Increase padding to make the button larger */
+    font-size: 20px; /* Increase font size for better visibility */
+    cursor: pointer; /* Change cursor to pointer to indicate it's clickable */
 }
+
 /* Styles for desktop devices */
 @media (min-width: 768px) {
     .container {