/* -------------------------------------------------------- */
body {
  padding: 1% 0%;
  background-color: rgb(170, 187, 204, 0.05);
  color: rgb(52, 58, 64);
  overflow: hidden;
}
#outer_container {
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  max-width: 1280px;
  position: relative;
}

/* -------------- Header ------------------------------------------ */

#controls a {
  display: inline-block;
}
#controls a i {
  color: rgb(52, 58, 64);
}

/* -------------- Main ------------------------------------------ */
#main {
  max-width: 1280px;
}
#canvas_container {
  height: auto;
  padding: 2% 4%;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
#inner_container {
  /* height: 55%; */
  overflow-y: auto;
}
#inner_container img {
  margin: 12px;
  margin-left: 1px;
  max-width: 100%;
  height: auto;
}
ol li {
  margin-bottom: 0.8rem;
}
audio {
  max-width: 100%;
}

/* -------------------------------------------------------- */
.btn-move-down:active {
  transform: translateY(4px);
  transition: 0.3s;
}

/* -------------- Scroll Bars ------------------------------------------ */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: rgb(109, 117, 125, 0.7);
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgb(109, 117, 125, 0.8);
}
::-webkit-scrollbar-thumb:active {
  background-color: rgb(109, 117, 125);
}
table,
th,
td,
tr {
  border: 1px solid;
}
/* -------------- Scroll Bars ------------------------------------------ */
/* Styling for the entire section */
.my-brown-body {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  background-color: #e7f7e1;
  color: #f5f5f5;
  padding: 10px 15px; /* Reduced padding for slimmer layout */
  border-radius: 10px;
  margin: 0; /* Remove margin around the body */
}

/* MathJax-specific styling */
.MathJax_Display {
  display: inline-block !important; /* Force display math inline if needed */
  margin: 0 !important; /* Remove default margins around display math */
  padding: 0 !important; /* Remove padding around equations */
}

.MathJax {
  font-size: 1em !important; /* Set a consistent font size */
  line-height: 1.2 !important; /* Adjust line height for compact display */
}

/* Header styling */
.my-brown-body .header-text {
  background-color: #3a7c22; /* Slightly more brown header background */
  color: #ffffff; /* Black text */
  font-weight: bold;
  padding: 15px; /* Space inside the header */
  border-radius: 8px;
  margin-bottom: 20px; /* Space below the header */
  text-align: center; /* Center the text in the header */
}

/* Adjust body text padding */
.my-brown-body p {
  line-height: 1.6; /* Increased line height for better readability */
  color: #000000; /* Off-white text for paragraphs */
  padding-left: 20px; /* Added padding to start the text inside */
}

/* List styling to keep within the main body */
.my-brown-body ol,
.my-brown-body ul {
  padding-left: 40px; /* Adds padding to indent the list inside the body */
  margin-left: 0; /* Ensures no extra margin outside the container */
}

/* General spacing for all direct child elements */
.my-brown-body > * {
  margin: 0 0 20px 0; /* Adds space below each element */
  padding: 0;
}

/* Additional spacing for specific elements */
.my-brown-body h2 {
  margin-top: 0;
  margin-bottom: 24px; /* Space below headings */
  font-size: 1.5em; /* Increase font size for better readability */
  color: #000000; /* Off-white text for headings */
}

/* Center the image horizontally and make it responsive */
.my-brown-body .responsive-image {
  max-width: 100%;
  height: auto;
  display: block; /* Treat the image as a block element */
  margin: 20px auto; /* Center the image and add space above and below */
}

.my-brown-body li{
    color: #000000;
}

.my-brown-body li{
    color: #000000;
}

.my-brown-body li{
    color: #000000;
}

.img-blend {
  mix-blend-mode: multiply;
}


li {
  margin: 15px;
}

.img-wrapper {
  width: fit-content;
}

.mix-blend {
  mix-blend-mode: multiply;
}

ol li::marker {
  font-weight: bold;
  content: counter(list-item, lower-greek) ") "; /* Changes the marker format */
}