From 2955c13d0d28938e39945698beb80fe2248fbdf7 Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Sun, 22 May 2022 20:36:03 +0700
Subject: [PATCH 1/2] fix: re-align rows and cols correctly

---
 builder/index.html | 2166 ++++++++++++++++++++++----------------------
 1 file changed, 1084 insertions(+), 1082 deletions(-)

diff --git a/builder/index.html b/builder/index.html
index 5a2ad07..5548a6c 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -49,1168 +49,1166 @@
         <a onclick = "toggleIcons()"><img src = "../media/icons/new/reload.png" alt = "" title = "Swap items on page"><b>Swap Icon Style</b></a>
         <hr/>
     </div>
-    <div class="my-container">
-        <div class="col">
-            <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-0">
-                <div class="col-xl-6">
-                    <div class="row row-cols-1 mb-3">
-                        <div class="col py-3">
-                            <div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center">
-                                <div class="col-auto rounded order-xl-0 order-0">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
-                                            <img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="helmet-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="helmet-lv">
-                                                    0
-                                                </div>
+    <div class="container-fluid me-4" style="max-width: 95%;">
+        <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3">
+            <div class="col-xl-6">
+                <div class="row row-cols-1 mb-3">
+                    <div class="col">
+                        <div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center">
+                            <div class="col-auto rounded order-xl-0 order-0">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="helmet-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="helmet-img-loc">
+                                        <img id="helmet-img" class="img-fluid rounded" src="../media/items/new/generic-helmet.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="helmet-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="helmet-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="helmet-choice" name="helmet-choice" placeholder="No Helmet" value="" tabindex="1"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" type="text" id="helmet-powder" name="helmet-powder" placeholder="powders" tabindex="1"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-1">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
-                                            <img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring1-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring1-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-1">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="ring1-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring1-img-loc">
+                                        <img id="ring1-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring1-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring1-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end" style="height: 100%;">
-                                                    <!-- <input class="equipment-input text-light form-control" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="ring1-choice" name="ring1-choice" placeholder="No ring" value="" tabindex="2"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end" style="height: 100%;">
+                                                <!-- <input class="equipment-input text-light form-control" type="text" id="ring1-powder" name="ring1-powder" placeholder="no powders" tabindex="2"/> -->
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-0">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
-                                            <img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="chestplate-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="chestplate-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-0">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="chestplate-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="chestplate-img-loc">
+                                        <img id="chestplate-img" class="img-fluid rounded" src="../media/items/new/generic-chestplate.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="chestplate-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="chestplate-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="chestplate-choice" name="chestplate-choice" placeholder="No chestplate" value="" tabindex="1"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders" tabindex="1"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-1">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
-                                            <img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring2-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring2-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-1">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="ring2-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="ring2-img-loc">
+                                        <img id="ring2-img" class="img-fluid rounded" src="../media/items/new/generic-ring.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="ring2-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="ring2-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end" style="height: 100%;">
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="ring2-choice" name="ring2-choice" placeholder="No ring" value="" tabindex="2"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end" style="height: 100%;">
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-0">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
-                                            <img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="leggings-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="leggings-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-0">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="leggings-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="leggings-img-loc">
+                                        <img id="leggings-img" class="img-fluid rounded" src="../media/items/new/generic-leggings.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="leggings-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="leggings-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/>
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="leggings-choice" name="leggings-choice" placeholder="No leggings" value="" tabindex="1"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders" tabindex="1"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-1">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
-                                            <img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="bracelet-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="bracelet-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-1">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="bracelet-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="bracelet-img-loc">
+                                        <img id="bracelet-img" class="img-fluid rounded" src="../media/items/new/generic-bracelet.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="bracelet-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="bracelet-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end" style="height: 100%;">
-                                                    
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="bracelet-choice" name="bracelet-choice" placeholder="No bracelet" value="" tabindex="2"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end" style="height: 100%;">
+                                                
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-0">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
-                                            <img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="boots-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="boots-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-0">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="boots-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="boots-img-loc">
+                                        <img id="boots-img" class="img-fluid rounded" src="../media/items/new/generic-boots.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="boots-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="boots-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="boots-choice" name="boots-choice" placeholder="No boots" value="" tabindex="1"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" type="text" id="boots-powder" name="boots-powder" placeholder="powders" tabindex="1"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-1">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
-                                            <img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="necklace-health">
-                                                    0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="necklace-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-1">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id="necklace-dropdown">
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="necklace-img-loc">
+                                        <img id="necklace-img" class="img-fluid rounded" src="../media/items/new/generic-necklace.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col text-nowrap scaled-font Health fw-bold gx-3" id="necklace-health">
+                                                0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="necklace-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end" style="height: 100%;">
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="necklace-choice" name="necklace-choice" placeholder="No necklace" value="" tabindex="2"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end" style="height: 100%;">
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-1">
-                                    <div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
-                                        <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
-                                            <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-wand.png">
-                                        </div>
-                                        <div class="col-3">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col scaled-font fw-bold gx-3" id="weapon-dps">
-                                                    base dps: 0
-                                                </div>
-                                                <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv">
-                                                    0
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-1">
+                                <div class="row h-100 dark-shadow dark-6 rounded" id='weapon-dropdown'>
+                                    <div class="col-auto px-lg-1 g-0 dark-7 rounded-end my-auto text-center scaled-item-icon" id="weapon-img-loc">
+                                        <img id="weapon-img" class="img-fluid rounded" src="../media/items/new/generic-wand.png">
+                                    </div>
+                                    <div class="col-3">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col scaled-font fw-bold gx-3" id="weapon-dps">
+                                                base dps: 0
+                                            </div>
+                                            <div class="col text-nowrap scaled-font lvl fw-bold gx-3" id="weapon-lv">
+                                                0
                                             </div>
                                         </div>
-                                        <div class="col g-0 rounded">
-                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
-                                                </div>
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
-                                                </div>
+                                    </div>
+                                    <div class="col g-0 rounded">
+                                        <div class="row row-cols-1 h-100 align-items-center">
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" id="weapon-choice" name="weapon-choice" placeholder="No Weapon" value="" tabindex="2"/>
+                                            </div>
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control" type="text" id="weapon-powder" name="weapon-powder" placeholder="powders" tabindex="2"/>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col-auto order-xl-0 order-1">
-                                    <div class="row h-100 dark-shadow dark-6 rounded">
-                                        <div class="col">
-                                            <div class="row align-items-center">
-                                                <div class="col-3 text-nowrap fw-bold scaled-font">
-                                                    Level:
-                                                </div>
-                                                <div class="col d-flex justify-content-end">
-                                                    <input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
-                                                </div>
-                                                <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="button fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="sq2ResetFields()">Reset</button>
-                                                </div>
+                            </div>
+                            <div class="col-auto order-xl-0 order-1">
+                                <div class="row h-100 dark-shadow dark-6 rounded">
+                                    <div class="col">
+                                        <div class="row align-items-center">
+                                            <div class="col-3 text-nowrap fw-bold scaled-font">
+                                                Level:
                                             </div>
-                                            <div class="row align-items-center justify-content-center my-1">
-                                                <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="button fw-bold text-light dark-5 scaled-font rounded" id="copy-button" onclick="copyBuild()">Copy short</button>
-                                                </div>
-                                                <div class="col-auto px-1 text-nowrap scaled-font">
-                                                    <button class="button fw-bold text-light dark-5 scaled-font rounded" id="share-button" onclick="shareBuild()">Copy for sharing</button>
-                                                </div>
+                                            <div class="col d-flex justify-content-end">
+                                                <input class="equipment-input text-light form-control form-control-sm" id="level-choice" name="level-choice" value="106" placeholder="Build level" value="" tabindex="2"/>
+                                            </div>
+                                            <div class="col-auto px-1 text-nowrap scaled-font">
+                                                <button class="button fw-bold text-light dark-5 scaled-font rounded" id="reset-button" onclick="sq2ResetFields()">Reset</button>
+                                            </div>
+                                        </div>
+                                        <div class="row align-items-center justify-content-center my-1">
+                                            <div class="col-auto px-1 text-nowrap scaled-font">
+                                                <button class="button fw-bold text-light dark-5 scaled-font rounded" id="copy-button" onclick="copyBuild()">Copy short</button>
+                                            </div>
+                                            <div class="col-auto px-1 text-nowrap scaled-font">
+                                                <button class="button fw-bold text-light dark-5 scaled-font rounded" id="share-button" onclick="shareBuild()">Copy for sharing</button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <div class="col py-3">
-                            <div class="row row-cols-1 gy-2 rounded dark-5 dark-shadow">
-                                <div class="col">
-                                    <div class="row row-cols-2 row-cols-xl-5 gy-2 justify-content-center">
-                                        <div class="col text-center gx-2">
-                                            <div class="rounded dark-6 dark-shadow-sm px-2">
-                                                <label for="str-skp" class="eDam skp-tooltip">Strength</label>
-                                                <input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                <div id="str-skp-assign" class="skp-tooltip">
-                                                    Assign: 0
-                                                </div>
-                                                <div id="str-skp-base" class="skp-tooltip">
-                                                    Original: 0
-                                                </div>
-                                                <div id="str-skp-pct" class="skp-tooltip">
-                                                </div>
+                    </div>
+                    <div class="col py-3">
+                        <div class="row row-cols-1 gy-2 rounded dark-5 dark-shadow">
+                            <div class="col">
+                                <div class="row row-cols-2 row-cols-xl-5 gy-2 justify-content-center">
+                                    <div class="col text-center gx-2">
+                                        <div class="rounded dark-6 dark-shadow-sm px-2">
+                                            <label for="str-skp" class="eDam skp-tooltip">Strength</label>
+                                            <input type="string" id="str-skp" name="str-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
+                                            <div id="str-skp-assign" class="skp-tooltip">
+                                                Assign: 0
                                             </div>
-                                        </div>
-                                        <div class="col text-center gx-2">
-                                            <div class="rounded dark-6 dark-shadow-sm px-2">
-                                                <label for="dex-skp" class="tDam skp-tooltip">Dexterity</label>
-                                                <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                <div id="dex-skp-assign" class="skp-tooltip">
-                                                    Assign: 0
-                                                </div>
-                                                <div id="dex-skp-base" class="skp-tooltip">
-                                                    Original: 0
-                                                </div>
-                                                <div id ="dex-skp-pct" class="skp-tooltip">
-                                                </div>
+                                            <div id="str-skp-base" class="skp-tooltip">
+                                                Original: 0
                                             </div>
-                                        </div>
-                                        <div class="col text-center gx-2">
-                                            <div class="rounded dark-6 dark-shadow-sm px-2">
-                                                <label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label>
-                                                <input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                <div id="int-skp-assign" class="skp-tooltip">
-                                                    Assign: 0
-                                                </div>
-                                                <div id="int-skp-base" class="skp-tooltip">
-                                                    Original: 0
-                                                </div>
-                                                <div id ="int-skp-pct" class="skp-tooltip">
-                                                </div>
+                                            <div id="str-skp-pct" class="skp-tooltip">
                                             </div>
                                         </div>
-                                        <div class="col text-center gx-2">
-                                            <div class="rounded dark-6 dark-shadow-sm px-2">
-                                                <label for="def-skp" class="fDam skp-tooltip">Defense</label>
-                                                <input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                <div id="def-skp-assign" class="skp-tooltip">
-                                                    Assign: 0
-                                                </div>
-                                                <div id="def-skp-base" class="skp-tooltip">
-                                                    Original: 0
-                                                </div>
-                                                <div id ="def-skp-pct" class="skp-tooltip">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col text-center gx-2">
-                                            <div class="rounded dark-6 dark-shadow-sm px-2">
-                                                <label for="agi-skp" class="aDam skp-tooltip">Agility</label>
-                                                <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
-                                                <div id="agi-skp-assign" class="skp-tooltip">
-                                                    Assign: 0
-                                                </div>
-                                                <div id="agi-skp-base" class="skp-tooltip">
-                                                    Original: 0
-                                                </div>
-                                                <div id ="agi-skp-pct" class="skp-tooltip">
-                                                </div>
-                                            </div>
-                                        </div>
-                                        <div class="col-12 text-center gx-2">
-                                            <button class = "button fw-bold text-light dark-5 rounded scaled-font" id = "optimize-strdex" onclick = "optimizeStrDex()">Optimize Str/Dex</button>
-                                        </div>
                                     </div>
