color picker for custom colors

src/index.css

@@ -14,6 +14,10 @@
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
+
+	--size-20: 20px;
+	--size-24: 24px;
+	--size-32: 32px;
 }
 
 * {
@@ -33,7 +37,7 @@ a:hover {
 
 body {
 	margin: 0;
-	min-width: 700px;
+	min-width: 600px;
 	min-height: 100vh;
 }
 
@@ -67,7 +71,7 @@ button:focus-visible {
 	align-items: center;
 	justify-content: center;
 	gap: 8px;
-	padding: 24px 32px;
+	padding: var(--size-24) var(--size-32);
 	max-width: 1100px;
 	margin-left: auto;
 	margin-right: auto;
@@ -174,3 +178,12 @@ button:focus-visible {
 		min-width: 1000px;
 	}
 }
+
+@media screen and (max-width: 800px) {
+	:root {
+		font-size: 11px;
+		--size-20: 8px;
+		--size-24: 12px;
+		--size-32: 16px;
+	}
+}