Finesse some visuals

src/parts/_forms.css

@@ -3,7 +3,8 @@ select,
 input[type='submit'],
 input[type='button'],
 input[type='checkbox'],
-input[type='range'] {
+input[type='range'],
+input[type='radio'] {
   cursor: pointer;
 }
 
@@ -28,6 +29,16 @@ select {
   outline: none;
 }
 
+input,
+label {
+  vertical-align: top;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 4px;
+}
+
 input:not([type='checkbox']):not([type='radio']),
 input[type='range'],
 select,
@@ -103,7 +114,7 @@ fieldset {
   border: 1px var(--focus) solid;
   border-radius: 6px;
   margin: 0;
-  margin-bottom: 6px;
+  margin-bottom: 12px;
   padding: 10px;
 }
 

src/parts/_misc.css

@@ -14,10 +14,15 @@ table {
   width: 100%;
 }
 
+table caption {
+  text-align: left;
+}
+
 td,
 th {
   padding: 6px;
   text-align: left;
+  vertical-align: top;
 }
 
 thead {
@@ -94,8 +99,11 @@ summary::-webkit-details-marker {
 }
 
 footer {
-  border-top: 1px solid var(--background);
+  border-top: 1px solid var(--border);
   padding-top: 10px;
-  font-size: 0.8em;
   color: var(--text-muted);
 }
+
+body > footer {
+  margin-top: 40px;
+}

src/variables-dark.css

@@ -2,13 +2,13 @@
   --background-body: #202b38;
   --background: #161f27;
   --background-alt: #1a242f;
-  --selection: #161f27;
+  --selection: #1c76c5;
   --text-main: #dbdbdb;
   --text-bright: #fff;
   --text-muted: #717880;
   --links: #41adff;
   --focus: #0096bfab;
-  --border: #dbdbdb;
+  --border: #526980;
   --code: #ffbe85;
   --animation-duration: 0.1s;
   --button-hover: #324759;