-                                </div>
-                                <div class="col text-center">
-                                    <div id="summary-box"></div>
-                                    <div id="str-warnings"></div>
-                                    <div id="dex-warnings"></div>
-                                    <div id="int-warnings"></div>
-                                    <div id="def-warnings"></div>
-                                    <div id="agi-warnings"></div>
+                                    <div class="col text-center gx-2">
+                                        <div class="rounded dark-6 dark-shadow-sm px-2">
+                                            <label for="dex-skp" class="tDam skp-tooltip">Dexterity</label>
+                                            <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
+                                            <div id="dex-skp-assign" class="skp-tooltip">
+                                                Assign: 0
+                                            </div>
+                                            <div id="dex-skp-base" class="skp-tooltip">
+                                                Original: 0
+                                            </div>
+                                            <div id ="dex-skp-pct" class="skp-tooltip">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col text-center gx-2">
+                                        <div class="rounded dark-6 dark-shadow-sm px-2">
+                                            <label for="int-skp" class="wDam skp-tooltip text-nowrap">Intelligence</label>
+                                            <input type="string" id="int-skp" name="int-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
+                                            <div id="int-skp-assign" class="skp-tooltip">
+                                                Assign: 0
+                                            </div>
+                                            <div id="int-skp-base" class="skp-tooltip">
+                                                Original: 0
+                                            </div>
+                                            <div id ="int-skp-pct" class="skp-tooltip">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col text-center gx-2">
+                                        <div class="rounded dark-6 dark-shadow-sm px-2">
+                                            <label for="def-skp" class="fDam skp-tooltip">Defense</label>
+                                            <input type="string" id="def-skp" name="def-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
+                                            <div id="def-skp-assign" class="skp-tooltip">
+                                                Assign: 0
+                                            </div>
+                                            <div id="def-skp-base" class="skp-tooltip">
+                                                Original: 0
+                                            </div>
+                                            <div id ="def-skp-pct" class="skp-tooltip">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col text-center gx-2">
+                                        <div class="rounded dark-6 dark-shadow-sm px-2">
+                                            <label for="agi-skp" class="aDam skp-tooltip">Agility</label>
+                                            <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-update skp-tooltip border-dark dark-7 text-light text-center rounded" tabindex="2"/>
+                                            <div id="agi-skp-assign" class="skp-tooltip">
+                                                Assign: 0
+                                            </div>
+                                            <div id="agi-skp-base" class="skp-tooltip">
+                                                Original: 0
+                                            </div>
+                                            <div id ="agi-skp-pct" class="skp-tooltip">
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col-12 text-center gx-2">
+                                        <button class = "button fw-bold text-light dark-5 rounded scaled-font" id = "optimize-strdex" onclick = "optimizeStrDex()">Optimize Str/Dex</button>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="col text-center">
+                                <div id="summary-box"></div>
+                                <div id="str-warnings"></div>
+                                <div id="dex-warnings"></div>
+                                <div id="int-warnings"></div>
+                                <div id="def-warnings"></div>
+                                <div id="agi-warnings"></div>
+                            </div>
                         </div>
-                        <div class="col mb-5">
-                            <div class="row row-cols-1 gy-3">
-                                <div class="col mb-1">
-                                    <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
-                                        <div class="col fw-bold dark-4 rounded-top">
-                                            <div class = "row">
-                                                <div class = "col-4 py-2">
-                                                    <button class = "col-auto button rounded scaled-font fw-bold text-light dark-5" id = "toggle-tomes" onclick = "toggle_tab('tomes-dropdown'); toggleButton('toggle-tomes')">
-                                                        Show Tomes
-                                                    </button>
-                                                </div>
-                                                <div class = "col-4 py-2">
-                                                    <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "toggle_tab('edit_id_tab'); toggleButton('edit-ID-button')">
-                                                        Edit IDs
-                                                    </button>
-                                                </div>
-                                                <div class = "col-4 py-2">
-                                                    <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "resetEditableIDs(); updateStats();">
-                                                        Reset Edited IDs
-                                                    </button>
-                                                </div>
+                    </div>
+                    <div class="col mb-5">
+                        <div class="row row-cols-1 gy-3">
+                            <div class="col mb-1">
+                                <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
+                                    <div class="col fw-bold dark-4 rounded-top">
+                                        <div class = "row">
+                                            <div class = "col-4 py-2">
+                                                <button class = "col-auto button rounded scaled-font fw-bold text-light dark-5" id = "toggle-tomes" onclick = "toggle_tab('tomes-dropdown'); toggleButton('toggle-tomes')">
+                                                    Show Tomes
+                                                </button>
+                                            </div>
+                                            <div class = "col-4 py-2">
+                                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "toggle_tab('edit_id_tab'); toggleButton('edit-ID-button')">
+                                                    Edit IDs
+                                                </button>
+                                            </div>
+                                            <div class = "col-4 py-2">
+                                                <button class = "button rounded scaled-font fw-bold text-light dark-5" id = "edit-ID-button" onclick = "resetEditableIDs(); updateStats();">
+                                                    Reset Edited IDs
+                                                </button>
                                             </div>
                                         </div>
-                                        <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "tomes-dropdown" style = "display: none;">
-                                            <div class="row h-100 row-cols-1 row-cols-xl-2 gy-2 rounded">
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='weaponTome1-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome1-img-loc">
-                                                            <img id="weaponTome1-img" class="img-fluid rounded" src="../media/items/new/generic-weaponTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Weapon
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                    </div>
+                                    <div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "tomes-dropdown" style = "display: none;">
+                                        <div class="row h-100 row-cols-1 row-cols-xl-2 gy-2 rounded">
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='weaponTome1-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome1-img-loc">
+                                                        <img id="weaponTome1-img" class="img-fluid rounded" src="../media/items/new/generic-weaponTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Weapon
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome1-choice" name="weaponTome1-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome1-choice" name="weaponTome1-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='weaponTome2-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome2-img-loc">
-                                                            <img id="weaponTome2-img" class="img-fluid rounded" src="../media/items/new/generic-weaponTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Weapon
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                            </div>
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='weaponTome2-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="weaponTome2-img-loc">
+                                                        <img id="weaponTome2-img" class="img-fluid rounded" src="../media/items/new/generic-weaponTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Weapon
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome2-choice" name="weaponTome2-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="weaponTome2-choice" name="weaponTome2-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='armorTome1-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome1-img-loc">
-                                                            <img id="armorTome1-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Armor
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                            </div>
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='armorTome1-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome1-img-loc">
+                                                        <img id="armorTome1-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Armor
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome1-choice" name="armorTome1-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome1-choice" name="armorTome1-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='armorTome2-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome2-img-loc">
-                                                            <img id="armorTome2-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Armor
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                            </div>
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='armorTome2-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome2-img-loc">
+                                                        <img id="armorTome2-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Armor
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome2-choice" name="armorTome2-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome2-choice" name="armorTome2-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='armorTome3-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome3-img-loc">
-                                                            <img id="armorTome3-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Armor
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                            </div>
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='armorTome3-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome3-img-loc">
+                                                        <img id="armorTome3-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Armor
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome3-choice" name="armorTome3-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome3-choice" name="armorTome3-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='armorTome4-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome4-img-loc">
-                                                            <img id="armorTome4-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Armor
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                            </div>
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='armorTome4-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="armorTome4-img-loc">
+                                                        <img id="armorTome4-img" class="img-fluid rounded" src="../media/items/new/generic-armorTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Armor
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome4-choice" name="armorTome4-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="armorTome4-choice" name="armorTome4-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
-                                                <div class="col-auto rounded">
-                                                    <div class="row h-100 dark-shadow rounded" id='guildTome1-dropdown'>
-                                                        <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="guildTome1-img-loc">
-                                                            <img id="guildTome1-img" class="img-fluid rounded" src="../media/items/new/generic-guildTome.png">
-                                                        </div>
-                                                        <div class="col-3">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Guild 
-                                                                </div>
-                                                                <div class="col scaled-font fw-bold gx-3">
-                                                                    Tome
-                                                                </div>
+                                            </div>
+                                            <div class="col-auto rounded">
+                                                <div class="row h-100 dark-shadow rounded" id='guildTome1-dropdown'>
+                                                    <div class="col-auto g-0 rounded-end my-auto text-center scaled-item-icon" id="guildTome1-img-loc">
+                                                        <img id="guildTome1-img" class="img-fluid rounded" src="../media/items/new/generic-guildTome.png">
+                                                    </div>
+                                                    <div class="col-3">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Guild 
+                                                            </div>
+                                                            <div class="col scaled-font fw-bold gx-3">
+                                                                Tome
                                                             </div>
                                                         </div>
