@charset "utf-8";
/* CSS Document */

/*----- General Sans -----*/
@font-face{
	font-family: "GeneralSans";
	src:url("../fonts/GeneralSans-Variable.woff2") format("woff2"),
		url("../fonts/GeneralSans-Variable.woff") format("woff");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
	}
@font-face{
	font-family: "GeneralSans";
	src:url("../fonts/GeneralSans-VariableItalic.woff2") format("woff2"),
		url("../fonts/GeneralSans-VariableItalic.woff") format("woff");
	font-weight: 200 700;
	font-style: italic;
	font-display: swap;
	}

/*----- Clash Grotesk -----*/
@font-face{
	font-family: "ClashGrotesk";
	src:url("../fonts/ClashGrotesk-Variable.woff2") format("woff2"),
		url("../fonts/ClashGrotesk-Variable.woff") format("woff");
	font-weight: 200 700;
	font-display: swap;
	}

:root{
	--color-primary: #FFD100;
	--color-primary-strong: #665400;	
	--color-text: #FFFFFF;
	--color-text-inverse: #000000;
	--color-text-muted: #808080;
	--color-bg: #000000;
	--color-bg-inverse: #FFFFFF;
	--color-bg-muted: #808080;
	--color-border: #FFFFFF;
	--color-border-inverse: #FFFFFF;
	--color-border-muted: #808080;
	
	--font-family-heading: "ClashGrotesk", system-ui, sans-serif;
	--font-family-body: "GeneralSans", system-ui, sans-serif;
	
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;
	
	--font-h-xs-size: 1.25rem;     /* 20px */
  	--font-h-xs-line: 1.2;         /* 24 / 20 */
  	--font-h-xs-weight: var(--font-weight-medium);
	
	--font-h-sm-size: 1.5rem;      /* 24px */
  	--font-h-sm-line: 1.33;        /* 32 / 24 */
  	--font-h-sm-weight: var(--font-weight-medium);
	
	--font-h-md-size: 2rem;        /* 32px */
  	--font-h-md-line: 1.25;        /* 40 / 32 */
  	--font-h-md-weight: var(--font-weight-bold);
	
  	--font-h-lg-size: 2.5rem;      /* 40px */
  	--font-h-lg-line: 1.2;         /* 48 / 40 */
  	--font-h-lg-weight: var(--font-weight-bold);
	
  	--font-h-xl-size: 3.5rem;      /* 56px */
  	--font-h-xl-line: 1.14;        /* 64 / 56 */
  	--font-h-xl-weight: var(--font-weight-bold);

	--font-h-2xl-size: 4rem;       /* 64px */
  	--font-h-2xl-line: 1.25;       /* 80 / 64 */
  	--font-h-2xl-weight: var(--font-weight-bold);
	
	--font-b-sm-size: 1rem;   	   /* 16px */
  	--font-b-sm-line: 2;      	   /* 32 / 16 */
	
  	--font-b-md-size: 1.5rem; 	   /* 24px */
  	--font-b-md-line: 1.67;   	   /* 40 / 24 */
	
	--font-b-lg-size: 1.75rem;	   /* 28px */
  	--font-b-lg-line: 1.71;   	   /* 48 / 28 */
	
	--font-btn-size: 1.25rem;      /* 20px */
  	--font-btn-line: 1.6;          /* 32 / 20 */
  	--font-btn-weight: var(--font-weight-medium);
		
	--font-review-size: 1.375rem;  /* 22px */
	--font-review-line: 1.45;      /* 48 / 28 */
	
	--space-sm: 0.5rem;   		 /* 8px */
  	--space-md: 1rem;     		 /* 16px */
  	--space-lg: 1.5rem;   		 /* 24px */
  	--space-xl: 2rem;     		 /* 32px */
	--space-2xl: 2.5rem;     	 /* 40px */
  	--space-3xl: 3rem;    		 /* 48px */
	--space-4xl: 3.5rem;    	 /* 56px */
	--space-5xl: 4rem;    		 /* 64px */
	--space-6xl: 4.5rem;    	 /* 72px */
	--space-7xl: 5rem;    		 /* 80px */
	--space-8xl: 5.5rem;    	 /* 88px */
	--space-9xl: 6rem;    		 /* 96px */
	--space-10xl:6.5rem;    	 /* 104px */
	--space-11xl:7rem;    	 	 /* 112px */
	--space-12xl:7.5rem;    	 /* 120px */
	--space-13xl:8rem;    	 	 /* 128px */
	
  	--radius-sm:  0.5rem;   	 /* 8px */
  	--radius-md:  0.75rem;  	 /* 12px */
  	--radius-lg:  1rem;     	 /* 16px */
  	--radius-xl:  1.5rem;   	 /* 24px */
  	--radius-2xl: 2rem;     	 /* 32px */
  	--radius-3xl: 3rem;     	 /* 48px */
  	--radius-4xl: 4rem;     	 /* 64px */
	
	--container-main: 86.5rem;	 /* 1384px */
  	--container-narrow: 75.5rem; /* 1208px */
	--container-small: 64.5rem;  /* 64px */
	}

html{
	font-family: var(--font-family-body);
	font-weight: var(--font-weight-regular);
	}
body{
	margin: 0;
	color: var(--color-text);
	}
h1, h2, h3, h4, h5, h6{
	margin: 0;
	}
p{
	margin: 0;
}
ul{
	margin: 0;
	padding: 0;
	}
li{
	list-style-type:none;
	}
a{
	text-decoration:none;
	}
blockquote{
	margin: 0;
	}