@layer base {
	:root {
		--navbar-height: 6rem;
		--content-height: calc(100vh - var(--navbar-height));
	}

	main {
		margin-top: var(--navbar-height);
		height: 100%;
		padding-bottom: 6rem;
		overflow-x: hidden;
	}

	.navbar-drawer {
		height: var(--content-height);
	}

	[x-cloak] {
		display: none !important;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.animate-fade-in {
	opacity: 0;
	animation: fadeIn 1s ease-in forwards;
}

.animate-slide-in {
	opacity: 0;
	animation: slideIn 1s ease-out forwards;
}

.delay-300 {
	animation-delay: 300ms;
}

.delay-600 {
	animation-delay: 600ms;
}

.delay-900 {
	animation-delay: 900ms;
}