/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');
@font-face {font-family: Bebas Neue; src: url(../resources/fonts/BebasNeue-200.otf); font-weight: 200;}
@font-face {font-family: Bebas Neue; src: url(../resources/fonts/BebasNeue-300.otf); font-weight: 300;}
@font-face {font-family: Bebas Neue; src: url(../resources/fonts/BebasNeue-400.otf); font-weight: 400;}
@font-face {font-family: Bebas Neue; src: url(../resources/fonts/BebasNeue-700.otf); font-weight: 700;}

/* Root */
:root {

	/* Colors */
	--c-h: 235;
	--c-s: 10%;
	--c-bgr-h: var(--c-h);
	--c-bgr-s: 32%;
	--c-bgr-l: 5%;
	
	--c100: hsl(var(--c-h), 32%, 3.5%);
	--c200: hsl(var(--c-h), var(--c-s), var(--c-bgr-l));
	--c300: hsl(var(--c-h), var(--c-s), 19%);
	--c400: hsl(var(--c-h), var(--c-s), 24%);
	--c500: hsl(var(--c-h), var(--c-s), 35%);
	--c600: hsl(var(--c-h), var(--c-s), 50%);
	--c700: hsl(var(--c-h), var(--c-s), 70%);
	--c800: hsl(var(--c-h), var(--c-s), 85%);
	--c900: hsl(var(--c-h), var(--c-s), 95%);
	--c1000: #fff;

	--c-bgr: hsl(var(--c-bgr-h), var(--c-bgr-s), var(--c-bgr-l));

	--text-color-dark: var(--c600);
	--text-color: var(--c700);
	--title-color: #eee;

	--primary: #8F8FD6;
	--primary-hover: #6B6BA8;
	--primary-dark: #FF7200;

	/* Fonts */
	--font-main: 'Bebas Neue', sans-serif;
	--font-side: 'Montserrat', sans-serif;
	--font-text: 'Open Sans', sans-serif;

	/* Wraps */
	--wrap-width: 1200px;
	--wrap-padding: 2rem;

}

/* Colors */
h1,
h2,
h3,
h4 {
	color: var(--title-color);
}

body {
	background-color: var(--c-bgr);
	color: var(--text-color);
}