From bcbc9dc81c526ad4b05d098229cf61e9fa4ad825 Mon Sep 17 00:00:00 2001
From: Max Stevenson <maxstevenson@msn.com>
Date: Tue, 1 Sep 2020 21:39:09 -0500
Subject: [PATCH] Adjusted border styling to be more responsive.

---
 index.html                        | 12 +++----
 public/scripts/app.js             | 20 +++++------
 public/stylesheets/styles.css     | 57 ++++++++++++++++++++++---------
 public/stylesheets/styles.css.map |  2 +-
 sass/base/_base.scss              |  4 +++
 sass/components/_borders.scss     | 53 +++++++++++++++++++---------
 6 files changed, 97 insertions(+), 51 deletions(-)

diff --git a/index.html b/index.html
index d28ac73..46de5b6 100644
--- a/index.html
+++ b/index.html
@@ -306,18 +306,18 @@
                         <p class="button-text__embossed small-button">VEHICLE</p>
                       </div>
                     </div>
-                    <div class="outer-edge__light buttons">
-                      <div class="inner-edge__light">
+                    <div class="outer-edge__light-buttons buttons">
+                      <div class="inner-edge__light-buttons">
                         <p class="button-text__engraved small-button">TOUR</p>
                       </div>
                     </div>
-                    <div class="outer-edge__light buttons">
-                      <div class="inner-edge__light">
+                    <div class="outer-edge__light-buttons buttons">
+                      <div class="inner-edge__light-buttons">
                         <p class="button-text__engraved small-button">POWER</p>
                       </div>
                     </div>
-                    <div class="outer-edge__light buttons">
-                      <div class="inner-edge__light">
+                    <div class="outer-edge__light-buttons buttons">
+                      <div class="inner-edge__light-buttons">
                         <p class="button-text__engraved small-button">TIME</p>
                       </div>
                     </div>
diff --git a/public/scripts/app.js b/public/scripts/app.js
index 5c1ba6f..a57bf78 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -211,8 +211,8 @@ enablePower();
 
 let prevButton = document.querySelector("div.button__depressed");
 prevButton.classList.remove("button__depressed");
-prevButton.classList.add("outer-edge__light");
-prevButton.firstElementChild.classList.add("inner-edge__light");
+prevButton.classList.add("outer-edge__light-buttons");
+prevButton.firstElementChild.classList.add("inner-edge__light-buttons");
 prevButton.firstElementChild
   .querySelector("p")
   .classList.remove("button-text__embossed");
