/* 

--- 01 TYPOGRAPHY SYSTEM
	-FONT SIZE SYSTEM (px):
	10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

  -FONT WEIGHTS:
	Medium: 500
	Bold: 700
	Extra-Bold: 800

  -LINE HEIGHTS:
  Default: 1
	Medium: 1.3

--- 02 COLOURS
  -Primary: 
    - Light red: hsl(0, 100%, 67%)
    - Orangey yellow: hsl(39, 100%, 56%)
    - Green teal: hsl(166, 100%, 37%)
    - Cobalt blue: hsl(234, 85%, 45%)
	
	-Neutral:
		- White: #ffffff
		- Pale blue: #ebf1ff
		- Light lavender: #c8c7ff
		- Dark gray blue: hsl(224, 30%, 27%)

	-Gradients:
		- Light slate blue (background): hsl(252, 100%, 67%)
		- Light royal blue (background): hsl(241, 81%, 54%)

		- Violet blue (circle): hsla(256, 72%, 46%, 1)
		- Persian blue (circle): hsla(241, 72%, 46%, 0)

--- 05 SHADOWS
		 

--- 06 BORDER-RADIUS
		Small: 12px
		Big: 32px

--- 07 WHITESPACE
  -SPACING SYSTEM (px):
	2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/*******************************/
/*          VARIABLES          */
/*******************************/

:root {
	--project-background: hsl(221, 100%, 96%);
	--button-background-color: hsl(224, 30%, 27%);

	--result-container-linear-gradient: linear-gradient(
		hsl(252, 100%, 67%),
		hsl(241, 81%, 54%)
	);
	--circle-linear-gradient: linear-gradient(
		hsl(252, 100%, 67%),
		hsl(241, 81%, 54%)
	);

	--reaction-item-background-color: #fff6f6;
	--reaction-item-text-color: hsl(0, 100%, 67%);
	--memory-item-background-color: #fffbf4;
	--memory-item-text-color: hsl(39, 100%, 56%);
	--verbal-item-background-color: #f2fcf9;
	--verbal-item-text-color: hsl(166, 100%, 37%);
	--visual-item-background-color: #f3f4fd;
	--visual-item-text-color: hsl(234, 85%, 45%);
}

/*******************************/
/*           RESETS            */
/*******************************/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	height: 100vh;
	font-family: 'Hanken Grotesk', sans-serif;
	font-weight: 400;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background-color: var(--project-background);
}

/************************************************/
/*          GENERAL REUSABLE COMPONENTS         */
/************************************************/

.text-preset-1--extra-bold {
	font-size: 7.2rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}

.text-preset-2--extra-bold {
	font-size: 5.6rem;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
}

.text-preset-3--bold {
	font-size: 3.2rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.text-preset-4--bold {
	font-size: 2.4rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.text-preset-5--bold {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.text-preset-5--medium {
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
}

.text-preset-6--bold {
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

.text-preset-6--medium {
	font-size: 1.6rem;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.3;
}

.btn:link,
.btn:visited {
	display: inline-block;
	background-color: var(--button-background-color);
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 1.65rem;
	border-radius: 128px;
}

.btn:hover,
.btn:active {
	background-image: var(--circle-linear-gradient);
}

.grid {
	display: grid;
}

.grid--2-cols {
	grid-template-columns: repeat(2, 1fr);
}

.reaction {
	background-color: var(--reaction-item-background-color);
	color: var(--reaction-item-text-color);
}

.memory {
	background-color: var(--memory-item-background-color);
	color: var(--memory-item-text-color);
}

.verbal {
	background-color: var(--verbal-item-background-color);
	color: var(--verbal-item-text-color);
}

.visual {
	background-color: var(--visual-item-background-color);
	color: var(--visual-item-text-color);
}