2 files changed, 59 insertions, 56 deletions

diff --git a/src/app.css b/src/app.css
index 4ee2049d..13972546 100644
--- a/src/app.css
+++ b/src/app.css
@@ -11,6 +11,7 @@ details {
 	background-color: var(--base001);
 	padding: 1rem;
 	border-radius: 4px;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 summary {
@@ -39,6 +40,8 @@ select {
 	border-radius: 4px;
 	transform: translateY(0.175em);
 	place-content: center;
+	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -100,6 +103,7 @@ button {
 	border: none;
 	border-radius: 4px;
 	transition: background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 button:hover {
@@ -165,6 +169,7 @@ button:disabled:active {
 	background-color: var(--base001);
 	padding: 1rem;
 	border-radius: 4px;
+	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
 code {
@@ -210,3 +215,57 @@ li::marker {
 	flex-direction: column;
 	justify-content: center;
 }
+
+html {
+	transition: 300ms;
+}
+
+:root {
+	--base00: #f8f8f8;
+	--base001: #ffffff;
+	--base01: #e8e8e8;
+	--base02: #d8d8d8;
+	--base03: #b8b8b8;
+	--base04: #585858;
+	--base05: #383838;
+	--base06: #282828;
+	--base07: #181818;
+	--base08: #ab4642;
+	--base09: #dc9656;
+	--base0A: #f7ca88;
+	--base0B: #a1b56c;
+	--base0C: #86c1b9;
+	--base0D: #7cafc2;
+	--base0E: #ba8baf;
+	--base0F: #a16946;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--base00: #080808;
+		--base001: #0c0c0c;
+		--base01: #181818;
+		--base02: #282828;
+		--base03: #484848;
+		--base04: #a8a8a8;
+		--base05: #c8c8c8;
+		--base06: #d8d8d8;
+		--base07: #f8f8f8;
+		--base08: #9a4541;
+		--base09: #cb9555;
+		--base0A: #f6c987;
+		--base0B: #a0b45b;
+		--base0C: #85c0b8;
+		--base0D: #7baeb1;
+		--base0E: #b98aae;
+		--base0F: #a06845;
+	}
+}
+
+#mai {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	height: auto;
+	width: 10vh;
+}
diff --git a/src/app.html b/src/app.html
index 3616e3cb..663fd418 100644
--- a/src/app.html
+++ b/src/app.html
@@ -136,62 +136,6 @@
 			});
 		</script>
 
-		<style>
-			html {
-				transition: 300ms;
-			}
-
-			:root {
-				--base00: #f8f8f8;
-				--base001: #ffffff;
-				--base01: #e8e8e8;
-				--base02: #d8d8d8;
-				--base03: #b8b8b8;
-				--base04: #585858;
-				--base05: #383838;
-				--base06: #282828;
-				--base07: #181818;
-				--base08: #ab4642;
-				--base09: #dc9656;
-				--base0A: #f7ca88;
-				--base0B: #a1b56c;
-				--base0C: #86c1b9;
-				--base0D: #7cafc2;
-				--base0E: #ba8baf;
-				--base0F: #a16946;
-			}
-
-			@media (prefers-color-scheme: dark) {
-				:root {
-					--base00: #080808;
-					--base001: #0c0c0c;
-					--base01: #181818;
-					--base02: #282828;
-					--base03: #484848;
-					--base04: #a8a8a8;
-					--base05: #c8c8c8;
-					--base06: #d8d8d8;
-					--base07: #f8f8f8;
-					--base08: #9a4541;
-					--base09: #cb9555;
-					--base0A: #f6c987;
-					--base0B: #a0b45b;
-					--base0C: #85c0b8;
-					--base0D: #7baeb1;
-					--base0E: #b98aae;
-					--base0F: #a06845;
-				}
-			}
-
-			#mai {
-				position: fixed;
-				left: 0;
-				bottom: 0;
-				height: auto;
-				width: 10vh;
-			}
-		</style>
-
 		%sveltekit.head%
 	</head>