body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: black; /* The background color of the body is black */
    color: white; /* Defaults text color is white for visibility */
    overflow: hidden;
  }
  
  #startContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    z-index: 2; /* Ensuring the container with the start button is above the video */
  }
  
  #startButton {
    max-width: 100%;
    transition: opacity 1s ease;
    z-index: 3; /* Ensures the start button is clickable at the top layer */
  }
  
  #backgroundVideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1; /* Ensuring the video is above the black background but below the start button */
    opacity: 0;
    transition: opacity 1s ease;
  }

  /* General Chapter Container Style */
.chapter-container {
    display: none;
    opacity: 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevents any overflow from the image if it scales beyond the viewport size */
    background-color: black;  /* Or any other color you want for chapter background */
    color: white;  /* Text color */
    transition: opacity 2s ease; /* For fading transition */
  }

  
  
  
  .chapterBackground {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Maintains the aspect ratio without cropping */
    object-position: center center; /* Centers the image within the container */
  }


  /* Hidden Class for Toggling Visibility */
  .hidden {
    display: none;
  }
  
  /* Popup Styles */
  .popupContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    /* Other styles for your popup */
  }

  .accuseButton {
    position: absolute; /* Absolute position this element within the popup container */
    bottom: 200px; /* Place the button at the bottom of the popup window */
    left: 50%; /* Center the button horizontally */
    transform: translateX(-50%); /* Offset the button by half its width */
    padding: 10px 20px;
    background-color: #d9534f;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 2; /* Ensure it appears above the image */
}

.accuseButton:hover {
    background-color: #c9302c;
}