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