Make some improvements to the CSS

Buttons/inputs/selects use the Coda font, and inputs
are more evenly sized

macrovision.css

@@ -104,6 +104,7 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     background: #444;
     overflow-x: hidden;
     overflow-y: auto;
+    width: 100%;
     height: 100%;
     scrollbar-color: #e1e1e1 #888;
 }
@@ -165,6 +166,7 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
 .options-row {
     position: relative;
     flex-direction: column;
+    flex-wrap: wrap;
     display: flex;
     text-align: center;
     align-items: center;
@@ -172,7 +174,6 @@ body.toggle-entity-glow .entity-box:not(.selected) > img{
     margin-right: auto;
     margin-top: 8px;
     margin-bottom: 8px;
-    max-width: 90%;
 }
 
 .options-row.full {
@@ -285,6 +286,11 @@ body.show-extra-options .options-block.options-block-optional {
     flex-direction: row;
 }
 
+.menubar-group button {
+    width: 48pt;
+    height: 48pt;
+}
+
 .popout-group {
     margin: 20px;
     display: flex;
@@ -331,22 +337,35 @@ select.menu-item {
 #options .options-banner {
     width: calc(100% - 20px);
 }
+
+input {
+    padding: 2px;
+}
+
+select {
+    padding: 2px;
+}
+
 .options-row .options-field-numeric {
-    flex: 1 1 100%;
-    max-width: 90%;
+    flex: 0 1 50%;
     font-size: 150%;
+    width: calc(90% - 12px);
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
 .options-row .options-field-text {
     flex: 1 0 90%;
-    max-width: 90%;
     font-size: 150%;
+    width: 90%;
 }
 
 .options-row .options-field-unit {
-    flex: 1 1 10%;
-    max-width: 90%;
+    flex: 0 1 50%;
     font-size: 150%;
+    width: 90%;
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
 .options-row .options-field-picker {
@@ -508,33 +527,6 @@ a {
     transition: 0s !important;
 }
 
-.corner-ribbon {
-  width: 200px;
-  background: #e43;
-  position: fixed;
-  top: 25px;
-  left: -50px;
-  text-align: center;
-  padding: 10px;
-  letter-spacing: 1px;
-  color: #f0f0f0;
-  transform: rotate(-45deg);
-  -webkit-transform: rotate(-45deg);
-}
-
-.corner-ribbon.bottom-right{
-    top: auto;
-    right: -50px;
-    bottom: 25px;
-    left: auto;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-  }
-
-a.corner-ribbon {
-    text-decoration: none;
-}
-
 input[type=checkbox] {
     transform: scale(2);
     margin-left: 10px;
@@ -647,6 +639,10 @@ i.far {
     font-size: 200%;
 }
 
+#entity-view option {
+    font-weight: normal;
+}
+
 #spawners > select,
 #spawners > button,
 #filters > select,
@@ -684,10 +680,11 @@ option.filtered {
 }
 
 .scroll-button {
+    transition: 0.2s;
     position: absolute;
     height: 20%;
     width: 50px;
-    font-size: 40px;
+    font-size: 28px;
     background: #ffffff33;
     border: 0px;
     z-index: 1002;
@@ -698,11 +695,15 @@ option.filtered {
 }
 
 .scroll-button:hover {
+    transition: 0.2s;
+    font-size: 32px;
     background: #ffffff44;
 }
 
 .scroll-button:disabled {
+    transition: 0s;
     background: #ffffff11;
+    font-size: 28px;
 }
 
 .ratio-info {

macrovision.js

@@ -632,7 +632,7 @@ function drawRulers() {
         ctx.moveTo(start.x, start.y);
         ctx.lineTo(end.x, end.y);
         ctx.lineWidth = 5;
-        ctx.strokeStyle = "#f2f";
+        ctx.strokeStyle = "#f8f";
         ctx.stroke();
         const center = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
         ctx.fillStyle = "#eeeeee";

reset.css

@@ -23,6 +23,15 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 }
+
+input, select {
+	margin: 0;
+	padding: 4px;
+	border-width: 1px;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {