:root {
	--color-primary: #28252f;
	--color-secondary: #200074;
	--color-tertiary: #c03a37;

	--color-secondary-hover: #18044d;

	--main-weight: 700;
	--highlight-weight: 900;

	--container-width: 1200px;
}

* {
	font-weight: var(--main-weight);
	font-family: 'muli', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
	color: var(--color-primary);
	font-size: 18px;
}

html,
body {
	scroll-behavior: smooth;
	margin: 0;
	padding: 0;
	position: relative;
	overflow-x: hidden;
}

body > * {
	position: relative;
	overflow: hidden;
}

/*Breakpoints*/
/*@media only screen and (max-width: 600px) {}*/
/*@media only screen and (max-width: 768px) {}*/

@keyframes fadeInBackward {
	0% {
		opacity: 0;
		transform: scale(1.4);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeInForward {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes fadeInLeftLate {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	30% {
		opacity: 0;
		transform: translateX(-50px);
	}

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

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

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

@keyframes SlideInRight {
	0% {
		opacity: 0;
		transform: translateX(250px);
	}

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

@keyframes SlideInTop {
	0% {
		opacity: 0;
		transform: translateY(-250px);
	}

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