:root {
      --bg-color: #f8faff;
      --text-color: #000000;
      --header-bg: #f0f0f0;
      --nav-bg: #e0e0e0;
      --button-bg: #dddddd;
      --button-color: #000000;
    }

    body.dark-mode {
      --bg-color: #1e1e1e;
      --text-color: #f0f0f0;
      --header-bg: #2c2c2c;
      --nav-bg: #333333;
      --button-bg: #444444;
      --button-color: #ffffff;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      
    }

    h1 {
      color: var(--text-color);
    }

    header.header {
      background-color: var(--bg-color);

    }

    .side-nav a:hover,
    .dropdown-menu a:hover {
      background-color: var(--button-bg);
      color: var(--button-color);
    }

    .icon-button svg {
      fill: var(--text-color);
    }

    .language-dropdown-content a {
      color: var(--text-color);
    }

    .readout-group button,
    button#settings_button,
    button#readout,
    button#average,
    button#hold-max,
    button#label-average,
    button#label-hold-max,
    .use-files button {
      background-color: var(--button-bg);
      color: var(--button-color);
      border: none;
      padding: 6px 10px;
      margin: 5px;
      cursor: pointer;
      border-radius: 5px;
      transition: 0.2s ease;
    }

    .readout-group button:hover,
    .use-files button:hover {
      background-color: var(--button-color);
      color: var(--button-bg);
    }

    /* Base styles (Light Mode Default) */
    #theme-container.light-mode {
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    #theme-container.light-mode .about-tool {
      background-color: var(--bg-color);

      color: var(--text-color);
      border-radius: 1rem;
      padding: 2rem;
      margin: 2rem auto;
      max-width: 1200px;

    }

    /* Dark mode styles */
    #theme-container.dark-mode {
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    #theme-container.dark-mode .about-tool {
      background-color: var(--bg-color);
      color: var(--text-color);
      border-radius: 1rem;
      padding: 2rem;
      margin: 2rem auto;
      max-width: 1200px;

    }