body {
	/* Gray */
	--gray-900: #1f2836;
	--gray-800: #27303e;
	--gray-800-rgb-components: 39, 48, 62;
	--gray-700: #3d4655;
	--gray-600: #555e6d;
	--gray-500: #6c7686;
	--gray-400: #818da1;
	--gray-300: #acb5c2;
	--gray-200: #ccd2db;
	--gray-100: #e4e7ed;
	--gray-50: #edf0f5;
	--gray-10: #f7f8fa;
	--gray-text: var(--gray-700, #5f6368);

	/* Blue */
	--blue-900: #00307d;
	--blue-800: #003994;
	--blue-700-rgb-components: 0, 70, 184;
	--blue-700: #0046b8;
	--blue-600: #0b59d6;
	--blue-500: #1b6ef3;
	--blue-400: #4c8df6;
	--blue-300: #7cacf8;
	--blue-200: #b8d3ff;
	--blue-100-rgb-components: 222, 234, 255;
	--blue-100: #deeaff;
	--blue-50: #f1f6fe;
	--blue-10: #fafbfc;
	--blue: var(--blue-500);

	/* Purple */
	--purple-500: #7c66f5;
	--purple-300: #dcd6ff;
	--purple-100: #f2f0ff;
	--purple-10: #f8f7ff;

	/* Pink */
	--pink-500: #e250d6;
	--pink-300: #ffddf8;
	--pink-100: #fff0fc;
	--pink-10: #fff7fd;

	/* Green */
	--green-500: #02a244;
	--green-300: #c2eece;
	--green-100: #e5faeb;
	--green-10: #f2fcf5;

	/* Other Colors */
	--orange: rgb(247, 170, 41);
	--red: #eb5757;

	--highlight: white;
	--text-color: black;
	--bg-color: white;

	--nav-highlight: #4285f4;
	--global-background: var(--gray-50);
	--situational-color: #cc18a5;
	--situational-background: #fff0fc;
	--situational-background-hover: #ffddf8;
	--situational-background-active: #e250d6;
	--background-color: #6b4cf6;
	--background-background: #f2f0ff;
	--background-background-hover: #dcd6ff;
	--background-background-active: #7c66f5;
	--technical-color: #008236;
	--technical-background: #e5faeb;
	--technical-background-hover: #c2eece;
	--technical-background-active: #02a244;
	--font-family: "Google Sans", sans-serif;
	--font-size: 42px;
	--line-height: 54px;
	--letter-spacing: -0.5px;
	--mdc-typography-font-family: var(--font-family);

	--gradient-stop-1: #46d2ff;
	--gradient-stop-2: #ff91c8;

	--gradient-stop-1-rgb-components: 70, 210, 255;
	--gradient-stop-2-rgb-components: 255, 145, 200;

	--background-gradient: linear-gradient(
		100.48deg,
		#46d2ff 2.52%,
		#ff91c8 124.46%
	);

	--card-shadow: rgb(120 130 135 / 30%) 0px 45px 50px -25px;
	--card-shadow-mobile: rgb(120 130 135 / 30%) 0px 30px 20px -25px;

	--topbar-height: 80px;
	--full-width: 100vw;

	margin: 0;
	font-family: var(--font-family);
	background-color: var(--global-background);
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
}

@media screen and (max-width: 600px) {
	body {
		--topbar-height: 64px;
	}
}