@import url(../fonts/loader.css);

:root {
	--text-50: #0a0b0d;
	--text-100: #14151a;
	--text-200: #282b33;
	--text-300: #3c404d;
	--text-400: #505666;
	--text-500: #646b80;
	--text-600: #838999;
	--text-700: #a3a7b3;
	--text-800: #c2c5cc;
	--text-900: #e1e2e6;
	--text-950: #f0f1f2;

	--background-50: #0a0d12;
	--background-100: #141a23;
	--background-200: #283447;
	--background-300: #3c4e6a;
	--background-400: #50688e;
	--background-500: #6482b1;
	--background-600: #839bc1;
	--background-700: #a3b5d0;
	--background-800: #c2cee0;
	--background-900: #e1e7ef;
	--background-950: #f0f3f7;

	--primary-50: #0d0f14;
	--primary-100: #1a1e29;
	--primary-200: #343c51;
	--primary-300: #4e5a7a;
	--primary-400: #6878a2;
	--primary-500: #8296cb;
	--primary-600: #9babd5;
	--primary-700: #b5c0e0;
	--primary-800: #ced5ea;
	--primary-900: #e7eaf5;
	--primary-950: #f3f5fa;

	--secondary-50: #0d0f16;
	--secondary-100: #1a1e2c;
	--secondary-200: #343c58;
	--secondary-300: #4e5a84;
	--secondary-400: #6878b0;
	--secondary-500: #8296dc;
	--secondary-600: #9babe3;
	--secondary-700: #b5c0e9;
	--secondary-800: #ced5f0;
	--secondary-900: #e7eaf8;
	--secondary-950: #f3f5fb;

	--accent-50: #0f0d16;
	--accent-100: #1e1a2c;
	--accent-200: #3c3458;
	--accent-300: #5a4e84;
	--accent-400: #7868b0;
	--accent-500: #9682dc;
	--accent-600: #ab9be3;
	--accent-700: #c0b5e9;
	--accent-800: #d5cef0;
	--accent-900: #eae7f8;
	--accent-950: #f5f3fb;

	--text: #e8eaf0;
	--background: #0a0d12;
	--primary: #8296cb;
	--secondary: #5a6ea4;
	--accent: #8a7acc;
}

:root[data-theme='light'] {
	--text-50: #f0f1f2;
	--text-100: #e1e2e6;
	--text-200: #c2c5cc;
	--text-300: #a3a7b3;
	--text-400: #838999;
	--text-500: #646b80;
	--text-600: #505666;
	--text-700: #3c404d;
	--text-800: #282b33;
	--text-900: #14151a;
	--text-950: #0a0b0d;

	--background-50: #f0f3f7;
	--background-100: #e1e7ef;
	--background-200: #c2cee0;
	--background-300: #a3b5d0;
	--background-400: #839bc1;
	--background-500: #6482b1;
	--background-600: #50688e;
	--background-700: #3c4e6a;
	--background-800: #283447;
	--background-900: #141a23;
	--background-950: #0a0d12;

	--primary-50: #f3f5fa;
	--primary-100: #e7eaf5;
	--primary-200: #ced5ea;
	--primary-300: #b5c0e0;
	--primary-400: #9babd5;
	--primary-500: #8296cb;
	--primary-600: #6878a2;
	--primary-700: #4e5a7a;
	--primary-800: #343c51;
	--primary-900: #1a1e29;
	--primary-950: #0d0f14;

	--secondary-50: #f3f5fb;
	--secondary-100: #e7eaf8;
	--secondary-200: #ced5f0;
	--secondary-300: #b5c0e9;
	--secondary-400: #9babe3;
	--secondary-500: #8296dc;
	--secondary-600: #6878b0;
	--secondary-700: #4e5a84;
	--secondary-800: #343c58;
	--secondary-900: #1a1e2c;
	--secondary-950: #0d0f16;

	--accent-50: #f5f3fb;
	--accent-100: #eae7f8;
	--accent-200: #d5cef0;
	--accent-300: #c0b5e9;
	--accent-400: #ab9be3;
	--accent-500: #9682dc;
	--accent-600: #7868b0;
	--accent-700: #5a4e84;
	--accent-800: #3c3458;
	--accent-900: #1e1a2c;
	--accent-950: #0f0d16;

	--text: #0f1018;
	--background: #f0f3f7;
	--primary: #3d5179;
	--secondary: #7596d8;
	--accent: #6858a4;
}

* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: var(--background);
	color: var(--text);
	font-family: Comfortaa;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Sora;
}

#background {
	z-index: -1;
	width: 100%;
	height: 100%;
	position: fixed;
	filter: brightness(0.7) contrast(1.1) grayscale(1); /* blur(1px) */
}

.disable-selection {
	-webkit-user-drag: none;
	user-select: none;
}

.disable-selection * {
	-webkit-user-drag: none;
	user-select: none;
}

body.mobile *.content {
	margin-left: 0px !important;
	width: 100% !important;
	padding-bottom: 60px;
	overflow-y: auto;
}