@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
	--white: #fff;
	--light-grey: #f2f8f8;
	--medium-light-grey: #d6e1e6;
	--medium-grey: #c2cfd6;
	--dark-grey: #5c6a70;
	--dark: #192023;
	--accent-green: #1bf08c;
	--accent-yellow: #ffc847;
	--light-teal: #d8fffc;
	--light-green: #b9ffcd;
	--medium-light-green: #8be4ae;
	--medium-green: #309d70;
	--medium-dark-green: #015e49;
	--dark-green: #02372b;
}

:root {
	--font-family: "Figtree", sans-serif;
}

html {
	scroll-behavior: smooth;
}

.animate {
	opacity: 0;
	transform: translate(0, 0);
	visibility: hidden;
}

.from-right {
	transform: translateX(50px);
}

.from-left {
	transform: translateX(-50px);
}

.from-top {
	transform: translateY(-50px);
}

.from-bottom {
	transform: translateY(50px);
}

.fade-in {
	transform: none;
}