:root {
	--text-color: #bebbdd;
	--text-font: "Jost", sans-serif;
	--header-font: "Jost", sans-serif;
	--page-bg: rgb(16, 22, 35);
	--color-primary: #202b41;
	--border-color: rgb(53, 62, 82);
	--border-primary: solid thin var(--border-color);
	--text-size: 14pt;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: var(--text-color);
	font-family: var(--text-font);
	font-size: var(--text-size);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--header-font) !important;
}

h1 {
	font-size: 48px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

body {
	background-color: black;
	height: fit-content;
	overflow-x: hidden;
}

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: #2b3947;
}

::-webkit-scrollbar-thumb {
	background: #3c4f7c;
	border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
	background: #526ca8;
}

button {
	appearance: none;
	border: none;
	padding: 8px 32px;
	background-color: var(--color-primary);
	border: var(--border-primary);
	border-radius: 16px;
	cursor: pointer;
	transition: 0.2s ease-in-out filter;
}

button:hover {
	filter: brightness(1.1);
}

button:active {
	transition: 0.05s ease-in-out filter;
	filter: brightness(0.9);
}

.panel-blur {
	background: color-mix(in srgb, var(--color-primary), transparent 50%);
	border: var(--border-primary);
	border-radius: 16px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 0 48px 0 rgba(39, 56, 75, 0.5);
}

input[type="text"],
input[type="password"] {
	padding: 8px 16px;
	background-color: var(--color-primary);
	border: var(--border-primary);
	border-radius: 16px;
	color: var(--text-color);
}

input[type="text"]:focus,
input[type="password"]:focus {
	outline: solid 2px var(--text-color);
}
