#logo{
    margin: 4px;
}
h5{
    font-weight:bold;
}

#nav-bar{
    
    position: fixed;
    top:0px;
    width: 100%;
    
    z-index: 999;
    background-color: white;
}
.dark-mode #nav-bar{
    position: fixed;
    top:0px;
    width: 100%;
    z-index: 999;
    background-color: black;
}
.dark-mode{
    color:white;
    background-color: black;
}


.dark-mode .nav-link {
  color: #f8f9fa;
}
.dark-mode .nav-link:hover {
  color: white;
}
.dark-mode .nav-pills .nav-link.active {

  color: #000;
}
.dark-mode h1#header{
    color:white
}
#darkModeSwitch:checked{
    background-color: grey;
}
#icon-grid img{
    margin-right: 5px;
}
.dark-mode #contact{
    color:white;
}
.gradient-background {
  background: linear-gradient(300deg, #00bfff, #ff4c68, #ef8172);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(100%) grayscale(100%) brightness(50%);
}
.dark-mode .carousel-indicators [data-bs-target] {
  background-color: darkgrey;
  
}
.dark-mode .carousel-indicators .active{
    background-color: white;
    opacity: 1;
}
.carousel-indicators [data-bs-target] {
  background-color: #ccc; 
  opacity: 1;
}

.carousel-indicators .active {
  background-color: #0d6efd; 
  opacity: 1;
}
.textToggle.dark {
  color: white;
  background-color: #222;
}

.albumToggle.dark {
  border-color: white;
  background-color: #111;
}
.albumToggle.dark .card-title{
    color:white;
}
.albumToggle.dark .card-text{
    color:white;
    
}
.card-text{
  height: 100px;
  display:flex;
  flex-direction: column;
 
}
.albumToggle.dark .card-body{
    background-color: #393E46;
}
.fixed-card {
  /* fixed height version */
  height: 800px;
  display: flex;
  flex-direction: column;
}

.badge-tag {
  background-color:#f1f3f5;
  color: #495057;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 500;
}
.albumToggle.dark .badge-tag{
  background-color:#f1f3f5;
  color: #495057;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 500;
}

.hover-pop {
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),
              box-shadow 180ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.hover-pop:hover,
.hover-pop:focus-within {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--bs-box-shadow-lg);
  z-index: 2;
}

.cba-card{
  display:block;
  max-height: 300px;   
  height: auto;        
  width: auto;         
  max-width: 100%;     
}

.dark-mode a,li a{
  color:white;
}
a,li a{
  color:black;
}