Commit 788c343

@@ -11,7 +11,7 @@ body{
   #scope {
     height: 300px;
     width: 300px;
-    border: solid 0.5px rgb(212, 175, 55);
+    border: solid 0.5px var(--lightGold);
     position: absolute;
     cursor: grab;
     left: 0px;

@@ -20,25 +20,25 @@
             <h2>002.TOTP</h2>
             <p class="modal__p">
             <ul>
-                <li style="margin-bottom:10px">
-                    TOTP works by taking a <span style="color:rgb(212, 175, 55)">secret</span> and a <span
-                        style="color:rgb(212, 175, 55)">timestamp</span> and hashing them together.
+                <li>
+                    TOTP works by taking a <span style="color:var(--lightGold)">secret</span> and a <span
+                        style="color:var(--lightGold)">timestamp</span> and hashing them together.
                 </li>
-                <li style="margin-bottom:10px">
-                    The <span style="color:rgb(212, 175, 55)">hash</span> is then truncated to a certain number of
+                <li>
+                    The <span style="color:var(--lightGold)">hash</span> is then truncated to a certain number of
                     digits.
                 </li>
-                <li style="margin-bottom:10px">
-                    The digits are then used to generate a <span style="color:rgb(212, 175, 55)">one-time
+                <li>
+                    The digits are then used to generate a <span style="color:var(--lightGold)">one-time
                         password</span>.
                 </li>
-                <li style="margin-bottom:10px">
-                    The <span style="color:rgb(212, 175, 55)">period</span> is the time in seconds that the <span
-                        style="color:rgb(212, 175, 55)">one-time password</span> is valid.
+                <li>
+                    The <span style="color:var(--lightGold)">period</span> is the time in seconds that the <span
+                        style="color:var(--lightGold)">one-time password</span> is valid.
                 </li>
                 <li>
                     Refer: <a href="https://tools.ietf.org/html/rfc6238" target="_blank"
-                        style="color:rgb(212, 175, 55)">RFC
+                        style="color:var(--lightGold)">RFC
                         6238</a>.
                 </li>
             </ul>

@@ -23,15 +23,15 @@
             <h2>003.3n+1</h2>
             <p class="modal__p">
             <ul>
-                <li style="margin-bottom:10px">The <span style="color:#d4af37">Collatz Conjecture</span>, also known as
+                <li>The <span style="color:var(--lightGold)">Collatz Conjecture</span>, also known as
                     the 3n+1 problem or the hailstone sequence.</li>
-                <li style="margin-bottom:10px">It is a mathematical conjecture that concerns a sequence of numbers.</li>
-                <li style="margin-bottom:10px">The conjecture states that if you take any positive integer, and <span
-                        style="color:#d4af37">divide it by 2 </span>if it is even.</li>
-                <li style="margin-bottom:10px">
-                    <span style="color:#d4af37">Multiply it by 3 and add 1 </span> if it is odd.
+                <li>It is a mathematical conjecture that concerns a sequence of numbers.</li>
+                <li>The conjecture states that if you take any positive integer, and <span
+                        style="color:var(--lightGold)">divide it by 2 </span>if it is even.</li>
+                <li>
+                    <span style="color:var(--lightGold)">Multiply it by 3 and add 1 </span> if it is odd.
                 <li>Repeat this process with the resulting number, and
-                    <span style="color:#d4af37">eventually you reach the number 1</span>.
+                    <span style="color:var(--lightGold)">eventually you reach the number 1</span>.
                 </li>
             </ul>
             </p>
@@ -44,7 +44,7 @@
         Enter a positive integer
     </label>
     <input type="number" id="n" value="50">
-    <p>Number of steps: <span id="steps" style="color:#d4af37">0</span></p>
+    <p>Number of steps: <span id="steps" style="color:var(--gold)">0</span></p>
     <div class="chart-container">
         <canvas id="chart"></canvas>
     </div>

@@ -6,6 +6,11 @@
     padding:0;
   }
 
+:root{
+  --lightGold: #d4af37;
+  --gold: rgb(250 204 21);
+}
+
 body{
     display: flex;
     flex-direction: column;
@@ -18,6 +23,10 @@ body{
     align-items: center;
 }
 
+li:not(:last-child) {
+  margin-bottom: 10px;
+}
+
 input {
     margin: 10px;
     padding:5px;
@@ -159,6 +168,7 @@ input::-webkit-inner-spin-button {
     left: 0;
     height: fit-content;
     width: 20%;
+    min-width: 300px;
     margin: auto;
     overflow: auto;
     background: black;