Update style.css

style.css

@@ -1,25 +1,43 @@
 * {
     box-sizing: border-box;
-    padding: 0;
+    padding: 1rem;
     margin: 0;
-    font-family: sans-serif;
+    font-family: "Fira Code VF", monospace;
+    line-height: 1.5;
 }
 
 html,
 body {
+    margin: 0;
     height: 100%;
-}
-
-body {
-    padding: 32px;
+    padding: 0;
 }
 
 body,
 #container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
+    /* justify-content: center; */
+    /* align-items: left; */
+}
+
+a {
+    color: #F1678E;
+}
+
+p {
+    padding: 1rem;
+    float: left;
+}
+
+h1,h2,h3,h4,h5 {
+    color: #F1678E;
+    padding: 1rem;
+    float: left;
+}
+
+div {
+    padding: 0;
 }
 
 #container {
@@ -51,6 +69,10 @@ svg {
     pointer-events: none;
 }
 
+canvas {
+    display: block;
+}
+
 #example {
     font-size: 14px;
     text-decoration: underline;
@@ -73,4 +95,43 @@ svg {
     font-size: 12px;
     margin: -16px 0 0 -2px;
     padding: 1px;
+}
+
+input {
+    margin: 1rem;
+    font-size: 12pt;
+}
+
+button {
+    float: left;
+    font-size: 16px;
+    margin: 1rem;
+    padding: 1rem 2rem;
+    cursor: pointer;
+    border-radius: 4px;
+    border: 0;
+}
+
+#buttonsDiv {
+    float: left;
+}
+
+button:hover {
+    background-color: #e3e3e3;
+}
+
+button:active {
+    background-color: #d7d7d7;
+}
+
+button.submit {
+    background-color: #F1678E;
+}
+
+button.submit:hover {
+    background-color: #df5f83;
+}
+  
+button.submit:active {
+    background-color: #cb5677;
 }