@font-face {
	font-family: "Plus Jakarta Sans";
	src: url("/resources/fonts/plusJakartaSans/PlusJakartaSans-VariableFont_wght.ttf");
}

@font-face {
	font-family: "Satoshi";
	src: url("/resources/fonts/satoshi/Fonts/Variable/Satoshi-Variable.ttf");
}

@font-face {
	font-family: "Fira Code";
	src: url("/resources/fonts/firaCode/FiraCode-VariableFont_wght.ttf");
}

:root {
	--background: #00060F;
	--accent: #194484;
	--secondary: #06162E;
	--tertiary: #3868b0;
	--text: #f5f6ff;
	--affirmative: #0fb200;
	--negative: #f12b2b;
}

header,
body {
	font-family: "Plus Jakarta Sans";
	color: var(--text) !important;
	background: var(--background);
	position: relative;
}

h1,
h2 {
	font-family: "Satoshi";
}

h1 {
	font-weight: medium;
}

h2 {
	font-family: "Plus Jakarta Sans";
	font-weight: bold;
}

h3 {
	font-family: "Fira Code";
	font-weight: bold;
}

.primary, .secondary {
	height: 70px;
	width: 225px;
	border-radius: 10px;
	font-family: "Plus Jakarta Sans";
	font-size: 27px;
	color: var(--text);
	border: none;
}

.primary {
	background: var(--accent);
}

.secondary {
	background: var(--secondary);
}

.bg {
	background: var(--background);
}

.radial {
	z-index: 0;
}

.radial-1000 {
	--size: 1000px;
	height: var(--size);
	width: var(--size);
	opacity: 30%;
	border-radius: 50%;
}

.accentRadial {
	background: radial-gradient(circle at center, var(--accent) 0%, var(--background) 80%);
}

button {
	cursor: pointer;
}

.hidden {
	display: none;
}

.negative {
	color: var(--negative);
}

.positive {
	color: var(--affirmative);
}