:root {
  /* fixed sizes */
  --sidebar-w:          280px;  /* your sidebar width */
  --content-w:          900px;  /* your .w3-main max-width */
  --arrow-off:          110px;  /* the “-110px” centering offset */

  /* how far the left arrow sits from the sidebar */
  --arrow-sidebar-gap:  30px;   /* ← increase this to move the left arrow farther right */

  /* how far the right arrow sits from the window edge */
  --arrow-window-gap:   0px;   /* ← decrease this to move the right arrow closer left */

  /* how much space between each arrow and the main body */
  --body-gap-left:      100px;  /* ← increase this for a bigger gap between left arrow & body */
  --body-gap-right:     30px;   /* ← decrease this for a smaller gap between body & right arrow */

  /* border rounding */
  --pill-border-radius: 0.7rem;

  /* theme transition timings */
  --theme-transition: 0.3s;

  /* border colors for different modes */
  --light-mode-border-color: rgba(0,0,0,0.1);
  --dark-mode-border-color: rgba(255,255,255,0.1);

  /* borders for different modes */
  --light-mode-border: 1px solid var(--light-mode-border-color);
  --dark-mode-border: 1px solid var(--dark-mode-border-color);

  /* background colors for different modes */
  --light-mode-background-color: #f1f1f1;
  --dark-mode-background-color: #252525;

  /* hover/focus background colors for different modes */
  --light-mode-hover-background-color: rgba(0,0,0,0.03);
  --dark-mode-hover-background-color: rgba(255,255,255,0.04);

  /* active background colors for different modes */
  --light-mode-active-background-color: #b3ddff;
  --dark-mode-active-background-color: #0076d6;

  /* accent background colors for different modes */
  --light-mode-accent-background-color: #fbfbfb;
  --dark-mode-accent-background-color: #1e1e1e;
  --dark-mode-accent2-background-color: #2d2d2d;

  /* text colors for different modes */
  --light-mode-text-color: black;
  --dark-mode-text-color: white;
}