body{
   background-color: rgb(219 209 200 / 0.65);
   display: flex;
   flex-direction: column;
   height: 100vh;
   font-family: "Poppins", sans-serif;
}

.tagline{
   /*background-color: rgb(255 255 255 / 0.75);
   box-shadow: 0px 0px 10px 10px rgb(255 255 255 / 0.75) ;*/
 
}

.tagline_text, .tagline_text p{
   color: white !important;
   text-shadow: 3px 3px 3px  rgba(0, 0, 0, .5);
   /* offset x offset y blur*/



}

.richtext-image {
   max-width: 100%;
  height: auto;
}




.navbar-toggler-icon{
    filter: invert(1);
  
}

.page_content{
   margin-left: auto;
   margin-right: auto;
   padding-left: 20px;
   padding-right: 20px;
}

.hero img{
   filter:   brightness(70%) ;
}



a{
   text-decoration: none;
}

footer{
   background-color: #435135;
   color: var(--bs-light);
   margin-top: auto;  
}

.navbar{
   background-color: #261535;
  color: #F9E8FA;
}



.footer_padding{
  padding: 1em;  


}

svg{
   color: var(--bs-light);
}

.card-group{
   display: flex;
   justify-content: center;

   
}

.nav-item .dropdown-toggle, .nav-item .nav-link {
   color: var(--bs-light);
} 

.nav-item .dropdown-toggle:hover, .nav-item .nav-link:hover {
   color: var(--bs-white);
} 

.card-header{
   border: none;
   background: none;
}

.card{
   border: none;
   background-color: rgb(0 0 0 / 0%); 
  
}

.jumbotron{
  
   color:var(--bs-primary);
}
/*for the species page*/
.featurette-divider {
  margin: 1rem 0; /* Space out the Bootstrap <hr> more */
}



.featurette-heading {
  letter-spacing: -.05rem;
}
.featurette-heading {
    font-size: 50px;
  }

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

/* ------------------- */
 .video-background { 
        overflow: hidden;
        z-index: -100;
        width:100%;
  
}

.page_title{
   background-color: rgb(0 0 0 / 0%) !important; 
}

.list-group .list-group-item{
   background-color: rgb(0 0 0 / 0%) !important; 

}

.purple{
   color:var(--bs-primary);
}


.attribution{
   color:var(--bs-light);
   font-size: .65em;
   text-shadow: 1px 1px 1.5px  rgba(0, 0, 0, .75);

}
.responsive-img{
   width:9em;
}


@media screen and (max-width: 900px) {
  .responsive-img {
    width: 5.5em;     /* Makes the image smaller on mobile */
  }
}

.text-shadow{
    text-shadow: 2px 2px 2px  rgba(0, 0, 0, .5);
}





/* wgag */
a:focus, .nav-link:focus {
   outline: 2px solid var(--bs-light);
   outline-offset:-2px;
   
}