@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 */
   --backdrop-filter: none; /* Nav Backdrop filter */
   --background-nav: #1c1c1c; /* Nav Background */
   --background-color: #222; /* Main Background Color */
   --background-input: #2e2e2e; /* Input Field Background Color */
   --background-column: #2e2e2e; /* Background for Apps Container */
   --background-settings: #1a1a1a; /* Settings Card Background */
   --background-buttons: #2e2e2e; /* Button Background Color */
   --tab-active-background: #2e2e2e; /* 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: #8a8a8a; /* Placeholder Text Color */
   /* Surface Variables */
   --border: rgba(255, 255, 255, 0.08); /* Hairline Borders */
   --border-strong: rgba(255, 255, 255, 0.14); /* Hover / Focus Borders */
   --text-muted: #9a9a9a; /* Secondary Text Color */
   --hover-surface: rgba(255, 255, 255, 0.06); /* Hover Wash */
   --radius: 8px; /* Corner Radius */
   /* 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;
   background-color: #3d3d3d;
}

::-webkit-scrollbar-thumb:hover {
   background-color: #4d4d4d;
}

body {
   font-family: "Inter", sans-serif;
   text-decoration: none;
   margin: 0;
   min-height: 100vh;
   background-color: var(--background-color);
   color: var(--text-primary);
   -webkit-font-smoothing: antialiased;
}

::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;
}

.page-strip {
   display: flex;
   justify-content: center;
   width: 100%;
   min-height: 90px;
   padding-top: 74px;
   position: relative;
   z-index: 95;
}

.page-rail {
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   z-index: 90;
}

.page-rail.side-a { left: 18px; }
.page-rail.side-b { right: 18px; }

.page-block {
   width: 100%;
   max-width: 728px;
   margin: 26px auto 0;
}

@media (max-width: 1279px) {
   .page-rail { display: none; }
}

@media (max-width: 759px) {
   .page-strip { display: none; }
}