@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&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/media/favicon/main.png"); /* 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: "Inter", sans-serif;
   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: "Inter", sans-serif;
   width: 99%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   top: 0%;
   position: absolute;
   z-index: 99;
}