@@ -229,8 +229,8 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
   button.addEventListener("click", event => {
     let prevButton = document.querySelector("div.button__depressed");
     prevButton.classList.remove("button__depressed");
-    prevButton.classList.add("outer-edge__light");
-    prevButton.firstElementChild.classList.add("inner-edge__light");
+    prevButton.classList.add("outer-edge__light-buttons");
+    prevButton.firstElementChild.classList.add("inner-edge__light-buttons");
     prevButton.firstElementChild
       .querySelector("p")
       .classList.remove("button-text__embossed");
@@ -238,8 +238,8 @@ for (let i = 0; i < topControlPanelButtons.length; i++) {
       .querySelector("p")
       .classList.add("button-text__engraved");
     button.classList.add("button__depressed");
-    button.classList.remove("outer-edge__light");
-    button.firstElementChild.classList.remove("inner-edge__light");
+    button.classList.remove("outer-edge__light-buttons");
+    button.firstElementChild.classList.remove("inner-edge__light-buttons");
     button.firstElementChild
       .querySelector("p")
       .classList.add("button-text__embossed");
@@ -262,8 +262,8 @@ for (let i = 0; i < bottomControlPanelButtons.length; i++) {
       let prevButton = bottomControlPanelButtons[k];
       if (prevButton.classList.contains("button__depressed")) {
         prevButton.classList.remove("button__depressed");
-        prevButton.classList.add("outer-edge__light");
-        prevButton.firstElementChild.classList.add("inner-edge__light");
+        prevButton.classList.add("outer-edge__light-buttons");
+        prevButton.firstElementChild.classList.add("inner-edge__light-buttons");
         prevButton.firstElementChild
           .querySelector("p")
           .classList.remove("button-text__embossed");
@@ -273,8 +273,8 @@ for (let i = 0; i < bottomControlPanelButtons.length; i++) {
       }
     }
     button.classList.add("button__depressed");
-    button.classList.remove("outer-edge__light");
-    button.firstElementChild.classList.remove("inner-edge__light");
+    button.classList.remove("outer-edge__light-buttons");
+    button.firstElementChild.classList.remove("inner-edge__light-buttons");
     button.firstElementChild
       .querySelector("p")
       .classList.add("button-text__embossed");
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index 067b572..9cd1f05 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+html {
+  font-size: 16px;
+}
+
 html,
 body {
   margin: 0;
@@ -105,37 +109,56 @@ body {
 }
 
 .outer-edge__light, .outer-edge__light__no-right-edge {
-  border-left: solid 1px #585356;
-  border-top: solid 1px #585356;
-  border-right: solid 1px #c8c8c8;
-  border-bottom: solid 1px #c8c8c8;
+  border-left: solid 0.15vw #585356;
+  border-top: solid 0.15vw #585356;
+  border-right: solid 0.15vw #c8c8c8;
+  border-bottom: solid 0.15vw #c8c8c8;
   border-radius: 1px;
   background-color: #797979;
   height: 100%;
 }
 
+.outer-edge__light-buttons {
+  border-left: solid 0.1vw #585356;
+  border-top: solid 0.1vw #585356;
+  border-right: solid 0.1vw #c8c8c8;
+  border-bottom: solid 0.1vw #c8c8c8;
+  border-radius: 1px;
+  background-color: #797979;
+  height: 100%;
+}
+
+.inner-edge__light-buttons {
+  border-bottom: solid 0.15vw #4a4546;
+  border-right: solid 0.15vw #4a4546;
+  border-left: solid 0.15vw #c8c8c8;
+  border-top: solid 0.15vw #c8c8c8;
+  padding: 0.25vw;
+  height: 100%;
+}
+
 .inner-edge__light, .inner-edge__light__no-padding {
-  border-bottom: solid 2px #4a4546;
-  border-right: solid 2px #4a4546;
-  border-left: solid 2px #c8c8c8;
-  border-top: solid 2px #c8c8c8;
-  padding: 5px;
+  border-bottom: solid 0.2vw #4a4546;
+  border-right: solid 0.2vw #4a4546;
+  border-left: solid 0.2vw #c8c8c8;
+  border-top: solid 0.2vw #c8c8c8;
+  padding: 0.5vw;
   height: 100%;
 }
 
 .inner-edge__dark {
-  border-bottom: solid 2px #3F3D43;
-  border-right: solid 2px #3F3D43;
-  border-left: solid 2px #A7A8AE;
-  border-top: solid 2px #A7A8AE;
+  border-bottom: solid 0.2vw #3F3D43;
+  border-right: solid 0.2vw #3F3D43;
+  border-left: solid 0.2vw #A7A8AE;
+  border-top: solid 0.2vw #A7A8AE;
   height: 100%;
 }
 
 .outer-edge__dark, .outer-edge__dark__no-right-edge {
-  border-left: solid 1px #302a2a;
-  border-top: solid 1px #302a2a;
-  border-right: solid 1px #c1c2c6;
-  border-bottom: solid 1px #c1c2c6;
+  border-left: solid 0.1vw #302a2a;
+  border-top: solid 0.1vw #302a2a;
+  border-right: solid 0.1vw #c1c2c6;
+  border-bottom: solid 0.1vw #c1c2c6;
   border-radius: 1px;
   height: 100%;
 }
diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map
index 29146ed..36cb86e 100644
--- a/public/stylesheets/styles.css.map
+++ b/public/stylesheets/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ACXF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJrEF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;ACnEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC3KF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC7BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../sass/components/_buttons.scss","../../sass/base/_base.scss","../../sass/components/_layout.scss","../../sass/components/_instructions-panel.scss","../../sass/components/_borders.scss","../../sass/components/_display-text.scss","../../sass/components/_level-info.scss","../../sass/components/_screen-display.scss","../../sass/components/_video-screen.scss","../../sass/components/_control-panel.scss","../../sass/components/_output-display.scss","../../sass/components/_system-icons.scss","../../sass/components/_modal.scss","../../sass/components/_main-display.scss","../../sass/components/_power-screen.scss"],"names":[],"mappings":"AAkEQ;AClER;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;IACE;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC/BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;ACXF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJxFF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EAEE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAIF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AKtLF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;ACnEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC3DF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;ACtHF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;IACE;;EAEF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AC3KF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AC3BF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AC7BF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AC7CF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;ACxBF;EACE;;;ACDF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EAEE;;;AAGF;EACE;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EAEA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EAGE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/sass/base/_base.scss b/sass/base/_base.scss
index 38877bd..f881e12 100644
--- a/sass/base/_base.scss
+++ b/sass/base/_base.scss
@@ -4,6 +4,10 @@
   box-sizing: border-box;
 }
 
+html {
+  font-size: 16px;
+}
+
 html,
 body {
   margin: 0;
diff --git a/sass/components/_borders.scss b/sass/components/_borders.scss
index 5eb92aa..aaf90af 100644
--- a/sass/components/_borders.scss
+++ b/sass/components/_borders.scss
@@ -1,35 +1,54 @@
 .outer-edge__light {
-  border-left: solid 1px #585356;
-  border-top: solid 1px #585356;
-  border-right: solid 1px #c8c8c8;
-  border-bottom: solid 1px #c8c8c8;
+  border-left: solid .15vw #585356;
+  border-top: solid .15vw #585356;
+  border-right: solid .15vw #c8c8c8;
+  border-bottom: solid .15vw #c8c8c8;
   border-radius: 1px;
   background-color: #797979;
   height: 100%;
 }
 
+.outer-edge__light-buttons {
+  border-left: solid .1vw #585356;
+  border-top: solid .1vw #585356;
+  border-right: solid .1vw #c8c8c8;
+  border-bottom: solid .1vw #c8c8c8;
+  border-radius: 1px;
+  background-color: #797979;
+  height: 100%;
+}
+
+.inner-edge__light-buttons {
+  border-bottom: solid .15vw #4a4546;
+  border-right: solid .15vw #4a4546;
+  border-left: solid .15vw #c8c8c8;
+  border-top: solid .15vw #c8c8c8;
+  padding: .25vw;
+  height: 100%;
+}
+
 .inner-edge__light {
-  border-bottom: solid 2px #4a4546;
-  border-right: solid 2px #4a4546;
-  border-left: solid 2px #c8c8c8;
-  border-top: solid 2px #c8c8c8;
-  padding: 5px;
+  border-bottom: solid .2vw #4a4546;
+  border-right: solid .2vw #4a4546;
+  border-left: solid .2vw #c8c8c8;
+  border-top: solid .2vw #c8c8c8;
+  padding: .5vw;
   height: 100%;
 }
 
 .inner-edge__dark {
-  border-bottom: solid 2px #3F3D43;
-  border-right: solid 2px #3F3D43;
-  border-left: solid 2px #A7A8AE;
-  border-top: solid 2px #A7A8AE;
+  border-bottom: solid .2vw #3F3D43;
+  border-right: solid .2vw #3F3D43;
+  border-left: solid .2vw #A7A8AE;
+  border-top: solid .2vw #A7A8AE;
   height: 100%;
 }
 
 .outer-edge__dark {
-  border-left: solid 1px #302a2a;
-  border-top: solid 1px #302a2a;
-  border-right: solid 1px #c1c2c6;
-  border-bottom: solid 1px #c1c2c6;
+  border-left: solid .1vw #302a2a;
+  border-top: solid .1vw #302a2a;
+  border-right: solid .1vw #c1c2c6;
+  border-bottom: solid .1vw #c1c2c6;
   border-radius: 1px;
   height: 100%;
 }