@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700;800&display=swap');

html,
body,
body * {
	font-family: 'Almarai', sans-serif !important;
}

body {
	font-weight: 800;
}

@media (max-width: 760px) {
	h1,
	.sp-h1,
	.auth-title {
		font-size: 1.8rem !important;
		line-height: 1.3 !important;
	}

	h2,
	.sp-h2,
	.sp-ribbon,
	.sp-modal__title,
	.card-title {
		font-size: 1.25rem !important;
		line-height: 1.35 !important;
	}

	h3,
	h4 {
		font-size: 1.05rem !important;
		line-height: 1.4 !important;
	}

	.sp-btn,
	.btn,
	button {
		font-size: 1rem !important;
	}

	small,
	.sp-chip,
	.sp-count,
	.sp-row__sub,
	.sp-panel__sub,
	.sp-stat__hint,
	.sp-time,
	.sp-pill,
	.sp-xp,
	.sp-streak {
		font-size: .82rem !important;
		line-height: 1.45 !important;
	}

	input:not([type="checkbox"]):not([type="radio"]),
	select,
	textarea {
		font-size: 16px !important;
	}

	.spark-nav-link,
	.topnav a {
		font-size: .8rem !important;
	}
}

@media (max-width: 420px) {
	h1,
	.sp-h1,
	.auth-title {
		font-size: 1.6rem !important;
	}

	h2,
	.sp-h2,
	.sp-ribbon,
	.sp-modal__title,
	.card-title {
		font-size: 1.15rem !important;
	}

	h3,
	h4 {
		font-size: 1rem !important;
	}
}