/* Style for the block container */
#dmb-block-container {
	position: relative;
	display: flex;
	padding: 20px;
	align-items: center;
	justify-content: center;
}

/* Style for the dark mode toggle button */
#dark-mode-toggle {
  position: absolute; /* Positioned relative to the #dmb-block-container */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
}

.bi.bi-moon-fill {
  color: #212121;
}

.bi.bi-sun-fill {
  color: yellow;
}

/* Optional: Add styles for dark mode */
body.dark-mode {
  background-color: rgb(80,80,80);
  color: #eeeeee;
  opacity: 1;
}

.dark-mode .social-bar,
.dark-mode .node--view-mode-full .field--tags,
.dark-mode .field--tags__item,
.dark-mode .tabs__link {
  background-color: rgb(80,80,80);
  color: #eeeeee;
  opacity: 1;   
}

/* Apply styles to <p> tags that contain <code> tags */
.dark-mode p:has(code) {
  background-color: #666666;
  color: #eee;
}

/* Style for <code> tags within <p> tags */
.dark-mode p:has(code) code {
  color: #eeeeee;
  background-color: #666666;
  padding: 2px 4px;
}

.dark-mode .pager__item a {
  background-color: rgb(80, 80, 80) !important;
  color: #eeeeee !important;   
}

.dark-mode .site-branding__inner a {
	background: none;
}

.dark-mode a {
  color: #eeeeee !important;   
}

.dark-mode .primary-nav__menu--level-2 {
	background-color: rgb(80, 80, 80) !important;
}

.dark-mode .container,
.dark-mode .title,
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6,
.dark-mode .h1, .dark-mode .h2, .dark-mode .h3, .dark-mode .h4, .dark-mode .h5, .dark-mode .h6,
.dark-mode .text-content,
.dark-mode .page-wrapper,
.dark-mode .header-nav,
.dark-mode .site-header__inner {
  background-color: rgb(23, 25, 35);
  color: #eeeeee !important;   
}