/* Background and foreground colors */
:root {
   --foreground-color:#FFFF00;
   --background-color: #000000;
   --highlight-color: #FF0000;
   --highlight-background: #000000;
}

body {
   color: var(--foreground-color);
   background-color: var(--background-color);
}

.btn-link {
   color: var(--foreground-color);
}

.btn-link:hover {
   color: var(--highlight-color);
}

a .active {
   color: var(--highlight-color);
}

.nav .nav-link:hover {
   color: var(--foreground-color);
   background-color: var(--background-color);
}

.dropdown-item:hover {
   color: var(--background-color);
   background-color: var(--highlight-color);
}

/* Highlight styles */
.bg-highlight {
   background-color: var(--highlight-background);
   color: var(--highlight-color);
}

.text-highlight {
   color: var(--highlight-color);
}

/* Button styles */
.btn-primary {
   background-color: var(--foreground-color);
   border-color: var(--foreground-color);
   color: var(--background-color);
}

.btn-primary:hover,
.btn-secondary:hover {
   color: var(--highlight-background);
   background-color: var(--highlight-color);
   border-color: var(--highlight-color);
}

.btn-primary.active {
   color: var(--highlight-background);
   background-color: var(--highlight-color);
   border-color: var(--highlight-color);
}

a {
   color: white;
}

a.nav-link {
   color: white;
   font-size: 1.1em;
}

a.nav-link:hover,
a.nav-link.dropdown-toggle.show,
a.nav-link.dropdown-toggle.hover,
a.nav-link.view-path-bound.active {
   color: var(--highlight-color)
}

.dropdown-menu.show li:hover {
   color: white;
   background-color: var(--highlight-color);
}

li p {
   font-size: 1.0em;
}

.navbar-toggler {
   border-color: var(--foreground-color);
}

.navbar-toggler:hover {
   color:  var(--foreground-color);
}

.no-arrow::after {
   display: none;
}

.navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   /* Adjust stroke color 'rgba(0, 0, 0, 1)' to your desired color */
}

.alert a {
   color: blue;
}

.video-fluid,
.audio-fluid {
   width: 100%;
   height: auto;
}

.tinted {
   background-color: var(--background-color);
 }

 img.tinted {
   opacity: 0.6;
 }