@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;
}

a:not(.button) {
	@apply underline hover:dark:text-sky-200 hover:text-sky-900 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");
	}
}

details {
	@apply border dark:border-slate-700 border-gray-300 px-4 py-2 rounded mb-2;
}

dt {
	@apply font-bold;
}

dd {
	@apply pl-8 mb-4;
}