Basic introductions & questions

src/styles/global.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+@import "./breeze-icons.css";
+
+body {
+	--font-thai: "IBM Plex Sans Thai", "Noto Sans Thai";
+	font-family: Inter, var(--font-thai), var(--font-sans);
+	@apply dark:bg-slate-800 dark:text-gray-50;
+}
+
+@utility fill-screen-center {
+	@apply h-screen flex justify-center items-center flex-col;
+}
+
+@utility button {
+	@apply border border-gray-400 dark:border-gray-600 shadow rounded px-4 py-2 hover:border-sky-500 active:bg-sky-200 dark:active:bg-sky-700 transition-colors;
+}
+
+#archLogo {
+	background-image: url("/logos/archlinux-logo-dark-scalable.svg");
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	@apply h-10 w-full;
+}
+
+@media (prefers-color-scheme: dark) {
+	#archLogo {
+		background-image: url("/logos/archlinux-logo-light-scalable.svg");
+	}
+}