better notes

style.css

@@ -1,19 +1,21 @@
 body {
     font-family: sans-serif;
+    width: min-content;
+    margin: auto;
 }
 
 h1 {
     text-align: center;
-    margin: 0.5em;
+    margin: 1rem;
 }
 
 section, div, footer {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    row-gap: 0.5em;
-    column-gap: 0.5em;
-    margin: 0.8em auto;
+    row-gap: 0.5rem;
+    column-gap: 0.5rem;
+    margin: 0.8rem auto;
     justify-content: center;
     text-align: center;
 }
@@ -72,9 +74,9 @@ section, div, footer {
 }
 
 .grid input {
-    width: 1.5em;
-    height: 1.5em;
-    font-size: 1.5em;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.5rem;
     border: 0;
     padding: 0;
     text-align: center;
@@ -91,6 +93,7 @@ input::-webkit-calendar-picker-indicator {
 }
 .grid input:enabled {
     background: white;
+    color: darkblue;
 }
 .grid input:disabled, button:enabled {
     color: white;
@@ -110,17 +113,11 @@ input::-webkit-calendar-picker-indicator {
     color: #ffff99 !important;
     background: #00cc66 !important;
 }
-input::placeholder {
-    color: #888;
-}
-.grid input.ink-pen {
-    color: darkblue;
-}
-.grid input.pencil {
-    color: #888;
-    font-size: 0.8em;
-    width: 2.8em;
-    height: 2.8em;
+.grid input.pencil, input::placeholder {
+    color: #888 !important;
+    font-size: 1rem !important;
+    width: 2.5rem !important;
+    height: 2.5rem !important;
 }
 
 .highlight-buttons {
@@ -129,7 +126,7 @@ input::placeholder {
 button, input[type="color"] {
     border: 2px outset #6666ff;
     border-radius: 4px;
-    font-size: 1.2em;
+    font-size: 1.3rem;
     padding: 4px 9px 5px 9px;
     margin:  0px 1px 1px 1px;
 }
@@ -139,7 +136,6 @@ button:enabled:hover {
     padding: 5px 9px 5px 10px;
     margin:  1px 1px 1px 2px;
 }
-button:enabled:active,
 button.pressed:enabled:hover {
     border-width: 3px;
     border-style: inset;
@@ -152,11 +148,11 @@ button.pressed {
     padding: 4px 8px 4px 9px;
     margin:  1px 1px 0px 2px;
 }
-button.pressed:enabled:active {
-    border-width: 4px;
-    border-style: inset;
-    padding: 4px 4px 0px 9px;
-    margin:  0px 1px 0px 2px;
+button:enabled:active {
+    border-width: 4px !important;
+    border-style: inset !important;
+    padding: 4px 4px 0px 9px !important;
+    margin:  0px 1px 0px 2px !important;
 }
 button:disabled {
     color: #666;
@@ -165,6 +161,10 @@ button:disabled {
     padding: 5px 10px 6px 10px;
     margin:  0px 1px 1px 1px;
 }
+button.warning {
+    background: #ff5050;
+    border-color: #ff5050;
+}
 input[type="color"] {
     padding: 0;
 }
@@ -196,7 +196,7 @@ a {
     list-style-type: none;
     transition: all .3s ease;
     user-select: none;
-    font-size: 0.8em;
+    font-size: 1rem;
 }
 
 .context-menu li:hover {