design

src/App.vue

@@ -78,9 +78,17 @@ html {
   background-color: #1e2341;
   color: white;
 
-  @media screen and (max-width: 600px) {
+  @media screen and (max-width: 700px) {
     font-size: calc(0.7vw + 0.7rem);
   }
+
+  font-size: 16px;
+}
+
+button,
+select,
+input {
+  font-size: inherit;
 }
 
 button {
@@ -91,10 +99,10 @@ button {
   background-color: #0066ff;
   color: white;
 
-  padding: 0.5rem 0.75rem;
-  margin: 0.5rem 0;
+  padding: 0.5em 0.5em;
 
   font-weight: bold;
+  font-size: 0.9em;
 
   cursor: pointer;
   transition: all 75ms;
@@ -103,8 +111,9 @@ button {
     outline: 1px solid gold;
   }
 
-  &:hover {
-    color: gold;
+  &:hover,
+  &:focus-visible {
+    background-color: lighten($color: #0066ff, $amount: 10%);
   }
 }