diff --git a/src/components/Skill/index.css b/src/components/Skill/index.css
index 65ce93e..da23dd1 100644
--- a/src/components/Skill/index.css
+++ b/src/components/Skill/index.css
@@ -86,7 +86,6 @@
 
 .augment {
   background-color: var(--themeColor);
-  z-index: 0;
 }
 
 .augment:first-child {
@@ -169,7 +168,7 @@
   position: absolute;
   bottom: 100%;
   width: 20rem;
-  transform: translateX(calc((1 - var(--treeindex)) * 40%));
+  transform: translateX(calc((0.5 - var(--treeindex) / 3) * 80%));
 }
 
 .actionSkill:hover .description {
diff --git a/src/components/VaultHunter/index.js b/src/components/VaultHunter/index.js
index 4dd882e..2980ea7 100644
--- a/src/components/VaultHunter/index.js
+++ b/src/components/VaultHunter/index.js
@@ -60,8 +60,10 @@ export default class VaultHunter extends Component {
     const trees =
       Object.keys(this.state.skills).map((treeName, treeIndex) => {
         return (
-          <div class={`${style.tree} ${[style.green, style.blue, style.red, style.purple][treeIndex]}`}>
-            <style>{`.${style.tree}:nth-child(${treeIndex + 1}) { --invested: ${this.state.invested[treeIndex]}; --treeindex: ${treeIndex};}`}</style>
+          <div
+            class={`${style.tree} ${[style.green, style.blue, style.red, style.purple][treeIndex]}`}
+            style={`--invested: ${this.state.invested[treeIndex]}; --treeindex: ${treeIndex};`}
+          >
             <h2 class={style.treeName}>{ treeName }</h2>
             <div class={style.skills}>
               { Object.keys(this.state.skills[treeName]).map((tier, tierIndex) =>
diff --git a/src/index.css b/src/index.css
index 72d8834..7b1db2c 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,7 @@
 	--transition-duration: 300ms;
 	--font-header: sans-serif;
   --font-list: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-  font-size: 1.5vw;
+  font-size: 1.3vw;
 }
 
 @media screen and (min-width: 189vh) {