Info updates, sidebar hide updates

src/css/App.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css?family=Courier+Prime:700|Rubik&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Courier+Prime:700|Asap|Roboto:700|Roboto|Ubuntu&display=swap");
 * {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -8,7 +8,7 @@
 }
 
 button {
-  font-family: "Rubik", sans-serif;
+  font-family: "Roboto", sans-serif;
   cursor: pointer;
 }
 
@@ -45,7 +45,7 @@ html, body {
           align-items: center;
   padding-left: 15px;
   background: #333;
-  font-family: "Rubik", sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 2.5em;
   color: #f1f1f1;
   z-index: 1000;
@@ -87,24 +87,41 @@ html, body {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: flex-start;
-  height: 100%;
-  min-width: 400px;
-  width: 400px;
+  height: calc(100% - 5em);
+  min-width: 500px;
+  width: 500px;
   margin-top: 50px;
   padding: 1.5em;
   position: fixed;
+  top: 0px;
   left: 0px;
+  z-index: 100;
   -webkit-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out;
-  z-index: 100;
 }
 
 #main-content .sidebar#left.hide {
   background: blue;
-  left: -360px;
+  left: -460px;
+}
+
+#main-content .sidebar#left #info {
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.5em;
+}
+
+#main-content .sidebar#left #info h3 {
+  font-family: "Roboto", sans-serif;
+  margin-top: 1em;
+  margin-bottom: 0.5;
+}
+
+#main-content .sidebar#left #info p {
+  margin-bottom: 10px;
 }
 
 #main-content .sidebar#right {
+  border: 1px solid green;
   background: #f1f1f1;
   -webkit-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
           box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.2);
@@ -118,14 +135,18 @@ html, body {
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
-  height: 100%;
+  height: calc(100% - 5em);
   min-width: 400px;
   width: 400px;
   padding: 1.5em;
+  padding-top: 70px;
+  top: 0px;
   margin-top: 50px;
   position: fixed;
   right: 0px;
   z-index: 100;
+  font-family: 'Roboto', sans-serif;
+  line-height: 1.5em;
   -webkit-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out;
 }
@@ -135,6 +156,33 @@ html, body {
   right: -360px;
 }
 
+#main-content .sidebar#right.hide #mainOptions, #main-content .sidebar#right.hide #legend {
+  opacity: 0%;
+}
+
+#main-content .sidebar#right.hide #settings {
+  -webkit-transform: rotateZ(270deg);
+          transform: rotateZ(270deg);
+}
+
+#main-content .sidebar#right #settings {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  position: absolute;
+  top: 10px;
+  left: 5px;
+  -webkit-transition: all 500ms ease-in-out;
+  transition: all 500ms ease-in-out;
+}
+
+#main-content .sidebar#right #settings i {
+  font-size: 2rem;
+}
+
 #main-content #main-interface {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -157,9 +205,10 @@ html, body {
 
 #footer {
   width: 100%;
+  height: 2em;
   padding: 0.3em;
   background: #333;
-  font-family: "Rubik", sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: 1em;
   color: #f1f1f1;
   z-index: 1000;
@@ -482,13 +531,13 @@ i[class*="ri-"] {
 }
 
 #challenge-overlay {
-  position: absolute;
+  position: fixed;
   display: inline-block;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 100;
+  z-index: 50;
   background: rgba(255, 255, 255, 0.3);
   display: -webkit-box;
   display: -ms-flexbox;
@@ -586,11 +635,9 @@ i[class*="ri-"] {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
-  border: 1px solid blue;
 }
 
 #challenge-overlay #challengeReady #challengeOptions .mode-picker {
-  border: 1px solid green;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -955,8 +1002,9 @@ i[class*="ri-"] {
 #morseHistory-textbox {
   background: #ddd;
   border-radius: 5px;
-  height: auto;
+  min-height: 1em;
   width: 90%;
+  padding: 0.5em;
   font-family: Courier;
   font-size: 1.5rem;
   display: -webkit-box;