/* Light mode (default) */
body {
  background-color: #ffffff; /* Light background */
  color: #000000; /* Dark text */
  font-family: 'Roboto', sans-serif; /* Modern font */
}

/* Dark mode */
body.dark-mode {
  background-color: #121212; /* Dark background */
  color: #ffffff; /* Light text */
}

/* Container styles */
.container {
  display: flex; /* Flexbox layout */
  width: 100%;
  margin: 16px; /* Material Design spacing */
}

.svg-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.info-container {
  flex-grow: 1;
  padding: 16px; /* Material Design spacing */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Material Design shadow */
  border-radius: 8px; /* Material Design rounded corners */
  background-color: #ffffff;
}

.container2 {
  display: flex;
  justify-content: space-between;
  margin: 16px; /* Material Design spacing */
}

.left-div, .right-div {
  padding: 16px; /* Material Design spacing */
  display: flex;
  align-items: center;
}

/* Typography for markdown content */
.markdown-body p, .markdown-body li, .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-family: 'Roboto', sans-serif !important;
}

/* Button styles */
.button, .red-button, .green-button, .yellow-button, .gray-button {
  color: white;
  border: none;
  padding: 15px;
  font-size: 18px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Material Design transition */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Material Design shadow */
  text-align: center;
  display: block; /* Ensure buttons are block level to take width */
  margin: 4px 0; /* Margin for spacing */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  flex: 1; /* Allow buttons to grow equally */
}

.button:hover, .button:focus,
.red-button:hover, .red-button:focus,
.green-button:hover, .green-button:focus,
.yellow-button:hover, .yellow-button:focus,
.gray-button:hover, .gray-button:focus {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Elevate on hover */
}

.red-button {
  background-color: #e53935; /* Material Design red */
}

.red-button:hover, .red-button:focus {
  background-color: #d32f2f; /* Darker red on hover */
}

.green-button {
  background-color: #43a047; /* Material Design green */
}

.green-button:hover, .green-button:focus {
  background-color: #388e3c; /* Darker green on hover */
}

.yellow-button {
  background-color: #fdd835; /* Material Design yellow */
  color: black; /* Dark text on yellow background */
}

.yellow-button:hover, .yellow-button:focus {
  background-color: #fbc02d; /* Darker yellow on hover */
}

.gray-button {
  background-color: #757575; /* Material Design gray */
  color: white; /* White text on gray background */
}

.gray-button:hover, .gray-button:focus {
  background-color: #616161; /* Darker gray on hover */
}

/* Accessibility focus ring */
.button:focus, .red-button:focus, .green-button:focus, .yellow-button:focus, .gray-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(98, 0, 238, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Circle styles */
.red-circle, .yellow-circle, .green-circle {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  display: inline-block;
}

.red-circle {
  background-color: #e53935;
}

.yellow-circle {
  background-color: #fdd835;
}

.green-circle {
  background-color: #43a047;
}

/* TOC Container styles */
.toc-container {
  padding: 16px; /* Material Design spacing */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Material Design shadow */
  border-radius: 8px; /* Material Design rounded corners */
  background-color: #ffffff;
  width: 220px; /* Constant width for TOC container */
  flex-shrink: 0; /* Prevent shrinking */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  display: flex;
  flex-direction: column; /* Stack items vertically */
}

.info-container, .toc-container {
  padding: 16px; /* Material Design spacing */
  display: flex;
  flex-direction: column; /* Stack items vertically */
}

.content-container {
  display: flex;
  gap: 20px;
}

.info-container {
  margin-right: 20px;
}

.toc-container .button, 
.toc-container .red-button, 
.toc-container .green-button, 
.toc-container .yellow-button, 
.toc-container .gray-button, 
.info-container .button, 
.info-container .red-button, 
.info-container .green-button, 
.info-container .yellow-button, 
.info-container .gray-button {
  flex: 1; /* Allow buttons to grow equally */
  max-width: 220px; /* Ensure buttons don't exceed container width */
  display: inline-block; /* Display buttons side by side */
}