@import "https://www.nerdfonts.com/assets/css/webfont.css";
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
@import "tailwindcss";

:root {
	@apply bg-gray-950 font-[Sour_Gummy] text-white;
}

.btn {
	@apply flex cursor-pointer items-center gap-1 rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:shadow-lg;

	&.compact {
		@apply px-1 py-0.5;
	}

	&.circular {
		@apply rounded-full;
		&.compact {
			@apply px-0.75 py-0.75;
		}
	}

	&.dull {
		@apply border-gray-700 bg-transparent text-gray-700 hover:bg-gray-700 hover:text-white;
	}

	&.green {
		@apply bg-green-600 hover:bg-green-500;
	}
}

.card {
	@apply cursor-pointer rounded border-2 border-gray-700 bg-gray-800 p-4 shadow-[4px_4px_0px_0px_white] transition-all hover:-translate-0.5 hover:shadow-[6px_6px_0px_0px_white] active:translate-0.5 active:shadow-[2px_2px_0px_0px_white];
}