
:root {
	/* color variables */
	--puma-black: #131516;
	--logo-signature-colors-maize: #ffcb05;
	--logo-signature-colors-blue: #00274c;
	--logo-signature-colors-white: #fff;
	--supporting-colors-tappan-red: #9a3324;
	--supporting-colors-ross-orange: #d86018;
	--supporting-colors-wave-field-green: #a5a508;
	--supporting-colors-rackham-roof-green: #75988d;
	--supporting-colors-taubman-teal: #00b2a9;
	--supporting-colors-arboretum-blue: #2f65a7;
	--supporting-colors-a2-amethyst: #702082;
	--supporting-colors-matthaei-violet: #575294;
	--neutral-colors-umma-tan: #cfc096;
	--neutral-colors-burton-tower-beige: #9b9a6d;
	--neutral-colors-angell-hall-ash: #989c97;
	--neutral-colors-law-quad-stone: #80764b;
	--neutral-colors-diag-m-metallic: #ae975b;
	--neutral-colors-puma-black: #131516;
	--_6-color-data-visualization-palette-tappan-red: #9a3324;
	--_6-color-data-visualization-palette-michigan-maize: #ffcb05;
	--_6-color-data-visualization-palette-michigan-blue: #00274c;
	--_6-color-data-visualization-palette-angell-hall-ash: #d86018;
	--_6-color-data-visualization-palette-a2-amethyst: #702082;
	--_6-color-data-visualization-palette-wave-field-green: #a5a508;
	--sequential-data-visualization-palettes-blue-blue: #00274c;
	--sequential-data-visualization-palettes-blue-blue-2: #2f4972;
	--sequential-data-visualization-palettes-blue-blue-3: #576e9a;
	--sequential-data-visualization-palettes-blue-blue-4: #7f95c4;
	--sequential-data-visualization-palettes-blue-blue-5: #a9bfef;
	--sequential-data-visualization-palettes-blue-blue-6: #d8edff;
	--sequential-data-visualization-palettes-maize-maize: #ffcb05;
	--sequential-data-visualization-palettes-maize-maize-2: #d0a200;
	--sequential-data-visualization-palettes-maize-maize-3: #a27c00;
	--sequential-data-visualization-palettes-maize-maize-4: #785700;
	--sequential-data-visualization-palettes-maize-maize-5: #523300;
	--sequential-data-visualization-palettes-maize-maize-6: #380900;
	--diverging-data-visualization-palette-maize: #ffcb05;
	--diverging-data-visualization-palette-maize-2: #ffde7c;
	--diverging-data-visualization-palette-maize-3: #ffefc1;
	--diverging-data-visualization-palette-blue-3: #aab0c0;
	--diverging-data-visualization-palette-blue-2: #2f4972;
	--diverging-data-visualization-palette-blue: #00274c;
	--greyscale-0: #fff;
	--greyscale-50: #f2f2f2;
	--greyscale-100: #e5e5e5;
	--greyscale-200: #ccc;
	--greyscale-300: #b2b2b2;
	--greyscale-400: #999;
	--greyscale-500: #808080;
	--greyscale-600: #666;
	--greyscale-700: #4d4d4d;
	--greyscale-800: #333;
	--greyscale-900: #1a1a1a;
	--greyscale-950: #0d0d0d;
	--social-media-logos-facebook: #0866ff;
	--social-media-logos-you-tube: #ff0302;
	--social-media-logos-linked-in: #0a66c2;
	--surface-default: var(--greyscale-0);
	--text-subtitle: var(--greyscale-600);
	--border-default: var(--sequential-data-visualization-palettes-maize-maize);
	--text-body: var(--greyscale-700);
	--text-title: var(--greyscale-950);

	/* string variables */
	--person-name: "Ben Smith";
	--username: "@benjismith";
	--ai-affiliation: "PHD Student";
	--special-interest: "Sustainability";
	--bio: "PhD Candidate in Computer Science @ University of Michigan 🎓 | Researching the intersection of natural language processing and human-centered AI — specifically how large language models encode social bias and what fairness actually looks like across diverse communities. Before Michigan, I studied Statistics and Linguistics at UCLA and spent time at Google DeepMind and the Allen Institute for AI. My work has been published at ACL, FAccT, and NAACL. I care deeply about building AI systems that work for people — not just most people. Always happy to connect with others working on responsible AI, NLP, or anything at the edge of tech and society. Go Blue! 〽️";
	--research-areas: "Sustainability";
	--experience-title-1: "Senior Product Designer";
	--experience-company-1: "Tech Innovations In";
	--experience-1-start-date: "Jan 2022";
	--experience-2-start-date: "Present";
	--experience-description-1: "Leading design initiatives for enterprise software products, managing a team of 5 designers.e";
	--sort-by: "Default";
	--person-pathway-type: "String value";
	--lab-name: "Test Lab";
	--lab-description: "String value";
	--search-input: "Search";
	--account-type: "AI Affiliated Student";
	--follow-button: "Default";
	--about-lab-title: "About the GEMS Lab";
	--research-title-1: "String value";
	--research-description-1: "String value";
	--research-title-2: "String value";
	--research-description-2: "String value";
	--looking-for: "Sponsors to help fund our research to acquire access to more researchers and NLP model access Part-time researchers to help us build more efficient models and advance natural language understanding";
	--group-name: "AI In Human Environments";
	--group-description: "For AI Network members doing research in AI in Human Environments.";
	--join-button: "Default";
	--about-group-title: "About the AI In Human Environments Group";
	--group-tag: "String value";
	--organized-by: "Christina Certo";
	--organized-by-2: "String value";
	--member-1: "John Smith";
	--member-2: "Jane Doe";
	--member-3: "Ben Smith";
	--style-heading: "Atkinson Hyperlegible";
	--style-body: "IBM Plex Sans";

	/* number variables */
	--lab-members: 0px;
	--lab-followers: 0px;
	--group-members: 18px;
	--page-max-width: 1280px;
	--page-vertical-gap: 64px;
	--gap-xs: 8px;
	--gap-s: 16px;
	--gap-m: 32px;
	--gap-l: 64px;
	--gap-xl: 128px;
	--card-corner-radius: 24px;
	--card-photo-radius: 12px;
	--card-width: 552px;
	--card-height: 0px;
	--card-max-width: 624px;
	--size-heading-h1: 72px;
	--size-heading-h2: 60px;
	--size-heading-h3: 48px;
	--size-heading-h4: 36px;
	--size-heading-h5: 28px;
	--size-heading-h6: 24px;
	--size-paragraph-p1: 24px;
	--size-paragraph-p2: 20px;
	--size-paragraph-p3: 14px;
	--size-label-l1: 28px;
	--size-label-l2: 24px;
	--size-label-l3: 20px;
	--size-button-b1: 28px;
	--size-button-b2: 24px;
	--size-button-b3: 20px;
	--line-height-heading-h1: 90px;
	--line-height-heading-h2: 75px;
	--line-height-heading-h3: 60px;
	--line-height-heading-h4: 45px;
	--line-height-heading-h5: 35px;
	--line-height-heading-h6: 30px;
	--line-height-paragraph-p1: 36px;
	--line-height-paragraph-p2: 30px;
	--line-height-paragraph-p3: 21px;
	--line-height-label-l1: 42px;
	--line-height-label-l2: 36px;
	--line-height-label-l3: 30px;
	--line-height-button-b1: 42px;
	--line-height-button-b2: 36px;
	--line-height-button-b3: 30px;

	/* responsive margins / paddings */
	--margin-sm: 16px;
	--margin-md: 32px;
}

