@import '@fortawesome/fontawesome-free/css/all.css';

@font-face {
	font-family: "IBM Plex Sans";
	src: url("../assets/fonts/IBMPlexSans/IBMPlexSans-Thin.ttf");
}

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

html, body {
	@apply h-full;
}

.fade-enter-active, .fade-leave-active {
	transition: opacity 0.15s;
}
.fade-enter-from, .fade-leave-to {
	opacity: 0;
}

.slide-enter-active, .slide-leave-active {
	transform: none;
	opacity: 1.0;
	transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.slide-enter-from, .slide-leave-to {
	opacity: 0;
	transition: opacity 0.15s ease-in-out, transform 0.5s cubic-bezier(0.4, 0.0, 1, 1);
	transform: translateY(10%);
}

.slide-left-enter-active, .slide-left-leave-active {
	transform: none;
	transition: transform 0.25s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.slide-left-enter-from, .slide-left-leave-to {
	transition: transform 0.25s cubic-bezier(0.4, 0.0, 1, 1);
	transform: translateX(-100%);
}

.modal {
	@apply fixed inset-0 flex flex-col h-screen;
	background: rgba(0, 0, 0, 0.5);
}
