:root {
  --primary-color: rgb(68 153 255); /* #4499FF */
  --secondary-color: rgb(239 215 176); /* #EFD7B0 */
  --accent-color: rgb(255 82 180); /* #FF52B4 */
}

.element {
  color: var(--primary-color);
  background-color: var(--secondary-color);
  border-color: var(--accent-color);
}

.content-wrapper {
    position: relative;
    z-index: 1;
  }
  
.content-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: -1;
}

.dark-background {
  background-color: var(--bs-body-color); /* Adjust this color as needed */
  color: #fff; /* This changes the text color to white for better contrast */
  padding: 2rem 0; /* Add some padding for better spacing */
}

.dark-background h2 {
  color: #fff; /* Ensure the heading text is also white */
}

.small-text {
  font-size: 0.8em; /* Adjust this value as needed for smaller text size */
}

.image-credit {
  position: absolute;
  bottom: 10px; /* Adjust as needed */
  right: 10px;  /* Adjust as needed */
  background: rgba(255, 255, 255, 0.7); /* Optional: to make text more readable */
  padding: 5px; /* Optional: to add some spacing around the text */
  border-radius: 5px; /* Optional: to round the corners */
}