use input radio and checkbox instead of buttons

style.css

@@ -14,10 +14,17 @@ section, div, footer {
     flex-wrap: wrap;
     align-items: center;
     row-gap: 0.5rem;
-    column-gap: 0.5rem;
-    margin: 0.8rem auto;
     justify-content: center;
     text-align: center;
+    column-gap: 0.3rem;
+}
+
+section, footer {
+    margin: 0.8rem auto;
+}
+
+div {
+    margin: 0 auto;
 }
 
 .grid {
@@ -97,7 +104,9 @@ input::-webkit-calendar-picker-indicator {
     background: white;
     color: darkblue;
 }
-.grid input:disabled, button:enabled {
+.grid input:disabled,
+button:enabled,
+.tools input+label {
     color: white;
     background: #6666ff;
 }
@@ -111,7 +120,9 @@ input::-webkit-calendar-picker-indicator {
     color: #ffffaa;
     background: #6666ff;
 }
-.grid input.same-value:disabled, button.same-value:enabled {
+.grid input.same-value:disabled,
+button.same-value:enabled,
+.tools input:checked+label {
     color: #ffffaa !important;
     background: #00b359 !important;
 }
@@ -122,45 +133,51 @@ input::-webkit-calendar-picker-indicator {
     height: 2.5rem !important;
 }
 
-.select-buttons {
-    column-gap: 2px;
+.tools input {
+    display:none;
 }
-button, input[type="color"] {
+button,
+.tools input+label {
     border: 2px outset #6666ff;
     border-radius: 4px;
     font-size: 1.3rem;
     padding: 4px 9px 5px 9px;
     margin:  0px 1px 1px 1px;
 }
-button img {
+img {
     width: 16px;
     height: 16px;
 }
-button:enabled:hover {
+button:enabled:hover,
+.tools input:enabled:hover+label {
     border-width: 1px;
     border-style: outset;
     padding: 5px 9px 5px 10px;
     margin:  1px 1px 1px 2px;
 }
-button.pressed:enabled:hover {
+button.pressed:enabled:hover,
+.tools input:enabled:checked:hover+label {
     border-width: 3px;
     border-style: inset;
     padding: 4px 6px 2px 9px;
     margin:  1px 1px 1px 2px;
 }
-button.pressed {
+button.pressed,
+.tools input:checked+label {
     border: 2px inset #00b359;
     background: #00b359;
     padding: 4px 8px 4px 9px;
     margin:  1px 1px 0px 2px;
 }
-button:enabled:active {
+button:enabled:active,
+.tools input:enabled:active+label {
     border-width: 4px !important;
     border-style: inset !important;
     padding: 4px 4px 0px 9px !important;
     margin:  0px 1px 0px 2px !important;
 }
-button:disabled {
+button:disabled,
+.tools input:disabled+label {
     color: #666;
     background: darkgrey;
     border: 1px outset darkgrey;
@@ -171,9 +188,6 @@ button.warning {
     background: #ff5050;
     border-color: #ff5050;
 }
-input[type="color"] {
-    padding: 0;
-}
 
 a {
     text-decoration: none;