-                                                        <div class="col g-0 rounded">
-                                                            <div class="row row-cols-1 h-100 align-items-center">
-                                                                <div class="col d-flex justify-content-end">
-                                                                    <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="guildTome1-choice" name="guildTome1-choice" placeholder="No Tome" value=""/>
-                                                                </div>
+                                                    </div>
+                                                    <div class="col g-0 rounded">
+                                                        <div class="row row-cols-1 h-100 align-items-center">
+                                                            <div class="col d-flex justify-content-end">
+                                                                <input class="equipment-input border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" id="guildTome1-choice" name="guildTome1-choice" placeholder="No Tome" value=""/>
                                                             </div>
                                                         </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col dark-6 rounded-bottom my-3 my-xl-1" id = "edit_id_tab" style = "display:none;">
-                                            <div class = "row big-title justify-content-center">
-                                                Damage Stats
-                                            </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Spell Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="sdPct" name="sdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "sdPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                    </div>
+                                    <div class="col dark-6 rounded-bottom my-3 my-xl-1" id = "edit_id_tab" style = "display:none;">
+                                        <div class = "row big-title justify-content-center">
+                                            Damage Stats
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Spell Damage %:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Spell Damage Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="sdRaw" name="sdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "sdRaw-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="sdPct" name="sdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Melee Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="mdPct" name="mdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "mdPct-base">
-                                                        Original Value: 0
-                                                    </div>
-                                                </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Melee Damage Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="mdRaw" name="mdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "mdRaw-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "sdPct-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Poison:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="poison" name="poison" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "poison-base">
-                                                        Original Value: 0
-                                                    </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Spell Damage Raw:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row eDam">
-                                                        Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="eDamPct" name="eDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "eDamPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="sdRaw" name="sdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row tDam">
-                                                        Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="tDamPct" name="tDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "tDamPct-base">
-                                                        Original Value: 0
-                                                    </div>
-                                                </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row wDam">
-                                                        Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="wDamPct" name="wDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "wDamPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "sdRaw-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row fDam">
-                                                        Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="fDamPct" name="fDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "fDamPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Melee Damage %:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row aDam">
-                                                        Damage %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="aDamPct" name="aDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "aDamPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="mdPct" name="mdPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        + Tier:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="atkTier" name="atkTier" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "atkTier-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "mdPct-base">
+                                                    Original Value: 0
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Melee Damage Raw:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="mdRaw" name="mdRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "mdRaw-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Poison:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="poison" name="poison" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "poison-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row eDam">
+                                                    Damage %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="eDamPct" name="eDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "eDamPct-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row tDam">
+                                                    Damage %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="tDamPct" name="tDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "tDamPct-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row wDam">
+                                                    Damage %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="wDamPct" name="wDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "wDamPct-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row fDam">
+                                                    Damage %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="fDamPct" name="fDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "fDamPct-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row aDam">
+                                                    Damage %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="aDamPct" name="aDamPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "aDamPct-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    + Tier:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="atkTier" name="atkTier" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "atkTier-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
 
+                                            </div>
+                                        </div>
+                                        <div class = "row big-title justify-content-center">
+                                            Defense Stats
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row Earth">
+                                                    Defense %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="eDefPct" name="eDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "eDefPct-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
-                                            <div class = "row big-title justify-content-center">
-                                                Defense Stats
-                                            </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row Earth">
-                                                        Defense %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="eDefPct" name="eDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "eDefPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row Thunder">
+                                                    Defense %:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row Thunder">
-                                                        Defense %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="tDefPct" name="tDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "tDefPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="tDefPct" name="tDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row Water">
-                                                        Defense %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="wDefPct" name="wDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "wDefPct-base">
-                                                        Original Value: 0
-                                                    </div>
-                                                </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row Fire">
-                                                        Defense %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="fDefPct" name="fDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "fDefPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "tDefPct-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row Air">
-                                                        Defense %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="aDefPct" name="aDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "aDefPct-base">
-                                                        Original Value: 0
-                                                    </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row Water">
+                                                    Defense %:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Health Regen Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="hprRaw" name="hprRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "hprRaw-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="wDefPct" name="wDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Health Regen %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="hprPct" name="hprPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "hprPct-base">
-                                                        Original Value: 0
-                                                    </div>
-                                                </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        Health Bonus:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="hpBonus" name="hpBonus" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "hpBonus-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "wDefPct-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
-                                            <div class = "row big-title justify-content-center">
-                                                Utility Stats
-                                            </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        1st Spell Cost %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct1" name="spPct1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spPct1-base">
-                                                        Original Value: 0
-                                                    </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row Fire">
+                                                    Defense %:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        2nd Spell Cost %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct2" name="spPct2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spPct2-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="fDefPct" name="fDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        3rd Spell Cost %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct3" name="spPct3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spPct3-base">
-                                                        Original Value: 0
-                                                    </div>
-                                                </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        4th Spell Cost %:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spPct4" name="spPct4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spPct4-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "fDefPct-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
-                                            <div class = "row px-1">
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        1st Spell Cost Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw1" name="spRaw1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spRaw1-base">
-                                                        Original Value: 0
-                                                    </div>
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row Air">
+                                                    Defense %:
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        2nd Spell Cost Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw2" name="spRaw2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spRaw2-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="aDefPct" name="aDefPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        3rd Spell Cost Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw3" name="spRaw3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spRaw3-base">
-                                                        Original Value: 0
-                                                    </div>
+                                                <div class = "row" id = "aDefPct-base">
+                                                    Original Value: 0
                                                 </div>
