:root {
	/* Colors */
	--primary: rgb(0 0 83);
	--surface-tint: rgb(74 81 193);
	--on-primary: rgb(255 255 255);
	--primary-container: rgb(23 29 147);
	--on-primary-container: rgb(183 187 255);
	--secondary: rgb(88 91 135);
	--on-secondary: rgb(255 255 255);
	--secondary-container: rgb(209 210 255);
	--on-secondary-container: rgb(57 60 102);
	--tertiary: rgb(36 0 50);
	--on-tertiary: rgb(255 255 255);
	--tertiary-container: rgb(79 20 100);
	--on-tertiary-container: rgb(235 167 255);
	--error: rgb(186 26 26);
	--on-error: rgb(255 255 255);
	--error-container: rgb(255 218 214);
	--on-error-container: rgb(65 0 2);
	--background: rgb(251 248 255);
	--on-background: rgb(27 27 34);
	--surface: rgb(251 248 255);
	--on-surface: rgb(27 27 34);
	--surface-variant: rgb(227 225 241);
	--on-surface-variant: rgb(69 70 83);
	--outline: rgb(118 118 132);
	--outline-variant: rgb(198 197 213);
	--shadow: rgb(0 0 0);
	--scrim: rgb(0 0 0);
	--inverse-surface: rgb(48 48 55);
	--inverse-on-surface: rgb(242 239 249);
	--inverse-primary: rgb(191 194 255);
	--primary-fixed: rgb(224 224 255);
	--on-primary-fixed: rgb(0 0 110);
	--primary-fixed-dim: rgb(191 194 255);
	--on-primary-fixed-variant: rgb(49 55 168);
	--secondary-fixed: rgb(224 224 255);
	--on-secondary-fixed: rgb(20 23 63);
	--secondary-fixed-dim: rgb(193 195 245);
	--on-secondary-fixed-variant: rgb(64 67 109);
	--tertiary-fixed: rgb(250 215 255);
	--on-tertiary-fixed: rgb(51 0 69);
	--tertiary-fixed-dim: rgb(238 177 255);
	--on-tertiary-fixed-variant: rgb(103 45 124);
	--surface-dim: rgb(219 217 227);
	--surface-bright: rgb(251 248 255);
	--surface-container-lowest: rgb(255 255 255);
	--surface-container-low: rgb(245 242 252);
	--surface-container: rgb(239 236 247);
	--surface-container-high: rgb(233 231 241);
	--surface-container-highest: rgb(228 225 235);

	/* Validation colors */
	--valid:  #4cbd2c;
	--used: #ffcc00;
	--invalid: #ba1a1a;
}

* {
	box-sizing: border-box;
}

html,
body {
	position: absolute;
	width: 100%;
	height: 100%;
	font-family:
		'Roboto',
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		'Helvetica Neue',
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Segoe UI Symbol';
	box-sizing: border-box;
	color: var(--text-1);
	background-color: black;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

a {
	color: inherit;
	text-decoration: none;
}

label {
	display: block;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	-webkit-padding: 8px 0;
	padding: 8px;
	margin: 0px;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	font-family: inherit;
}

button {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	cursor: pointer;
	color: var(--text-1);
	font-family: inherit;
	background-color: transparent;
}

.shadow-small {
	box-shadow:
		0 0 4px 2px rgba(0, 0, 0, 0.2),
		0 3px 6px rgba(0, 0, 0, 0.3);
}

.shadow-medium {
	box-shadow:
		0 10px 20px 3px rgba(0, 0, 0, 0.2),
		0 6px 10px rgba(0, 0, 0, 0.3);
}

.shadow-large {
	box-shadow:
		0 19px 38px 6px rgba(0, 0, 0, 0.2),
		0 10px 16px rgba(0, 0, 0, 0.3);
}

.blur-background {
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.blur-card {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.truncate-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.grow {
	flex-grow: 1;
}

/* SCROLLBAR */
/* Width */
::-webkit-scrollbar {
	height: 4px;
	width: 4px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #f5f5f5;
	/* border-radius: 2px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #888;
	/* border-radius: 2px; */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #555;
}