html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
      background: #040410;
      /* dark background */
      font-family: sans-serif;
    }

    /* Canvas spans the full screen */
    #canvas-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 0; /* Adjusted z-index for background canvas */
    }

    /* Central Title */
    .center-title {
      position: absolute;
      top: 10%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 2; /* Adjusted z-index to be above scrolling text and canvas */
      color: #1f1f00;
      font-size: 3em;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: bold;
      opacity: 0.8;
      user-select: none; /* Prevent text selection for title */
    }

    .center-title:hover {
      opacity: 1;
    }

    /* Scrolling Text Container */
    #scrolling-text-container {
      position: absolute;
      top: 25%; /* Position below the main title */
      left: 50%;
      transform: translateX(-50%);
      width: 70%;
      max-width: 800px; /* Max width for readability */
      max-height: 60vh; /* Visible area for scrolling */
      overflow: hidden; /* Crucial for scrolling effect */
      background-color: transparent; /* Make background fully transparent */
      border: none; /* Remove the border */
      border-radius: 8px;
      z-index: 1; /* Above canvas, below title */
      padding: 15px;
      box-sizing: border-box;
    }

    #scrolling-text-content {
      color: #AFEEEE; /* PaleTurquoise for good contrast on dark bg */
      font-size: 1.05em; /* Slightly increased font size */
      line-height: 1.6;
      text-align: center; /* Center the text within each line */
      white-space: pre-wrap; /* Preserves whitespace and newlines, allows wrapping */
    }