Improve Styling

public/style.css

@@ -1,22 +1,54 @@
-#output-area {
-    border-right: 2px solid grey;
-    border-top: 1px solid grey;
-    border-bottom: 1px solid grey;
-    width: 30ch;
+body {
+    font-family: sans-serif;
 }
 
-#output-area:focus {
-    outline: none;
+.layer-0 {
+    background-color: #F2F4F6;
+}
+
+.layer-1 {
+    background-color: #F7F9FB;
+}
+
+.content {
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    margin-left: 1rem;
+    margin-right: 1rem;
+    border: 1px solid #dcd9e5;
+    border-radius: .5rem;
+}
+
+#output-area {
+    border-right: 2px solid #DCDBE6;
+    border-top: 1px solid #DCDBE6;
+    border-bottom: 1px solid #DCDBE6;
+    border-left: 1px solid #DCDBE6;
+    /* border-radius: .5rem; */
+
+    width: 30ch;
+
+    font-family: 'Courier New', Courier, monospace;
 }
 
 .gutter-row {
-    background-color: rgb(179, 179, 179);
+    background-color: #F2F4F6;
+    height: 4ch;
+    padding-right: 0.4rem;
+    padding-left: 2rem;
 }
 
 .output-row {
     display: flex;
+    background-color: white;
 }
 
 .strike {
     text-decoration: line-through;
+}
+
+.content-row {
+    padding-top: 0.1rem;
+    padding-left: .5rem;
 }