@tailwind base;
@tailwind components;
@tailwind utilities;

a {
	@apply text-neutral-300
		hover:text-neutral-200 hover:drop-shadow-[0_0px_10px_rgba(147,147,147,0.25)]
		active:text-neutral-50
		transition-all;
}

.navbar-base {
	@apply flex w-full h-fit px-6 py-4
		text-2xl font-bold bg-neutral-920 text-neutral-200 bg-opacity-80;
}

.navbar-logo {
	@apply w-full text-neutral-500 drop-shadow-[0_0px_10px_rgba(165,165,165,0.3)];
}

.navbar-end {
	@apply flex w-full justify-end;
}

.main-base {
	@apply grid flex-auto
		text-xl text-neutral-50;
}

.body-base {
	@apply flex flex-col h-screen w-screen bg-neutral-900 overflow-x-hidden;
}

.centered-container {
	@apply rounded-xl p-4 h-fit w-fit
		bg-neutral-920 bg-opacity-80
		text-center;
}

.button {
	@apply p-2 rounded-lg
		bg-neutral-900 hover:bg-neutral-800 active:bg-neutral-700 text-neutral-300
		hover:text-neutral-200 hover:drop-shadow-[0_0px_5px_rgba(147,147,147,0.05)]
		active:text-neutral-50
		transition-all
}

.sidepanel {
	@apply block fixed h-full w-1/4
		text-neutral-50 p-8 bg-neutral-920 opacity-95
		transition-all duration-300;
	left: -25%;
}

.footer-base {
	@apply fixed bottom-0 p-4
		opacity-70 text-neutral-50 drop-shadow-[0_0px_5px_rgba(0,0,0,1)];
}

.notification {
	@apply fixed w-fit h-fit p-2 m-8 my-24 right-0
		bg-opacity-50 rounded-xl font-bold text-xl bg-neutral-900 text-neutral-50
		backdrop-blur-sm drop-shadow-[0_0px_5px_rgba(0,0,0,0.5)]
		transition-all duration-200;
}

.notification-positive {
	@apply bg-lime-950 text-green-300;
}

.notification-negative {
	@apply bg-red-950 text-red-300;
}