1 files changed, 121 insertions, 0 deletions
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..6ca536b
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,121 @@
+html {
+	font-family: sans-serif;
+	background-color: var(--background-color);
+	color: var(--text-color);
+	--radius-1: 0.32rem;
+	--background-color: hsl(0, 0%, 100%);
+	--text-color: hsl(0, 0%, 0%);
+	--link-color: hsl(320, 50%, 36%);
+	--light-text-color: hsl(0, 0%, 45%);
+	--darker-border-color: hsl(0, 0%, 72%);
+	--lighter-border-color: hsl(0, 0%, 85%);
+	--text-decoration-color: hsl(0, 0%, 72%);
+	--darker-box-background-color: hsl(0, 0%, 92%);
+	--lighter-box-background-color: hsl(0, 0%, 95%);
+	--primary-color: hsl(320, 50%, 36%);
+	--primary-color-contrast: hsl(320, 0%, 100%);
+	--danger-color: #ff0000;
+	--danger-color-contrast: #ffffff;
+}
+
+@media (prefers-color-scheme: dark) {
+	html {
+		--background-color: hsl(0, 0%, 0%);
+		--text-color: hsl(0, 0%, 100%);
+		--link-color: hsl(320, 50%, 76%);
+		--light-text-color: hsl(0, 0%, 78%);
+		--darker-border-color: hsl(0, 0%, 35%);
+		--lighter-border-color: hsl(0, 0%, 25%);
+		--text-decoration-color: hsl(0, 0%, 30%);
+		--darker-box-background-color: hsl(0, 0%, 20%);
+		--lighter-box-background-color: hsl(0, 0%, 15%);
+	}
+}
+
+body {
+	margin: 0;
+	padding: 1rem;
+}
+
+main {
+	max-width: 720px;
+	margin: 0 auto;
+}
+
+*:focus-visible {
+	outline: 1.5px var(--primary-color) solid;
+}
+
+section {
+	margin: 0;
+}
+
+label {
+	display: block;
+	font-style: italic;
+	margin-top: 1rem;
+	margin-bottom: 0.5rem;
+}
+
+h1 {
+	margin-top: 0;
+}
+
+p, summary {
+	line-height: 1.2;
+	font-size: 1rem;
+}
+
+a {
+	color: var(--link-color);
+	text-decoration-color: var(--text-decoration-color);
+}
+
+input[type="text"] {
+	font-family: monospace;
+	font-size: 1rem;
+	background-color: var(--lighter-box-background-color);
+	color: var(--text-color);
+	width: 100%;
+	padding: 0.5rem;
+	border-radius: var(--radius-1);
+	border: none;
+	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
+	margin-bottom: 1rem;
+	box-sizing: border-box;
+}
+
+input[type="submit"] {
+	padding: 0.5rem 1rem;
+	background-color: var(--primary-color);
+	color: var(--primary-color-contrast);
+	border: none;
+	border-radius: var(--radius-1);
+	cursor: pointer;
+}
+
+input[readonly] {
+	background-color: var(--lighter-box-background-color);
+	color: var(--text-color);
+	cursor: text;
+}
+
+details {
+	margin-top: 2rem;
+	background-color: var(--lighter-box-background-color);
+	padding: 0.5rem;
+	border-radius: var(--radius-1);
+	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+pre {
+	overflow-x: auto;
+	display: block;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+#solver_status {
+	color: var(--light-text-color);
+	margin-top: 1rem;
+}