-                                                <div class = "col-lg-3 col-sm-6">
-                                                    <div class = "row">
-                                                        4th Spell Cost Raw:
-                                                    </div>
-                                                    <div class = "row">
-                                                        <input type = "number" placeholder = "0" id="spRaw4" name="spRaw4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
-                                                    </div>
-                                                    <div class = "row" id = "spRaw4-base">
-                                                        Original Value: 0
-                                                    </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Health Regen Raw:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="hprRaw" name="hprRaw" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "hprRaw-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Health Regen %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="hprPct" name="hprPct" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "hprPct-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    Health Bonus:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="hpBonus" name="hpBonus" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "hpBonus-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class = "row big-title justify-content-center">
+                                            Utility Stats
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    1st Spell Cost %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spPct1" name="spPct1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spPct1-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    2nd Spell Cost %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spPct2" name="spPct2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spPct2-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    3rd Spell Cost %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spPct3" name="spPct3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spPct3-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    4th Spell Cost %:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spPct4" name="spPct4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spPct4-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class = "row px-1">
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    1st Spell Cost Raw:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spRaw1" name="spRaw1" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spRaw1-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    2nd Spell Cost Raw:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spRaw2" name="spRaw2" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spRaw2-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    3rd Spell Cost Raw:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spRaw3" name="spRaw3" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spRaw3-base">
+                                                    Original Value: 0
+                                                </div>
+                                            </div>
+                                            <div class = "col-lg-3 col-sm-6">
+                                                <div class = "row">
+                                                    4th Spell Cost Raw:
+                                                </div>
+                                                <div class = "row">
+                                                    <input type = "number" placeholder = "0" id="spRaw4" name="spRaw4" value="0" class="border-dark text-light dark-10 rounded scaled-font form-control form-control-sm" oninput = "updateStats()"/>
+                                                </div>
+                                                <div class = "row" id = "spRaw4-base">
+                                                    Original Value: 0
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col mb-1">
-                                    <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
-                                        <div class="col fw-bold dark-4 rounded-top">
-                                            Active boosts
-                                        </div>
-                                        <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
-                                            <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
-                                                <div class="col-auto p-1">
-                                                    <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="updateBoosts('vanish-boost', true)">
-                                                        Vanish (+80%)
-                                                    </button>
-                                                </div>
-                                                <div class="col-auto p-1">
-                                                    <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="updateBoosts('warscream-boost', true)">
-                                                        War Scream (+10%)
-                                                    </button>
-                                                </div>
-                                                <div class="col-auto p-1">
-                                                    <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="updateBoosts('yourtotem-boost', true)">
-                                                        Your Totem (+35%)
-                                                    </button>
-                                                </div>
-                                                <div class="col-auto p-1">
-                                                    <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="updateBoosts('allytotem-boost', true)">
-                                                        Ally Totem (+15%)
-                                                    </button>
-                                                </div>
-                                                <div class="col-auto p-1">
-                                                    <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="updateBoosts('bash-boost', true)">
-                                                        Bash (+50%)
-                                                    </button>
-                                                </div>
+                            </div>
+                            <div class="col mb-1">
+                                <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
+                                    <div class="col fw-bold dark-4 rounded-top">
+                                        Active boosts
+                                    </div>
+                                    <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
+                                        <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
+                                            <div class="col-auto p-1">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="vanish-boost" onclick="updateBoosts('vanish-boost', true)">
+                                                    Vanish (+80%)
+                                                </button>
+                                            </div>
+                                            <div class="col-auto p-1">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="warscream-boost" onclick="updateBoosts('warscream-boost', true)">
+                                                    War Scream (+10%)
+                                                </button>
+                                            </div>
+                                            <div class="col-auto p-1">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="yourtotem-boost" onclick="updateBoosts('yourtotem-boost', true)">
+                                                    Your Totem (+35%)
+                                                </button>
+                                            </div>
+                                            <div class="col-auto p-1">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="allytotem-boost" onclick="updateBoosts('allytotem-boost', true)">
+                                                    Ally Totem (+15%)
+                                                </button>
+                                            </div>
+                                            <div class="col-auto p-1">
+                                                <button class="button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id="bash-boost" onclick="updateBoosts('bash-boost', true)">
+                                                    Bash (+50%)
+                                                </button>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col mb-1">
-                                    <div class="row row-cols-1 rounded text-center dark-5 scaled-font">
-                                        <div class="col">
-                                            <div class="row text-nowrap">
-                                                <div id = "str-boost-tab" class="col eDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('str')">
-                                                    Earth
-                                                </div>
-                                                <div id = "dex-boost-tab" class="col tDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('dex')">
-                                                    Thunder
-                                                </div>
-                                                <div id = "int-boost-tab" class="col wDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('int')">
-                                                    Water
-                                                </div>
-                                                <div id = "def-boost-tab" class="col fDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('def')">
-                                                    Fire
-                                                </div>
-                                                <div id = "agi-boost-tab" class="col aDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('agi')">
-                                                    Air
-                                                </div>
+                            </div>
+                            <div class="col mb-1">
+                                <div class="row row-cols-1 rounded text-center dark-5 scaled-font">
+                                    <div class="col">
+                                        <div class="row text-nowrap">
+                                            <div id = "str-boost-tab" class="col eDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('str')">
+                                                Earth
+                                            </div>
+                                            <div id = "dex-boost-tab" class="col tDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('dex')">
+                                                Thunder
+                                            </div>
+                                            <div id = "int-boost-tab" class="col wDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('int')">
+                                                Water
+                                            </div>
+                                            <div id = "def-boost-tab" class="col fDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('def')">
+                                                Fire
+                                            </div>
+                                            <div id = "agi-boost-tab" class="col aDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('agi')">
+                                                Air
                                             </div>
                                         </div>
