/* 

--- 01 TYPOGRAPHY SYSTEM
	-FONT SIZE SYSTEM (px):
   14 / 16 / 18 / 24 / 56
  -FONT WEIGHTS:
   Medium - 500
   Bold - 700

  -LINE HEIGHTS:
   Default: 1
   Medium: 1.5   

--- 02 COLOURS
   Primary: 
    --red: #d73328ff
    --lime: #d7da2fff
		
   Neutral: 
    --white: hsl(0, 0%, 100%);
    --slate-100: hsl(202, 86%, 94%);
    --slate-300: hsl(203, 41%, 72%);
    --slate-500: hsl(200, 26%, 54%);
    --slate-700: hsl(200, 24%, 40%);
    --slate-900: hsl(202, 55%, 16%);
  
--- 07 WHITESPACE
  -SPACING SYSTEM (px):
   8 / 12 / 16 / 24 / 32 / 40
*/

/* CSS RESET */

:root {
	--red: #d73328ff;
	--lime: #d7da2f;
	--white: hsl(0, 0%, 100%);
	--slate-100: hsl(202, 86%, 94%);
	--slate-300: hsl(203, 41%, 72%);
	--slate-500: hsl(200, 26%, 54%);
	--slate-700: hsl(200, 24%, 40%);
	--slate-900: hsl(202, 55%, 16%);
}

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

html {
	font-size: 62.5%;
}

body {
	background-color: var(--slate-100);
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hidden {
	display: none;
}

/* TEXT */

a {
	color: var(--slate-700);
}

a:hover {
	color: var(--slate-900);
}

.text--bold {
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -1px;
}

.text--medium {
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0px;
}

.text--preset-1 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 5.6rem;
}

.text--preset-2 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 2.4rem;
}

.text--preset-3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 1.8rem;
}

.text--preset-4 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 1.6rem;
}

.text--preset-5 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 1.4rem;
}

.input-container-error {
	border: 1px solid var(--red);
}

.prefix-text-error {
	color: var(--white);
	background-color: var(--red);
}

.error-text {
	color: var(--red);
}

.radio-checked {
	background-color: rgba(216, 219, 47, 0.15);
	border: 1px solid #d7da2f;
}

.input-container-focus {
	border: 1px solid var(--lime);
}

.input-container-span-focus {
	background-color: var(--lime);
	color: var(--slate-900);
}

.btn {
	padding: 0 4rem;
	height: 5.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	border-radius: 10000rem;
	border: 1px solid #6b94a8;
	align-self: flex-start;
	background-color: var(--lime);
	color: var(--slate-900);
	border: none;
}

.btn:hover {
	cursor: pointer;
	background-color: rgba(215, 218, 47, 0.5);
}