From 4009d0de52bfc80e59d83bb7af6fbd2312a8e8b4 Mon Sep 17 00:00:00 2001
From: Max Stevenson <maxstevenson@msn.com>
Date: Wed, 2 Sep 2020 13:24:50 -0500
Subject: [PATCH] Continuation of responsive refactor.

---
 index.html                          | 12 ++++----
 public/stylesheets/styles.css       | 46 ++++++++++++++++-------------
 public/stylesheets/styles.css.map   |  2 +-
 sass/components/_borders.scss       | 24 +++++++--------
 sass/components/_control-panel.scss |  4 +++
 sass/components/_layout.scss        |  2 +-
 sass/components/_level-info.scss    | 15 +++++-----
 sass/components/_system-icons.scss  |  2 +-
 8 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index 9963972..799bf80 100644
--- a/index.html
+++ b/index.html
@@ -494,18 +494,18 @@
                         <p class="button-text__embossed small-button">glitches</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">maps</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">system</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">emerg.</p>
                       </div>
                     </div>
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index b3d3228..a5a3447 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -65,7 +65,7 @@ body {
 }
 
 #console-display {
-  flex: 0 0 70px;
+  flex: 0 0 calc(10% - .5vw);
 }
 
 #control-panel {
@@ -163,10 +163,10 @@ body {
 }
 
 .outer-edge__dark, .outer-edge__dark__no-right-edge {
-  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-left: solid 0.15vw #302a2a;
+  border-top: solid 0.15vw #302a2a;
+  border-right: solid 0.15vw #c1c2c6;
+  border-bottom: solid 0.15vw #c1c2c6;
   border-radius: 1px;
   height: 100%;
 }
@@ -211,19 +211,19 @@ body {
 }
 
 .outer-edge__console {
-  border-top: solid 1px #6A6767;
-  border-right: solid 1px #B1ABAB;
-  border-bottom: solid 1px #B1ABAB;
-  border-left: solid 1px #6A6767;
+  border-top: solid 0.1vw #6A6767;
+  border-right: solid 0.1vw #B1ABAB;
+  border-bottom: solid 0.1vw #B1ABAB;
+  border-left: solid 0.1vw #6A6767;
   border-radius: 1px;
   height: 100%;
 }
 
 .inner-edge__console {
-  border-top: solid 1px #EAE9E9;
-  border-right: solid 1px #A59B9A;
-  border-bottom: solid 1px #A59B9A;
-  border-left: solid 1px #EAE9E9;
+  border-top: solid 0.1vw #EAE9E9;
+  border-right: solid 0.1vw #A59B9A;
+  border-bottom: solid 0.1vw #A59B9A;
+  border-left: solid 0.1vw #EAE9E9;
   background-color: white;
   height: 100%;
 }