-                                        <div class="col" id="str-boost" style="display: none;">
-                                            <div class="row row-cols-1">
-                                                <div class="col eDam dark-5">
-                                                    Quake (Active)
-                                                </div>
-                                                <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
-                                                    <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1', true)">
-                                                                Lv.4 [e4e4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2', true)">
-                                                                Lv.4.5 [e5e4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3', true)">
-                                                                Lv.5 [e5e5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4', true)">
-                                                                Lv.5.5 [e6e5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5', true)">
-                                                                Lv.6 [e6e6]
-                                                            </button>
-                                                        </div>
+                                    </div>
+                                    <div class="col" id="str-boost" style="display: none;">
+                                        <div class="row row-cols-1">
+                                            <div class="col eDam dark-5">
+                                                Quake (Active)
+                                            </div>
+                                            <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
+                                                <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-1" onclick = "updatePowderSpecials('Quake-1', true)">
+                                                            Lv.4 [e4e4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-2" onclick = "updatePowderSpecials('Quake-2', true)">
+                                                            Lv.4.5 [e5e4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-3" onclick = "updatePowderSpecials('Quake-3', true)">
+                                                            Lv.5 [e5e5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-4" onclick = "updatePowderSpecials('Quake-4', true)">
+                                                            Lv.5.5 [e6e5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Quake-5" onclick = "updatePowderSpecials('Quake-5', true)">
+                                                            Lv.6 [e6e6]
+                                                        </button>
                                                     </div>
-                                                </div>
-                                                <div class="col eDam">
-                                                    Rage (Passive)
-                                                </div>
-                                                <div class="col">
-                                                    <input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" autocomplete = "off" min = '0' max = '400' value = '0' step = '1' onchange = "updateArmorPowderSpecials('str_boost_armor', true)">
-                                                    <input type="text" id="str_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
-                                                    <label id = "str_boost_armor_label" for="str-boost-armor">% Earth Dmg Boost: 0</label>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="col" id="dex-boost" style="display: none;">
-                                            <div class="row row-cols-1">
-                                                <div class="col tDam dark-5">
-                                                    Chain Lightning (Active)
-                                                </div>
-                                                <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
-                                                    <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1', true)">
-                                                                Lv.4 [t4t4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2', true)">
-                                                                Lv.4.5 [t5t4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3', true)">
-                                                                Lv.5 [t5t5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4', true)">
-                                                                Lv.5.5 [t6t5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5', true)">
-                                                                Lv.6 [t6t6]
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col tDam">
-                                                    Kill Streak (Passive)
-                                                </div>
-                                                <div class="col">
-                                                    <input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor', true)">
-                                                    <input type="text" id="dex_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
-                                                    <label id = "dex_boost_armor_label" for="dex-boost-armor">% Thunder Dmg Boost: 0</label>
-                                                </div>
+                                            <div class="col eDam">
+                                                Rage (Passive)
+                                            </div>
+                                            <div class="col">
+                                                <input type = "range" class = "e_slider" id = "str_boost_armor" name = "str-boost-armor" autocomplete = "off" min = '0' max = '400' value = '0' step = '1' onchange = "updateArmorPowderSpecials('str_boost_armor', true)">
+                                                <input type="text" id="str_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
+                                                <label id = "str_boost_armor_label" for="str-boost-armor">% Earth Dmg Boost: 0</label>
                                             </div>
                                         </div>
-                                        <div class="col" id="int-boost">
-                                            <div class="row row-cols-1">
-                                                <div class="col wDam dark-5">
-                                                    Curse (Active)
-                                                </div>
-                                                <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
-                                                    <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1', true)">
-                                                                Lv.4 [w4w4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2', true)">
-                                                                Lv.4.5 [w5w4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3', true)">
-                                                                Lv.5 [w5w5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4', true)">
-                                                                Lv.5.5 [w6w5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5', true)">
-                                                                Lv.6 [w6w6]
-                                                            </button>
-                                                        </div>
+                                    </div>
+                                    <div class="col" id="dex-boost" style="display: none;">
+                                        <div class="row row-cols-1">
+                                            <div class="col tDam dark-5">
+                                                Chain Lightning (Active)
+                                            </div>
+                                            <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
+                                                <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-1" onclick = "updatePowderSpecials('Chain_Lightning-1', true)">
+                                                            Lv.4 [t4t4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-2" onclick = "updatePowderSpecials('Chain_Lightning-2', true)">
+                                                            Lv.4.5 [t5t4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-3" onclick = "updatePowderSpecials('Chain_Lightning-3', true)">
+                                                            Lv.5 [t5t5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-4" onclick = "updatePowderSpecials('Chain_Lightning-4', true)">
+                                                            Lv.5.5 [t6t5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Chain_Lightning-5" onclick = "updatePowderSpecials('Chain_Lightning-5', true)">
+                                                            Lv.6 [t6t6]
+                                                        </button>
                                                     </div>
-                                                </div>
-                                                <div class="col wDam">
-                                                    Concentration (Passive)
-                                                </div>
-                                                <div class="col">
-                                                    <input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('int_boost_armor', true)">
-                                                    <input type="text" id="int_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
-                                                    <label id = "int_boost_armor_label" for="dex-boost-armor">% Water Dmg Boost: 0</label>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="col" id="def-boost" style="display: none;">
-                                            <div class="row row-cols-1">
-                                                <div class="col fDam dark-5">
-                                                    Courage (Active)
-                                                </div>
-                                                <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
-                                                    <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1', true)">
-                                                                Lv.4 [f4f4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2', true)">
-                                                                Lv.4.5 [f5f4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3', true)">
-                                                                Lv.5 [f5f5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4', true)">
-                                                                Lv.5.5 [f6f5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5', true)">
-                                                                Lv.6 [f6f6]
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                                <div class="col fDam">
-                                                    Endurance (Passive)
-                                                </div>
-                                                <div class="col">
-                                                    <input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('def_boost_armor', true)">
-                                                    <input type="text" id="def_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
-                                                    <label id = "def_boost_armor_label" for="def-boost-armor">% Fire Dmg Boost: 0</label>
-                                                </div>
+                                            <div class="col tDam">
+                                                Kill Streak (Passive)
+                                            </div>
+                                            <div class="col">
+                                                <input type = "range" class = "t_slider" id = "dex_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('dex_boost_armor', true)">
+                                                <input type="text" id="dex_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
+                                                <label id = "dex_boost_armor_label" for="dex-boost-armor">% Thunder Dmg Boost: 0</label>
                                             </div>
                                         </div>
-                                        <div class="col" id="agi-boost" style="display: none;">
-                                            <div class="row row-cols-1">
-                                                <div class="col aDam dark-5">
-                                                    Wind Prison (Active)
-                                                </div>
-                                                <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
-                                                    <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-1" onclick = "updatePowderSpecials('Wind_Prison-1', true)">
-                                                                Lv.4 [a4a4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-2" onclick = "updatePowderSpecials('Wind_Prison-2', true)">
-                                                                Lv.4.5 [a5a4]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-3" onclick = "updatePowderSpecials('Wind_Prison-3', true)">
-                                                                Lv.5 [a5a5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-4" onclick = "updatePowderSpecials('Wind_Prison-4', true)">
-                                                                Lv.5.5 [a6a5]
-                                                            </button>
-                                                        </div>
-                                                        <div class="col-auto p-1">
-                                                            <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-5" onclick = "updatePowderSpecials('Wind_Prison-5', true)">
-                                                                Lv.6 [a6a6]
-                                                            </button>
-                                                        </div>
+                                    </div>
+                                    <div class="col" id="int-boost">
+                                        <div class="row row-cols-1">
+                                            <div class="col wDam dark-5">
+                                                Curse (Active)
+                                            </div>
+                                            <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
+                                                <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-1" onclick = "updatePowderSpecials('Curse-1', true)">
+                                                            Lv.4 [w4w4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-2" onclick = "updatePowderSpecials('Curse-2', true)">
+                                                            Lv.4.5 [w5w4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-3" onclick = "updatePowderSpecials('Curse-3', true)">
+                                                            Lv.5 [w5w5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-4" onclick = "updatePowderSpecials('Curse-4', true)">
+                                                            Lv.5.5 [w6w5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Curse-5" onclick = "updatePowderSpecials('Curse-5', true)">
+                                                            Lv.6 [w6w6]
+                                                        </button>
                                                     </div>
                                                 </div>
-                                                <div class="col aDam">
-                                                    Dodge (Passive)
+                                            </div>
+                                            <div class="col wDam">
+                                                Concentration (Passive)
+                                            </div>
+                                            <div class="col">
+                                                <input type = "range" class = "w_slider" id = "int_boost_armor" name = "dex-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('int_boost_armor', true)">
+                                                <input type="text" id="int_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
+                                                <label id = "int_boost_armor_label" for="dex-boost-armor">% Water Dmg Boost: 0</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col" id="def-boost" style="display: none;">
+                                        <div class="row row-cols-1">
+                                            <div class="col fDam dark-5">
+                                                Courage (Active)
+                                            </div>
+                                            <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
+                                                <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-1" onclick = "updatePowderSpecials('Courage-1', true)">
+                                                            Lv.4 [f4f4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-2" onclick = "updatePowderSpecials('Courage-2', true)">
+                                                            Lv.4.5 [f5f4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-3" onclick = "updatePowderSpecials('Courage-3', true)">
+                                                            Lv.5 [f5f5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-4" onclick = "updatePowderSpecials('Courage-4', true)">
+                                                            Lv.5.5 [f6f5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Courage-5" onclick = "updatePowderSpecials('Courage-5', true)">
+                                                            Lv.6 [f6f6]
+                                                        </button>
+                                                    </div>
                                                 </div>
-                                                <div class="col">
-                                                    <input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('agi_boost_armor', true)">
-                                                    <input type="text" id="agi_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
-                                                    <label id = "agi_boost_armor_label" for="agi-boost-armor">% Air Dmg Boost: 0</label>
+                                            </div>
+                                            <div class="col fDam">
+                                                Endurance (Passive)
+                                            </div>
+                                            <div class="col">
+                                                <input type = "range" class = "f_slider" id = "def_boost_armor" name = "def-boost-armor" autocomplete = "off" min = '0' max = '200' value = '0' step = '1' onchange = "updateArmorPowderSpecials('def_boost_armor', true)">
+                                                <input type="text" id="def_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
+                                                <label id = "def_boost_armor_label" for="def-boost-armor">% Fire Dmg Boost: 0</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="col" id="agi-boost" style="display: none;">
+                                        <div class="row row-cols-1">
+                                            <div class="col aDam dark-5">
+                                                Wind Prison (Active)
+                                            </div>
+                                            <div class="col skp-tooltip dark-6 rounded-bottom my-3 my-xl-1">
+                                                <div class="row row-cols-2 row-cols-xl-0 text-nowrap justify-content-center">
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-1" onclick = "updatePowderSpecials('Wind_Prison-1', true)">
+                                                            Lv.4 [a4a4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-2" onclick = "updatePowderSpecials('Wind_Prison-2', true)">
+                                                            Lv.4.5 [a5a4]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-3" onclick = "updatePowderSpecials('Wind_Prison-3', true)">
+                                                            Lv.5 [a5a5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-4" onclick = "updatePowderSpecials('Wind_Prison-4', true)">
+                                                            Lv.5.5 [a6a5]
+                                                        </button>
+                                                    </div>
+                                                    <div class="col-auto p-1">
+                                                        <button class = "button-boost w-100 border-0 text-white dark-8u dark-shadow-sm" id = "Wind_Prison-5" onclick = "updatePowderSpecials('Wind_Prison-5', true)">
+                                                            Lv.6 [a6a6]
+                                                        </button>
+                                                    </div>
                                                 </div>
                                             </div>
+                                            <div class="col aDam">
+                                                Dodge (Passive)
+                                            </div>
+                                            <div class="col">
+                                                <input type = "range" class = "a_slider" id = "agi_boost_armor" name = "agi-boost-armor" autocomplete = "off" min = '0' max = '150' value = '0' step = '1' onchange = "updateArmorPowderSpecials('agi_boost_armor', true)">
+                                                <input type="text" id="agi_boost_armor_prev" autocomplete = "off"  value="0" style = "display:none;">
+                                                <label id = "agi_boost_armor_label" for="agi-boost-armor">% Air Dmg Boost: 0</label>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -1218,106 +1216,110 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-xl-3 mb-3">
-                    <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
-                        <div class="col rounded-top">
-                            <div class="row">
-                                <div id="tab-offensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('offensive-stats')">
-                                    Offense
-                                </div>
-                                <div id="tab-defensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('defensive-stats')">
-                                    Defense
-                                </div>
-                                <div id="tab-overall-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7 selected-btn" onclick="show_tab('overall-stats')">
-                                    Overall
-                                </div>
+            </div>
+            <div class="col-xl-3 mb-3">
+                <div class="row row-cols-1 rounded dark-shadow dark-6 scaled-font">
+                    <div class="col rounded-top">
+                        <div class="row">
+                            <div id="tab-offensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('offensive-stats')">
+                                Offense
+                            </div>
+                            <div id="tab-defensive-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7" onclick="show_tab('defensive-stats')">
+                                Defense
+                            </div>
+                            <div id="tab-overall-btn" class="col-4 text-center fake-button border-bottom border-dark rounded-top dark-4u border border-2 border-dark-7 selected-btn" onclick="show_tab('overall-stats')">
+                                Overall
                             </div>
                         </div>
-                        <div style="display: none;" id="offensive-stats" class="col text-nowrap"></div>
-                        <div style="display: none;" id="defensive-stats" class="col text-nowrap"></div>
-                        <div id="overall-stats" class="col text-nowrap"></div>
                     </div>
+                    <div style="display: none;" id="offensive-stats" class="col text-nowrap"></div>
+                    <div style="display: none;" id="defensive-stats" class="col text-nowrap"></div>
+                    <div id="overall-stats" class="col text-nowrap"></div>
                 </div>
-                <div class="col-xl-3 mb-3">
-                    <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
-                        <div class = "col">
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
-                            <div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
-                        </div>
-                        <div class = "col">
-                            <div class = "col spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
-                        </div>
-                        <div class = "col">
-                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">spell1</div>
-                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
-                        </div>
-                        <div class = "col">
-                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell1-infoAvg">spell2</div>
-                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
-                        </div>
-                        <div class = "col">
-                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell2-infoAvg">spell3</div>
-                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
-                        </div>
-                        <div class = "col">
-                            <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell3-infoAvg">spell4</div>
-                            <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
-                        </div>
-                        <div class = "col">
-                            <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
-                        </div>
-                        
+            </div>
+            <div class="col-xl-3 mb-3 px-0">
+                <div class="row row-cols-1 gy-3 mb-4 text-center scaled-font">
+                    <div class = "col">
+                        <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-melee-statsAvg">melee</div>
+                        <div class = "spell-display dark-5 rounded-bottom py-2 dark-shadow" id = "build-melee-stats" style="display: none;"></div>
                     </div>
+                    <div class = "col">
+                        <div class = "col spell-display dark-5 rounded dark-shadow py-2 border border-dark" id="build-poison-stats">poison</div>
+                    </div>
+                    <div class = "col">
+                        <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell0-infoAvg">spell1</div>
+                        <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell0-info" style="display: none;">Spell 1</div>
+                    </div>
+                    <div class = "col">
+                        <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell1-infoAvg">spell2</div>
+                        <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell1-info" style="display: none;">Spell 2</div>
+                    </div>
+                    <div class = "col">
+                        <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell2-infoAvg">spell3</div>
+                        <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell2-info" style="display: none;">Spell 3</div>
+                    </div>
+                    <div class = "col">
+                        <div class = "col spell-display spell-expand dark-5 rounded dark-shadow pt-2 border border-dark" id="spell3-infoAvg">spell4</div>
+                        <div class = "col spell-display dark-5 rounded dark-shadow py-2" id = "spell3-info" style="display: none;">Spell 4</div>
+                    </div>
+                    <div class = "col">
+                        <div class = "spell-display dark-5 rounded dark-shadow py-2 border border-dark" id = "powder-special-stats"></div>
+                    </div>
+                    
                 </div>
             </div>
         </div>
-        <div class="col-12 mx-4" id="masonry-container">
-            <div id="helmet-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+        <div class="row mx-2 mx-lg-3">
+            <div class="col" id="masonry-container">
+                <div id="helmet-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="chestplate-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="leggings-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="boots-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="ring1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="ring2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="bracelet-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="necklace-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="weapon-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="weaponTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="weaponTome2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="armorTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="armorTome2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="armorTome3-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="armorTome4-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div id="guildTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
+                </div>
+                <div class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
+                </div>
+                <div class = "rounded row g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div>
             </div>
-            <div id="chestplate-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="leggings-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="boots-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="ring1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="ring2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="bracelet-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="necklace-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="weapon-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="weaponTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="weaponTome2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="armorTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="armorTome2-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="armorTome3-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="armorTome4-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div id="guildTome1-tooltip" class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3">
-            </div>
-            <div class="rounded row g-0 scaled-font float-tooltip border border-3 border-dark dark-shadow p-3" id = "build-order">
-            </div>
-            <div class = "rounded row g-0 scaled-font float-tooltip border border-3 border-dark p-3" id = "set-info"></div>
         </div>
-        <div class="col-12 dark-5 scaled-font">
-            <footer class="text-center">
-                <div id="header2">
-                    <p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "../atlas" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
-                    <p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
-                </div>
-                <div id="credits">
-                    <a href="credits.txt" class="link">Additional credits</a>
-                </div>
-            </footer>
+        <div class="row mx-2 mx-lg-3">
+            <div class="col-12 dark-5 scaled-font">
+                <footer class="text-center">
+                    <div id="header2">
+                        <p>Made by <b class = "hppeng">hppeng</b> and <b class = "ferricles">ferricles</b> with <a href = "../atlas" target = "_blank" class = "atlas link">Atlas Inc</a> (JavaScript required to function, nothing works without js)</p>
+                        <p>Hard refresh the page (Ctrl+Shift+R on windows/chrome) if it isn't updating correctly.</p>
+                    </div>
+                    <div id="credits">
+                        <a href="credits.txt" class="link">Additional credits</a>
+                    </div>
+                </footer>
+            </div>  
         </div>
     </div>
     <div class="container h-75 mx-0 mx-lg-auto dark-2 border border-4 scaled-font align-self-center" style="position: fixed; z-index: 2; overflow: auto; display: none;" id="search-container">

From 191f4a64c7515a68b41f6291df39627cd14d2e0f Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Sun, 22 May 2022 20:43:21 +0700
Subject: [PATCH 2/2] small config

---
 builder/index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/builder/index.html b/builder/index.html
index 5548a6c..e96e19a 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -52,7 +52,7 @@
     <div class="container-fluid me-4" style="max-width: 95%;">
         <div class="row h-100 gx-lg-5 gy-3 mx-2 mx-lg-3 py-3">
             <div class="col-xl-6">
-                <div class="row row-cols-1 mb-3">
+                <div class="row row-cols-1 mb-3 gy-4">
                     <div class="col">
                         <div class="row row-cols-1 row-cols-xl-2 rounded gy-4 gx-5 justify-content-center">
                             <div class="col-auto rounded order-xl-0 order-0">
@@ -323,7 +323,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col py-3">
+                    <div class="col">
                         <div class="row row-cols-1 gy-2 rounded dark-5 dark-shadow">
                             <div class="col">
                                 <div class="row row-cols-2 row-cols-xl-5 gy-2 justify-content-center">
@@ -412,8 +412,8 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col mb-5">
-                        <div class="row row-cols-1 gy-3">
+                    <div class="col">
+                        <div class="row row-cols-1 gy-4">
                             <div class="col mb-1">
                                 <div class="row row-cols-1 row-cols-1 text-center scaled-font dark-5 rounded dark-shadow">
                                     <div class="col fw-bold dark-4 rounded-top">