:root {
      --bg-color: #ffffff;
      --text-color: #2c2c2c;
      --subtext-color: #555;
      --highlight-color: orangered;
      --divider-color: #5A4860;
    }

    body {
      background-color: var(--bg-color);
      color: var(--text-color);
      font-family: 'Inter', sans-serif;
      margin: 40px;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    /* Button Style */
    #dark-mode-toggle {
      position: fixed;
      top: 20px;
      left: 20px;
      background: transparent;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
    }

    /* Responsive Bubble container */
    #bubble {
      width: 100%;
      max-width: 1600px;
      margin: 40px auto;
    }

    /* Dark Mode Styles */
    body.dark-mode {
      --bg-color: #121212;
      --text-color: #e0e0e0;
      --subtext-color: #aaa;
      --highlight-color: #ff7043;
      --divider-color: #cccccc;
    }


    h1 {
      font-size: 2.5em;
      margin-bottom: 0.2em;
    }

    .heading-bold {
      font-weight: 500; /* Inter Semi Bold */
    }

    .heading-black {
      font-weight: 900; /* Inter Black */
    }

    .subheading,
       p.standard-text {
          font-weight: 400;
          font-size: 0.65em;
          color: var(--subtext-color); /* Updated */
          margin-top: 0;
          margin-bottom: 20px;
}

    .semi-bold {
      font-weight: 700; /* Inter Semi Bold */
    }


    .divider {
      height: 1px;
      background-color: var(--divider-color);
      margin-bottom: 25px;
      transition: background-color 0.3s ease;
    }

    .highlight {
      color: var(--highlight-color); /* Updated */
      font-weight: 400;
}