@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


@font-face {
	font-family: 'Vanilla Ravioli';
	src: url('../fonts/vanillaravioli-demo.ttf');
}

html, body {
	display: flex;
	justify-content: center;
	font-family: "Vanilla Ravioli";
	background-color: var(--main-color);
	color: var(--dark-brown-color);
	-webkit-user-select: none; /* Chrome all / Safari all */
	-moz-user-select: none; /* Firefox all */
	-ms-user-select: none; /* IE 10+ */
	user-select: none;
	opacity: 0.99;
}

p, h3 {
	padding: 0;
	margin: 0;
}

i:hover {
	cursor: pointer;
}


::-webkit-scrollbar {
	height: 5px;
	width: 5px;
	padding: unset;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #555;
	border-radius: 7px;
	height: 1px;
}

.smooth-appear {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

	.smooth-appear.visible {
		opacity: 1;
	}


.left-arrow {
	width: 30px;
}

.hover-underline {
	position: relative;
	cursor: pointer;
}

	.hover-underline::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 0;
		height: 2px;
		background-color: var(--dark-brown-color);
		transition: width 0.3s ease;
		transform: translateX(-50%);
	}

	.hover-underline:hover::after {
		width: 100%;
	}

.move-right-arrow:hover img {
	animation: moveRight 0.4s forwards;
}

.modal-dialog {
	z-index: 1050 !important;
}

.modal-backdrop {
	z-index: 1040 !important;
}

.blazored-modal {
	padding: 0px !important;
}

.bm-header {
	align-items: center;
	padding: 1.5rem !important;
}

	.bm-header span {
		font-size: 2rem;
	}

@keyframes moveRight {
	0% {
		transform: translateX();
	}

	100% {
		transform: translateX(5px);
	}
}

@media(max-width: 768px) {
	.left-arrow {
		width: 20px;
	}
}


.slide-in {
	opacity: 0;
	transform: translateX(-1%);
	animation: slideIn 0.4s ease-out forwards;
}

@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(-1%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}