Vertical centering of busy image

htdocs/css/general.css

@@ -8,14 +8,10 @@
     src: url('../fonts/DroidSans.ttf') format("truetype");
 }
 
-.digital {
-    font-family: "Digital Sans EF Medium", sans-serif;
-}
-
 :root {
     --default-amount-color: #a5b3c0;
     --default-font-color: #c2c2c2;
-    --default-font-size: 2vw;
+    --default-font-size: 2.5vw;
     --default-header-color: #64aa82;
     --link-color: #436055;
     --link-font-size: 1.8vw;
@@ -23,6 +19,9 @@
     font-size: var(--default-font-size);
     background-color: black;
     color: var(--default-font-color);
+}
+
+html * {
     font-family: "DroidSans", sans-serif;
 }
 
@@ -41,25 +40,6 @@ body {
     height: 100vh;
 }
 
-h1 {
-    color: var(--default-header-color);
-    font-size: 3vw;
-    margin: 0;
-    padding-bottom: 5px;
-}
-
-h2 {
-    font-size: 3vw;
-    margin: 0;
-    padding: 0;
-}
-
-h3 {
-    font-size: 2vw;
-    padding: 0;
-    margin: 0;
-}
-
 a {
     font-size: var(--link-font-size);
 }
@@ -76,17 +56,92 @@ a:active {
     color: var(--link-color);
 }
 
+button {
+    background-color: #515151;
+    border: 1px solid #506b58;
+    color: white;
+    padding: 5px 15px;
+    margin: 0;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    cursor: pointer;
+    font-size: var(--default-font-size);
+    max-font-size: 18px;
+}
+
+button:hover {
+    background-color: #858595;
+}
+
 div {
     margin: 0;
     padding: 0;
+}  
+
+h1 {
+    color: var(--default-header-color);
+    font-size: 3vw;
+    margin: 0 0 5px;
+    padding: 0;
+}
+
+h2 {
+    font-size: 3vw;
+    margin: 0;
+    padding: 0;
 }
 
-p {
+h3 {
+    font-size: 2vw;
+    padding: 0;
     margin: 0;
+}
+
+input {
+    font-family: 'localFixed', monospace;
+    border: 1px solid #3b4b3d;
+    padding: 5px;
+    margin: 0;
+    background: rgba(64, 142, 62, 0.04);
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+    max-font-size: 18px;
+}
+
+p {
+    margin: 0 0 5px;
     padding: 0;
     font-size: var(--default-font-size);
 }
 
+select {
+    border: 1px solid #3b4b3d;
+    outline: 1px;
+    background: rgba(64, 142, 62, 0.04);
+    color: var(--default-font-color);
+    padding: 5px 15px;
+    height: 33px;
+    font-size: var(--default-font-size);
+    -webkit-appearance: none;
+    -webkit-user-select: none;
+}
+
+select option {
+    background: #222222;
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+}
+
+textarea {
+    font-family: monospace;
+    border: 1px solid #3b4b3d;
+    padding: 5px;
+    background: rgba(64, 142, 62, 0.04);
+    color: var(--default-font-color);
+    font-size: var(--default-font-size);
+}
+        
 .app-header {
     font-family: "Digital Sans EF Medium", sans-serif;
     color: var(--default-header-color);
@@ -98,6 +153,16 @@ p {
     padding-bottom: 5px;
 }
 
+.amount {
+    font-family: monospace;
+    font-size: var(--default-font-size);
+}
+
+.address {
+    font-family: monospace;
+    font-size: var(--default-font-size);
+}
+
 .box {
     margin-top: 0;
     margin-right: 10px;
@@ -108,6 +173,10 @@ p {
     border: 1px solid #484745;
 }
 
+.digital {
+    font-family: "Digital Sans EF Medium", sans-serif;
+}
+
 .hidden-element {
     display: none;
 }