:root{

	--mobile-treshold:					50rem;
	--color-background:					hsl(60, 100%, 97.8%);

	/* --color-accent: 					hsl(56, 100%, 50%);
	--color-accent-darker: 				hsl(56, 100%, 35%);
	--color-accent-lighter:				hsl(56, 100%, 75%); */

	/* --color-accent: 					hsl(207, 90%, 69%); */
	--color-accent: 					hsl(56, 100%, 50%);
	--color-accent-darker: 				hsl(56, 100%, 40%);
	--color-accent-lighter:				hsl(56, 100%, 60%);
	--color-accent-opacity:				56, 100%, 50%, 0.1;
	

	--color-contrast: 					hsl(213, 100%, 13%);
	--color-contrast-darker: 			hsl(213, 100%, 8%);
	--color-contrast-lighter: 			hsl(213, 100%, 28%);
	/* 1269b0 */

	/* --color-contrast: 					hsl(229, 100%, 30%);
	--color-contrast-darker: 			hsl(229, 100%, 15%);
	--color-contrast-lighter: 			hsl(229, 100%, 45%); */

	--color-accent-neutral: 			hsl(56, 100%, 85%);
	--color-primary-neutral-darker: 	hsl(56, 100%, 75%);
	--color-primary-neutral-lighter: 	hsl(56, 100%, 95%);

	--color-contrast-neutral: 			hsl(229, 100%, 85%);
	--color-contrast-neutral-darker: 	hsl(229, 100%, 75%);
	--color-contrast-neutral-lighter: 	hsl(229, 100%, 95%);

	--color-white: 						hsl(56, 0%, 100%);
	--color-white-darker: 				hsl(56, 0%, 80%);
	--color-white-darkest: 				hsl(56, 0%, 60%);
	--color-black: 						hsl(229, 0%, 0%);
	--color-black-lighter: 				hsl(229, 0%, 30%);
	--color-black-lightest: 			hsl(229, 0%, 60%);
	--color-black-opacity:				0, 100%, 0%, 0.1;

	--fontsize-000: 0.7rem; 			/* Text XS */
	--fontsize-100: 0.85rem; 			/* Text S */
	--fontsize-200: 1rem; 				/* Text M */
	--fontsize-300: 1.2rem;  			/* Text L */
	--fontsize-400: 1.4rem; 			/* Text XL */
	--fontsize-500: 1.6rem; 			/* Heading 5 */
	--fontsize-600: 1.8rem; 			/* Heading 4 */
	--fontsize-700: 2rem; 				/* Heading 3 */
	--fontsize-800: 2.2rem;				/* Heading 2 */
	--fontsize-900: 2.4rem; 			/* Heading 1 */

	--size-100: 0.6rem;
	--size-200: 0.7rem;
	--size-300: 0.8rem;
	--size-400: 1rem;
	--size-500: 1.3rem;
	--size-600: 1.6rem;
	--size-700: 2rem;
	--size-800: 2.5rem;
	--size-900: 3rem;

}

html, body, html * {



scroll-behavior: smooth;

}

body { 
	max-width: 1140px; 
	/* max-width: 80vw;  */
	margin: 0 auto !important; 
	float: none !important;

	/* System fonts */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-family: Arial, Helvetica, sans-serif;
	/* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
	/* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */
	/* font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; */
	/* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
	/* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
	/* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
	/* font-family: Verdana, Geneva, Tahoma, sans-serif; */
}




/* Fonts sizes */
.font-s {

  font-size: 	var(--fontsize-100);
  line-height: var(--size-500);

}

.font-m {
  font-size: 	var(--fontsize-200);
  line-height: var(--size-700);

}

.font-l {
  font-size: 	var(--fontsize-400);
  line-height: var(--size-700);
}

.font-xl {
	font-size: 	var(--fontsize-600);
	line-height: var(--size-800);
}

.font-ingress {

	font-style: italic;

}

.font-bold {

	font-style: bolder;

}


/* Heading sizes */
h1 {

	font-size: 	var(--fontsize-900);
	font-weight: bolder;
	line-height: var(--size-700);
	margin: 0 !important;
}

h2 {

	font-size: 	var(--fontsize-800);
	font-weight: bolder;
	line-height: var(--size-700);
	margin: 0 !important;
}

h3 {

	font-size: 	var(--fontsize-700);
	font-weight: bolder;
	line-height: var(--size-700);
	margin: 0 !important;
}

h4 {

	font-size: 	var(--fontsize-600);
	font-weight: bolder;
	line-height: var(--size-800);
	margin: 0 !important;
}

h5 {

	font-size: 	var(--fontsize-400);
	font-weight: bolder;
	line-height: var(--size-700);
}


/* button */

.button {
	cursor: pointer;
	text-decoration: none;
	border: 0;
	border-radius: 100vmax;
	padding: 1.25em 2.5em;
	font-weight: var(--fw-bold);
	font-size: var(--fs-button);
	line-height: 1;
	color: var(--color-white);
	background-color: var(--color-accent-darker);
	box-shadow: 0 1.125em 1em -1em var(--clr-accent-500);
  }
  
  .button[data-type="inverted"] {
	background-color: var(--clr-neutral-100);
	color: var(--clr-accent-400);
  }
  
  .button:hover,
  .button:focus-visible {
	background-color: var(--clr-accent-300);
  }
  
  .button[data-type="inverted"]:hover,
  .button[data-type="inverted"]:focus-visible {
	background-color: var(--clr-neutral-100);
	color: var(--clr-accent-300);
  }