diff --git a/sq2.css b/sq2.css
index 6edd3ff..8555546 100644
--- a/sq2.css
+++ b/sq2.css
@@ -85,30 +85,19 @@ table {
 }
 
 .full-border, .box {
-    border: 5px solid rgb(45, 45, 45);
-}
-
-.top-half-border {
-    border-top: 5px solid rgb(45, 45, 45);
-    border-left: 5px solid rgb(45, 45, 45);
-    border-right: 5px solid rgb(45, 45, 45);
-}
-
-.bot-half-border {
-    border-bottom: 5px solid rgb(45, 45, 45);
-    border-left: 5px solid rgb(45, 45, 45);
-    border-right: 5px solid rgb(45, 45, 45);
+    border: .3vw solid rgb(45, 45, 45);
 }
 
 .se-border {
-    border-left: 5px solid rgb(45, 45, 45);
-    border-right: 5px solid rgb(45, 45, 45);
+    border-left: .3vw solid rgb(45, 45, 45);
+    border-right: .3vw solid rgb(45, 45, 45);
 }
 
 td {
     padding: 0;
     margin: 0;
     white-space: nowrap;
+    font-size: .8vw;
 }
 
 p {
@@ -120,20 +109,23 @@ p {
 
 input {
     background-color: rgb(40, 40, 40);
-    border-top: 2px solid  rgb(25, 25, 25) !important;
-    border-left: 2px solid rgb(25, 25, 25) !important;
-    border-bottom: 2px solid rgb(45, 45, 45) !important;
-    border-right: 2px solid rgb(45, 45, 45) !important;
+    border-top: .15vw solid  rgb(25, 25, 25) !important;
+    border-left: .15vw solid rgb(25, 25, 25) !important;
+    border-bottom: .15vw solid rgb(45, 45, 45) !important;
+    border-right: .15vw solid rgb(45, 45, 45) !important;
     box-sizing: border-box !important;
     color: rgb(240, 240, 240);
     min-width: 0;
+    min-height: 0;
+    font-size: .8vw;
     box-sizing: none;
 }
 
 input.item-name {
     text-align: center;
     font-weight: bold;
-    width: 13em;
+    width: 10vw;
+    height: 1.2vw;
 }
 
 input.search-field {
@@ -159,6 +151,8 @@ input.search-field {
 }
 
 .skp-container {
+    width: 38vw;
+    height: 10vw;
     display: inline-flex;
     flex-direction: column;
     background-color: rgb(30, 30, 30);
@@ -169,7 +163,7 @@ td.mono-font {
 }
 
 td.damage-size {
-    width: 7em;
+    width: 5vw;
     user-select: none;
 }
 
@@ -183,8 +177,8 @@ td.damage-size {
 }
 
 .skp-input {
-    width: 7em;
-    height: 1.5em;
+    width: 6vw;
+    height: 1.2vw;
     text-align: center;
 }
 
@@ -198,11 +192,20 @@ td.damage-size {
     text-align: center; 
     font-family: 'Courier New', Courier, monospace; 
     font-weight: bold; 
-    width: 13em;
+    width: 10vw;
+    height: 1.2vw;
 }
 
 .skp-tooltip {
-    font-size: 0.7rem;
+    font-size: .6vw;
+}
+
+.spell-container {
+    display: inline-flex; 
+    vertical-align: top; 
+    background-color: rgb(30, 30, 30); 
+    width: 18vw; 
+    height: 24.5vw;
 }
 
 .draggable {
@@ -254,11 +257,7 @@ p.Damage {
     padding-top: 2px;
     padding-bottom: 2px;
 
-    border: 1px solid rgb(30, 30, 30);
     border-bottom: 1px solid rgb(45, 45, 45)
-    /*
-    border-top: 1px solid rgb(30, 30, 30);
-    border-bottom: 1px solid rgb(45, 45, 45);*/
 }
 
 .spacer-table {
@@ -270,8 +269,8 @@ p.Damage {
     flex-direction: column; 
     vertical-align: top; 
     background-color: rgb(30, 30, 30); 
-    width: 20.5rem; 
-    height: 29.65rem;
+    width: 18vw; 
+    height: 24.5vw;
 }
 
 .nDam {
@@ -382,8 +381,8 @@ button {
 }
 
 .item-margin {
-    margin-top: 1em;
-    margin-bottom: 1em;
+    margin-top: .8vw;
+    margin-bottom: .8vw;
 }
 
 .item-tooltip {
@@ -404,6 +403,7 @@ button {
     display: flex; 
     cursor: move; 
     background-color: rgb(45, 45, 45);
+    font-size: .8vw;
 }
 
 .search-result-container {
@@ -412,10 +412,8 @@ button {
     justify-content: center; 
     overflow-y: auto; 
     overflow-x: hidden; 
-    flex-basis: 40em; 
-    max-width: 20em; 
-    flex-grow: 0; 
-    flex-shrink: 0;
+    flex-basis: 30vw; 
+    max-width: 14.4vw; 
 }
 
 .button-boost  {
@@ -426,9 +424,17 @@ button {
 
 button.toggleOn{
     background-color:#0a0;
-    border: 3 px solid rgb(0, 70, 0);
+    border: 3px solid rgb(0, 70, 0);
 }
 
 .damageSubtitle  {
     text-align: center;
-}
\ No newline at end of file
+}
+
+.itemp {
+    font-size: .8vw;
+}
+/*
+div:not(.item-tooltip) {
+    font-size: .8vw;
+}*/
diff --git a/sq2.html b/sq2.html
index 896cfae..59f2aa2 100644
--- a/sq2.html
+++ b/sq2.html
@@ -304,21 +304,21 @@
     <div id="left" class="column">
         <div class="bottom">
             <ul>
-                <li><button onclick="$('#overall-window').toggle()"><img src="media/items/new/generic-scroll.png" alt="" title="Overall Build Stats"></button></li>
-                <li><button onclick="$('#search-container').toggle()"><img src="media/icons/new/searcher.png" alt="" title="Item Search" style="width: 64px"></button></li>
-                <li><button onclick="$('#boost-container').toggle()"><img src="media/icons/new/custom.png" alt="" title="Active boosts" style="width: 64px"></button></li>
-                <li><a href="https://wynnbuilder.github.io/"><img src="media/icons/new/atlas64.png" alt="place" title="WynnBuilder" style="width: 64px;"></a></li>
+                <li><button onclick="$('#overall-window').toggle()"><img src="media/items/new/generic-scroll.png" alt="" title="Overall Build Stats" style="width: 3vw"></button></li>
+                <li><button onclick="$('#search-container').toggle()"><img src="media/icons/new/searcher.png" alt="" title="Item Search" style="width: 3vw"></button></li>
+                <li><button onclick="$('#boost-container').toggle()"><img src="media/icons/new/custom.png" alt="" title="Active boosts" style="width: 3vw"></button></li>
+                <li><a href="https://wynnbuilder.github.io/"><img src="media/icons/new/atlas64.png" alt="place" title="WynnBuilder" style="width: 3vw;"></a></li>
             </ul>
         </div>
     </div>
     <div id="right" class="column">
         <div class="bottom">
             <div class="all-equipment" id="column1">
-                <div class="weapon-container" style="width: 46rem;">
-                    <table style="width: 46em; border-collapse: collapse;" class="full-border">
+                <div class="weapon-container" style="width: 38vw;">
+                    <table style="width: 100%; border-collapse: collapse;" class="full-border">
                         <tr>
                             <td id="weapon-img-loc" style="border: none;">
-                                <img id="weapon-img" src="media/items/new/generic-dagger.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                <img id="weapon-img" src="media/items/new/generic-dagger.png" style="display: flex; width: 2.2vw;" class="item-icon">
                             </td>
                             <td style="border: none;">
                                 <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
@@ -354,16 +354,16 @@
                     </table>
                 </div>
                 <div style="display: inline-flex; flex-direction: row;" >
-                    <div class="equipment-container" style="width: 23rem;">
+                    <div class="equipment-container" style="width: 19vw;">
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="helmet-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-helmet.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-helmet.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none; justify-content: left; width: 100%;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='helmet-health' class="se-border Health"></td>
+                                            <td id='helmet-health' style="width: 6vw;" class="se-border Health"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="helmet-items" id="helmet-choice" name="helmet-choice" placeholder="No Helmet"/>
                                                 <datalist id="helmet-items">
@@ -371,7 +371,7 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='helmet-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='helmet-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
                                                 <input class="powders powder-input" type="text" id="helmet-powder" name="helmet-powder" placeholder="Example: t6t6"/>
                                             </td>
@@ -383,12 +383,12 @@
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="chestplate-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-chestplate.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-chestplate.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='chestplate-health' style="width: 100%;" class="Health se-border"></td>
+                                            <td id='chestplate-health' style="width: 6vw;" class="Health se-border"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="chestplate-items" id="chestplate-choice" name="chestplate-choice" placeholder="No Chestplate"/>
                                                 <datalist id="chestplate-items">
@@ -396,7 +396,7 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='chestplate-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='chestplate-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
                                                 <input class="powders powder-input" type="text" id="chestplate-powder" name="chestplate-powder" placeholder="powders"/>
                                             </td>
@@ -408,12 +408,12 @@
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="leggings-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-leggings.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-leggings.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='leggings-health' style="width: 100%;" class="Health se-border"></td>
+                                            <td id='leggings-health' style="width: 6vw;" class="Health se-border"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="leggings-items" id="leggings-choice" name="leggings-choice" placeholder="No Leggings"/>
                                                 <datalist id="leggings-items">
@@ -421,7 +421,7 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='leggings-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='leggings-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
                                                 <input class="powders powder-input" type="text" id="leggings-powder" name="leggings-powder" placeholder="powders"/>
                                             </td>
@@ -433,12 +433,12 @@
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="boots-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-boots.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-boots.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='boots-health' style="width: 100%;" class="Health se-border"></td>
+                                            <td id='boots-health' style="width: 6vw;" class="Health se-border"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="boots-items" id="boots-choice" name="boots-choice" placeholder="No Boots"/>
                                                 <datalist id="boots-items">
@@ -446,7 +446,7 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='boots-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='boots-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
                                                 <input class="powders powder-input" type="text" id="boots-powder" name="boots-powder" placeholder="powders"/>
                                             </td>
@@ -456,16 +456,16 @@
                             </tr>
                         </table>
                     </div>
-                    <div class="equipment-container" style="width: 23rem;">
+                    <div class="equipment-container" style="width: 19vw;">
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="ring1-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-ring.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-ring.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='ring1-health' style="width: 100%;" class="Health se-border"></td>
+                                            <td id='ring1-health' style="width: 6vw;" class="Health se-border"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="ring1-items" id="ring1-choice" name="ring1-choice" placeholder="No Ring 1" />
                                                 <datalist id="ring1-items">
@@ -473,9 +473,9 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='ring1-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='ring1-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
-                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="no" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
+                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="no">
                                             </td>
                                         </tr>
                                     </table>
@@ -485,12 +485,12 @@
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="ring2-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-ring.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-ring.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='ring2-health' style="width: 100%;" class="Health se-border"></td>
+                                            <td id='ring2-health' style="width: 6vw;" class="Health se-border"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="ring2-items" id="ring2-choice" name="ring2-choice" placeholder="No Ring 2"/>
                                                 <datalist id="ring2-items">
@@ -498,9 +498,9 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='ring2-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='ring2-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
-                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="powders" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
+                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="powders">
                                             </td>
                                         </tr>
                                     </table>
@@ -510,12 +510,12 @@
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="bracelet-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-bracelet.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-bracelet.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='bracelet-health' style="width: 100%;" class="Health se-border"> </td>
+                                            <td id='bracelet-health' style="width: 6vw;" class="Health se-border"> </td>
                                             <td class="se-border">
                                                 <input class="item-name" list="bracelet-items" id="bracelet-choice" name="bracelet-choice" placeholder="No Bracelet"/>
                                                 <datalist id="bracelet-items">
@@ -523,9 +523,9 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='bracelet-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='bracelet-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
-                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="on" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
+                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="on">
                                             </td>
                                         </tr>
                                     </table>
@@ -535,12 +535,12 @@
                         <table class="full-border" style="border-collapse: collapse;">
                             <tr>
                                 <td id="necklace-img-loc" style="border: none; width: 0.1%;">
-                                    <img src="media/items/new/generic-necklace.png" style="display: flex; width: 2.8em;" class="item-icon">
+                                    <img src="media/items/new/generic-necklace.png" style="display: flex; width: 2.2vw;" class="item-icon">
                                 </td>
                                 <td style="border: none;">
                                     <table style="font-size: 15px; text-align: center; border-collapse: collapse;">
                                         <tr>
-                                            <td id='necklace-health' style="width: 100%;" class="Health se-border"></td>
+                                            <td id='necklace-health' style="width: 6vw;" class="Health se-border"></td>
                                             <td class="se-border">
                                                 <input class="item-name" list="necklace-items" id="necklace-choice" name="necklace-choice" placeholder="No Necklace"/>
                                                 <datalist id="necklace-items">
@@ -548,9 +548,9 @@
                                             </td>
                                         </tr>
                                         <tr>
-                                            <td id='necklace-lv' style="width: 100%;" class="se-border lvl"></td>
+                                            <td id='necklace-lv' style="width: 6vw;" class="se-border lvl"></td>
                                             <td class="se-border">
-                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="accs" style="text-align: center; font-family: 'Courier New', Courier, monospace; font-weight: bold; width: 13em;">
+                                                <input disabled class="powders powder-input" type="text" id="h-powder-input" name="h-powder-input" placeholder="accs">
                                             </td>
                                         </tr>
                                     </table>
@@ -560,10 +560,10 @@
                     </div>
                 </div>
                 <div class="skp-container">
-                    <table style="width: 46rem; height: 11.15em;" class="full-border">
+                    <table style="width: 100%; height: 100%;" class="full-border">
                         <tr>
                             <td class="skp-text" style="text-align: center;">
-                                <p class="eDam" style="font-weight: bold;">✤Strength</p>
+                                <p class="eDam" style="font-weight: bold; font-size: .8vw;">✤Strength</p>
                                 <input type="string" id="str-skp" name="str-skp" value="0" class="skp-input"/>
                                 <div id="str-skp-assign" class="skp-tooltip">
                                     Manually Assigned: 0
@@ -575,7 +575,7 @@
                                 </div>
                             </td>
                             <td class="skp-text" style="text-align: center;">
-                                <p class="tDam" style="font-weight: bold;">✦Dexterity</p>
+                                <p class="tDam" style="font-weight: bold; font-size: .8vw;">✦Dexterity</p>
                                 <input type="string" id="dex-skp" name="dex-skp" value="0" class="skp-input"/>
                                 <div id="dex-skp-assign" class="skp-tooltip">
                                     Manually Assigned: 0
@@ -587,7 +587,7 @@
                                 </div>
                             </td>
                             <td class="skp-text" style="text-align: center;">                               
-                                <p class="wDam" style="font-weight: bold;">❉Intelligence</p>
+                                <p class="wDam" style="font-weight: bold; font-size: .8vw;">❉Intelligence</p>
                                 <input type="string" id="int-skp" name="int-skp" value="0" class="skp-input"/>
                                 <div id="int-skp-assign" class="skp-tooltip">
                                     Manually Assigned: 0
@@ -599,7 +599,7 @@
                                 </div>
                             </td>
                             <td class="skp-text" style="text-align: center;">                               
-                                <p class="fDam" style="font-weight: bold;">✹Defense</p>
+                                <p class="fDam" style="font-weight: bold; font-size: .8vw;">✹Defense</p>
                                 <input type="string" id="def-skp" name="def-skp" value="0" class="skp-input"/>
                                 <div id="def-skp-assign" class="skp-tooltip">
                                     Manually Assigned: 0
@@ -611,7 +611,7 @@
                                 </div>
                             </td>
                             <td class="skp-text" style="text-align: center;">
-                                <p class="aDam" style="font-weight: bold;">❋Agility</p>
+                                <p class="aDam" style="font-weight: bold; font-size: .8vw;">❋Agility</p>
                                 <input type="string" id="agi-skp" name="agi-skp" value="0" class="skp-input"/>
                                 <div id="agi-skp-assign" class="skp-tooltip">
                                     Manually Assigned: 0
@@ -623,9 +623,9 @@
                                 </div>
                             </td>
                         </tr>
-                        <tr>
-                            <td colspan="5" style="text-align: center; height: 100%;">
-                                <div class="nomargin" id="summary-box"></div>
+                        <tr style="height: 60%;">
+                            <td colspan="5" style="text-align: center;">
+                                <div id="summary-box"></div>
                                 <div id="str-warnings" class="center"></div>
                                 <div id="dex-warnings" class="center"></div>
                                 <div id="int-warnings" class="center"></div>
@@ -639,43 +639,43 @@
             <div id="column2" class="minimal-stats-container">
                 <table style="text-align: center; border: 5px solid rgb(45, 45, 45); border-bottom: none;">
                     <tr>
-                        <td id="basic-stats-btn" class="clickable" style="width: 7em; background-color: rgb(30, 30, 30);">Basic</td>
-                        <td id="off-stats-btn" class="clickable" style="width: 7em; background-color: rgb(45, 45, 45);">Offensive</td>
-                        <td id="def-stats-btn" class="clickable" style="width: 7em; background-color: rgb(45, 45, 45);">Defensive</td>
+                        <td id="basic-stats-btn" class="clickable" style="width: 33%; background-color: rgb(30, 30, 30);">Basic</td>
+                        <td id="off-stats-btn" class="clickable" style="width: 33%; background-color: rgb(45, 45, 45);">Offensive</td>
+                        <td id="def-stats-btn" class="clickable" style="width: 33%; background-color: rgb(45, 45, 45);">Defensive</td>
                     </tr>
                 </table>
                 <div style="display: none; overflow: auto;" id="minimal-offensive-stats" class="minimal-stats-container"></div>
                 <div style="display: none; overflow: auto;" id="minimal-defensive-stats" class="minimal-stats-container"></div>
                 <div style="overflow: auto;" id="minimal-stats" class="minimal-stats-container"></div>
             </div>
-            <div id="column3" style="display: inline-flex; vertical-align: top; background-color: rgb(30, 30, 30); width: 20.5em; height: 29.65rem;">
+            <div id="column3" class="spell-container">
                 <table style="width: 100%;">
-                    <tr style="height: 6em;">
+                    <tr style="height: 20%;">
                         <td class="full-border" style="text-align: center; vertical-align: middle;">
                             <div id="build-melee-statsAvg">melee</div>
                         </td>
                     </tr>
-                    <tr style="height: 3em;">
+                    <tr style="height: 10%;">
                         <td class="full-border" style="text-align: center; vertical-align: middle;">
                             <div class="center" id="build-poison-stats">poison</div>
                         </td>
                     </tr>
-                    <tr style="height: 3.65em;">
+                    <tr style="height: 15%;">
                         <td class="full-border" style="text-align: center; vertical-align: middle;">
                             <div id="spell0-infoAvg">spell1</div>
                         </td>
                     </tr>
-                    <tr style="height: 3.65em;">
+                    <tr style="height: 15%;">
                         <td class="full-border" style="text-align: center; vertical-align: middle;">
                             <div id="spell1-infoAvg">spell2</div>
                         </td>
                     </tr>
-                    <tr style="height: 3.65em;">
+                    <tr style="height: 15%;">
                         <td class="full-border" style="text-align: center; vertical-align: middle;">
                             <div id="spell2-infoAvg">spell3</div>
                         </td>
                     </tr>
-                    <tr style="height: 3.65em;">
+                    <tr style="height: 15%;">
                         <td class="full-border" style="text-align: center; vertical-align: middle;">
                             <div id="spell3-infoAvg">spell4</div>
                         </td>
diff --git a/sq2display.js b/sq2display.js
index bb9c7ed..812133c 100644
--- a/sq2display.js
+++ b/sq2display.js
@@ -210,6 +210,7 @@ function displaysq2ExpandedItem(item, parent_id, mini=false){
                 }
                 if (id === "slots") {
                     let p_elem = document.createElement("p");
+                    p_elem.classList.add('itemp')
                     // PROPER POWDER DISPLAYING
                     let numerals = new Map([[1, "I"], [2, "II"], [3, "III"], [4, "IV"], [5, "V"], [6, "VI"]]);