:root {
	/* color variables */
	--black: #282828;
	--color-border: #dbdbdb;
	--color-surface-2: #fbf9f9;
	--border-border-devider: var(--colors-secondary-grey-200);
	--colors-secondary-grey-200: #e8e8e8;
	--text-text-primary: var(--colors-secondary-black);
	--colors-secondary-black: #262626;

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

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



/* text utility classes */

.subtitle {
	font-size: 40px;
	font-family: "Roboto", sans-serif;
	line-height: 1.2;
}

.sub-text {
	font-weight: 400;
}

.bold {
	font-weight: 700;
}



/* section utility classes */

.section-light {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fbf9f9;
	padding: 120px 24px;
}



/* button hover utility classes */

.hover-bright:hover {
	filter: brightness(1.2);
}