:root {
	--primary: #242822;
	--primary-text: #FFFFFF;
	--primary-text-shadow: #5A7642;
	--primary-text-epic:
		-4px 0px 1.5px var(--primary-text-shadow),
		4px 0px 1.5px var(--primary-text-shadow),
		0px -4px 1.5px var(--primary-text-shadow),
		0px 4px 1.5px var(--primary-text-shadow),
		2.8px 2.8px 1.5px var(--primary-text-shadow),
		-2.8px 2.8px 1.5px var(--primary-text-shadow),
		2.8px -2.8px 1.5px var(--primary-text-shadow),
		-2.8px -2.8px 1.5px var(--primary-text-shadow);
	--secondary: #DCDAB6;
	--secondary-dark: #B2B489;
	--tertiary: #5A7642;
	--tertiary-dark: #475F32;
	--tertiary-text: #C0BB91;
	--tertiary-text-hover: #FFFFFF;
	--quaternary: #000800;
	--quaternary-text: #FFFFFF;
}

body {
	margin: 0;
	background-color: var(--quaternary);
	font-family: "cr";
}
p {
	margin: 0;
}
a {
	text-decoration: none;
}
.epic {
	text-shadow: var(--primary-text-epic);
}

@font-face {
	src: url("/src/font/chinese rocks rg.otf") format("opentype");
	font-family: "cr";
}
@font-face {
	src: url("/src/font/Lato-Regular.ttf");
	font-family: "lato";
}


/* Define the scrollbar track */
::-webkit-scrollbar {
	width: 12px; /* Set the width of the scrollbar */
	background-color: var(--secondary);
}
  
/* Define the scrollbar thumb */
::-webkit-scrollbar-thumb {
	background-color: var(--tertiary); /* Set the color of the scrollbar thumb */
	border-radius: 6px; /* Round the corners of the thumb */
}

/* Define the scrollbar track when it's hovering */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--tertiary-dark); /* Change the color on hover if desired */
}