@@ -487,25 +487,26 @@ body {
 
 .room-info__container {
   background-color: #e2eb57;
-  padding: 3px;
+  padding: 2% 1%;
   display: flex;
   justify-content: space-evenly;
+  flex: 0 0 13%;
 }
 
 .room-info__level-display {
   display: flex;
+  flex: 1;
   flex-direction: column;
 }
 
 .room-info__level-text {
+  font-size: 1vw;
   color: white;
   background: black;
-  width: fit-content;
   padding: 1px 8px;
   text-align: center;
   margin-bottom: 2px;
   margin-top: 2px;
-  font-size: small;
 }
 
 .room-info__level-number {
@@ -522,7 +523,6 @@ body {
 
 .room-info__title-container {
   display: flex;
-  flex: 1;
   flex-direction: column;
   justify-content: space-between;
 }
@@ -532,9 +532,9 @@ body {
   background-color: black;
   text-align: center;
   font-style: italic;
-  margin: 2px 8px;
-  padding: 8px 0;
-  font-size: large;
+  margin: 0.1vw 0.5vw;
+  padding: 0.5vw 1.5vw;
+  font-size: 1.5vw;
 }
 
 .room-info__subtitle {
@@ -874,6 +874,10 @@ body {
   flex: 1;
 }
 
+.control-panel__output-display .inner-edge__light, .control-panel__output-display .inner-edge__light__no-padding {
+  padding: 0.25vw;
+}
+
 .output-display__wrapper {
   display: flex;
   flex-direction: column;
@@ -908,7 +912,7 @@ body {
 
 #system-icons__container {
   display: flex;
-  flex: 0 0 70px;
+  flex: 0 0 calc(10% + .6vw);
 }
 
 #system-icons__container > div, #system-icons__container > div > div {
diff --git a/public/stylesheets/styles.css.map b/public/stylesheets/styles.css.map
index cd979ba..40db7b5 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;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJ3HF;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;;;AAGF;EACE;EACA;;;AK3LF;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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AJ3HF;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;;;AAGF;EACE;EACA;;;AK3LF;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;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EAEA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AC5DF;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;;;AAGF;EACE;;;AC/BF;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/components/_borders.scss b/sass/components/_borders.scss
index c8e3ec5..0d717ec 100644
--- a/sass/components/_borders.scss
+++ b/sass/components/_borders.scss
@@ -53,10 +53,10 @@
 }
 
 .outer-edge__dark {
-  border-left: solid .1vw #302a2a;
-  border-top: solid .1vw #302a2a;
-  border-right: solid .1vw #c1c2c6;
-  border-bottom: solid .1vw #c1c2c6;
+  border-left: solid .15vw #302a2a;
+  border-top: solid .15vw #302a2a;
+  border-right: solid .15vw #c1c2c6;
+  border-bottom: solid .15vw #c1c2c6;
   border-radius: 1px;
   height: 100%;
 }
@@ -107,19 +107,19 @@
 }
 
 .outer-edge__console {
-  border-top: solid 1px #6A6767;
-  border-right: solid 1px #B1ABAB;
-  border-bottom: solid 1px #B1ABAB;
-  border-left: solid 1px #6A6767;
+  border-top: solid .1vw #6A6767;
+  border-right: solid .1vw #B1ABAB;
+  border-bottom: solid .1vw #B1ABAB;
+  border-left: solid .1vw #6A6767;
   border-radius: 1px;
   height: 100%;
 }
 
 .inner-edge__console {
-  border-top: solid 1px #EAE9E9;
-  border-right: solid 1px #A59B9A;
-  border-bottom: solid 1px #A59B9A;
-  border-left: solid 1px #EAE9E9;
+  border-top: solid .1vw #EAE9E9;
+  border-right: solid .1vw #A59B9A;
+  border-bottom: solid .1vw #A59B9A;
+  border-left: solid .1vw #EAE9E9;
   background-color: white;
   height: 100%;
 }
diff --git a/sass/components/_control-panel.scss b/sass/components/_control-panel.scss
index fd051c2..60cdf9a 100644
--- a/sass/components/_control-panel.scss
+++ b/sass/components/_control-panel.scss
@@ -26,4 +26,8 @@
 
 .control-panel__output-display {
   flex: 1;
+}
+
+.control-panel__output-display .inner-edge__light {
+  padding: 0.25vw;
 }
\ No newline at end of file
diff --git a/sass/components/_layout.scss b/sass/components/_layout.scss
index c2027af..4daa90e 100644
--- a/sass/components/_layout.scss
+++ b/sass/components/_layout.scss
@@ -31,7 +31,7 @@
 }
 
 #console-display {
-  flex: 0 0 70px;
+  flex: 0 0 calc(10% - .5vw);
 }
 
 #control-panel {
diff --git a/sass/components/_level-info.scss b/sass/components/_level-info.scss
index 8cff5a7..4597e11 100644
--- a/sass/components/_level-info.scss
+++ b/sass/components/_level-info.scss
@@ -1,24 +1,25 @@
 .room-info__container {
   background-color: #e2eb57;
-  padding: 3px;
+  padding: 2% 1%;
   display: flex;
   justify-content: space-evenly;
+  flex: 0 0 13%;
 }
 
 .room-info__level-display {
   display: flex;
+  flex: 1;
   flex-direction: column;
 }
 
 .room-info__level-text {
+  font-size: 1vw;
   color: white;
   background: black;
-  width: fit-content;
   padding: 1px 8px;
   text-align: center;
   margin-bottom: 2px;
   margin-top: 2px;
-  font-size: small;
 }
 
 .room-info__level-number {
@@ -35,7 +36,7 @@
 
 .room-info__title-container {
   display: flex;
-  flex: 1;
+  // flex: 0 0 75%;
   flex-direction: column;
   justify-content: space-between;
 }
@@ -45,9 +46,9 @@
   background-color: black;
   text-align: center;
   font-style: italic;
-  margin: 2px 8px;
-  padding: 8px 0;
-  font-size: large;
+  margin: .1vw .5vw;
+  padding: .5vw 1.5vw;
+  font-size: 1.5vw;
 }
 
 .room-info__subtitle {
diff --git a/sass/components/_system-icons.scss b/sass/components/_system-icons.scss
index 0fa073f..1e7c99d 100644
--- a/sass/components/_system-icons.scss
+++ b/sass/components/_system-icons.scss
@@ -1,6 +1,6 @@
 #system-icons__container {
   display: flex;
-  flex: 0 0 70px;
+  flex: 0 0 calc(10% + .6vw);
 }
 
 #system-icons__container > div, #system-icons__container > div > div {