Add scrolling to CSS, keep text within 2em padding

css/style.css

@@ -1,40 +1,38 @@
 * {
-  font-family: 'Courier New', Courier, Monospace;
   color: #DDD;
+  font-family: 'Courier New', Courier, Monospace;
 }
 
-html, body, div.container {
+html, body,
+div.container,
+div.console-outer,
+div.console-inner {
   height: 100%;
 }
 
-body {
-  background: #191919;
-}
+body { background: #191919; }
 
-div.console {
-  overflow-y: hidden;
-  height: 90%;
-}
+div.console-inner { overflow-y: auto; }
 
-@media (max-width: 550px) {
+@media (max-width: 549px) {
   div.container {
-    padding: 0.4rem;
     margin: 0px;
+    padding: 0.4rem;
   }
 }
 
 @media (min-width: 550px) {
-  body {
-    background: #222;
-  }
+  body { background: #222; }
 
-  div.console {
-    height: 80%;
+  div.container { padding-top: 2rem; }
+
+  div.console-outer {
     background: #191919;
+    height: 80%;
     padding: 2rem;
   }
 
-  div.container {
-    padding-top: 2rem;
-  }
+  ::-webkit-scrollbar { width: 12px; }
+  ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); }
+  ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.5); }
 }

index.html

@@ -20,7 +20,9 @@
     <!-- Primary Page Layout
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <div class='container'>
-      <div class='console'><terminal shell='pgsh'></terminal></div>
+      <div class='console-outer'>
+        <div class='console-inner'><terminal shell='pgsh'></terminal></div>
+      </div>
     </div>
 
     <!-- Scripts