:root {
	--pink-a: #ff9ff3;
	--pink-b: #f368e0;
	--yellow-a: #feca57;
	--yellow-b: #ff9f43;
	--red-a: #ff6b6b;
	--red-b: #ee5253;
	--light-blue-a: #ee5253;
	--light-blue-b: #0abde3;
	--green-a: #1dd1a1;
	--green-b: #10ac84;
	--cyan-a: #00d2d3;
	--cyan-b: #01a3a4;
	--blue-a: #54a0ff;
	--blue-b: #2e86de;
	--purple-a: #5f27cd;
	--purple-b: #341f97;
	--grey-a: #c8d6e5;
	--grey-b: #8395a7;
	--dark-grey-a: hsl(211, 14%, 40%);
	--dark-grey-b: hsl(212, 29%, 19%);
	--dark-grey-c: hsl(212, 29%, 15%);
	--dark-grey-d: hsl(212, 14%, 10%);

	--foreground-color-a: #fff;
	--background-color-a: var(--dark-grey-b);
	--background-color-b: var(--dark-grey-c);
	--background-color-c: var(--dark-grey-d);

	--body-font-family: "Poppins", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
	--mono-font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
		monospace;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-Thin.ttf");
	font-weight: 100;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-ExtraLight.ttf");
	font-weight: 200;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-Light.ttf");
	font-weight: 300;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-Regular.ttf");
	font-weight: 400;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-SemiBold.ttf");
	font-weight: 500;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-Bold.ttf");
	font-weight: 600;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-ExtraBold.ttf");
	font-weight: 700;
}

@font-face {
	font-family: "Poppins";
	src: url("/public/media/fonts/Poppins/Poppins-Black.ttf");
	font-weight: 800;
}

html, body, #root {
	width: 100%;
	height: 100%;
}

html {
	overflow: hidden;
	background-color: var(--background-color-c);
}

body {
	margin: 0;
	font-family: var(--body-font-family);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	color: var(--foreground-color-a);
	box-sizing: border-box;
}

p, a, button, input, h1, h2, h3, h4, h5, h6 {
	font-family: var(--body-font-family);
	letter-spacing: 0.01rem;
}

code {
	font-family: var(--mono-font-family);
}

*::selection {
	color: var(--background-color-c);
	background-color: var(--grey-b);
}