updated layout of doc index

docs/index.md

@@ -5,29 +5,28 @@ Visit one of the links below, or read the full documentation.
 
 <div style="display: flex; flex-wrap: wrap; gap: 10px;" markdown="span">
 
+<div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px;" markdown="span">
+
   <a href="quickstart/" style="border: 1px solid black; padding: 10px; flex: 1; text-align: center;" markdown="span">
-    <span style="font-size: 250%"> :rocket: </span><br>**Quickstart**<br> New to the library? Start here.
+    **Quickstart**<br><span style="font-size: 100%"> :rocket: </span><br> New to the library? Start here.
   </a>
 
   <a href="basics/forks/" style="border: 1px solid black; padding: 10px; flex: 1; text-align: center;" markdown="span">
-    <span style="font-size: 250%"> :flags: </span> <br><b>Sensitive attribute forks</b> <br>Options for creating forks from data.
+    <b>Sensitive attribute forks</b> <br><span style="font-size: 100%"> :flags: </span> <br>Options for creating forks from data.
   </a>
 
   <a href="record/comparisons/" style="border: 1px solid black; padding: 10px; flex: 1; text-align: center;" markdown="span">
-    <span style="font-size: 250%"> :hammer_and_wrench: </span> <br><b>Metric comparisons</b> <br>What fairness report entries mean.
+    <b>Metric comparisons</b> <br><span style="font-size: 100%"> :hammer_and_wrench: </span> <br>What fairness report entries mean.
   </a>
 
 </div>
 
 <br>
 
-## Video tutorial
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/vJIK3Kc65pA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
-
-
-## How to cite
+</div>
 
 ```
 @article{krasanakis2024standardizing,