html {
	height: 100%;
	font-size: 16px;
}



/* text utility classes */

.paragraph-p2 {
	font-size: 14px;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}

.desktop-body-medium2 {
	color: var(--text-body);
	font-size: 18px;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.444;
	letter-spacing: 0px;
}

.desktop-body-small {
	color: var(--text-title);
	font-size: 14px;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.429;
	letter-spacing: 0px;
}

.heading-h1 {
	color: var(--text-title);
	font-size: 28px;
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -1.39px;
}

.desktop-body-medium1 {
	color: var(--text-title);
	font-size: 18px;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	text-decoration: underline;
	line-height: 1.444;
	letter-spacing: 0px;
}

.heading-h2 {
	color: var(--text-title);
	font-size: 24px;
	font-family: 'Atkinson Hyperlegible';
	font-style: normal;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: -1.19px;
}

.paragraph-p1 {
	color: var(--text-title);
	font-size: 20px;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0px;
}



/* ui objects utility classes */

.card {
	box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	background-color: var(--logo-signature-colors-white);
	padding: 24px;
	border-radius: var(--card-corner-radius);
}

.input1 {
	width: 50px;
	border-radius: 50%;
}

.input2 {
	background-color: unset;
	padding: 11px 23px;
	border: 1px solid var(--text-title);
	border-radius: 100px;
}
