@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

:root {
	/* Background Variables */
	--background-image: url("/./assets/media/background/full-main.png"); /* Background Image */
	--backdrop-filter: blur(10px) brightness(80%); /* Nav Backdrop filter */
	--background-nav: rgba(255, 255, 255, 0.02); /* Nav Background */
	--background-color: #222; /* Main Background Color */
	--background-input: #4545459e; /* Input Field Background Color */
	--background-column: #353535; /* Background for Apps Container */
	--background-settings: #2a2a2a; /* Settings Card Background */
	--background-buttons: #333; /* Button Background Color */
	--tab-active-background: #444; /* Accent Color for Tabs */
	--tab-inactive-background: ; /* Background Color for Tabs Not In Use */
	--slider-active-background: #4caf50; /* Active Slider Background Color */
	--slider-inactive-background: #ccc; /*  Slider Background Color */
	--nav-image: url("/./assets/vs.jpeg"); /* Nav Logo */
	/* Text Variables */
	--text-primary: #fff; /* Primary Text Color */
	--text-dark: #555; /* Dark Text Color for Error Page, Scrollbar, and Particles */
	--text-placeholder: #aaa; /* Placeholder Text Color */
	/* Other Variables */
	--save-button: #4caf50; /* Save Button, Typically Green */
	--reset-button: #f44336; /* Reset Button, Typically Red */
	--import-button: #009688; /* Import Button, Typically Teal */
	--export-button: #ea76cb; /* Export Button, Typically Pink */
}

::-webkit-scrollbar {
	width: 6px;
	background-color: var(--background-color);
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: var(--background-color);
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: var(--text-primary);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--text-dark);
}

body {
	font-family: "Major Mono Display", monospace;
	text-decoration: none;
	background: var(--background-image);
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

::placeholder {
	color: var(--text-placeholder);
	opacity: 1;
}

.main {
	letter-spacing: 0px;
	font-family: "Major Mono Display", monospace;
	width: 99%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 0%;
	position: absolute;
	z-index: 99;
}
