.img-row {
  display: flex;
  justify-content: space-around;
  text-align: left;
}

.dropshadows {
  filter: drop-shadow(0 0 0.25rem black);
  transition: filter 0.3s ease-in-out;
}
.dropshadows:hover {
  filter: drop-shadow(0 0 0.45rem black);
}

.banner-text {
  display: block;
  position: relative;
  padding: 0.15em;
  margin: 0 0 0.25em;
  text-align: center;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-size: 2.5em;
  font-weight: 700;
  /* color: #043F2E; */
  color: var(--md-primary-fg-color--light);
  /* background: #D1FB96; */
  filter: drop-shadow(0.125em 0.125em 0.05em black);
}

.card-title {
  color: var(--md-primary-bg-color--light);
}

.md-typeset .grid.single-column {
  grid-template-columns: 1fr;
}


.grid.cards {

  a.title-link {
    position: relative;
    font-size: 1.5em;
    font-weight: bold;
    filter: drop-shadow(0.125em 0.125em 0.05em black);
    z-index: 1;
  }
  
  li.htb-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, transparent 15%, var(--md-primary-fg-color--dark)); 

    .badge-image {
      position: absolute;
      right: 0%;
      top: 50%;
      width: 10em;
      transform: translateY(-50%);
      z-index: 0;
      object-fit: contain;
      transition: opacity 0.5s ease;
      opacity: 0.75;
    }
  }
  
  li:hover .badge-image {
    opacity: 1; !important
  }
}

.md-typeset {
  .highlight span.filename {
    font-size: 1em;
    font-weight: 700;
    background-color: var(--md-code-title-bg-color);
    position: relative;
    display: block;
    padding: 0.5em 3em;
    
    &::before {
      content: ''; /* Empty content for the pseudo-element */
      display: inline-block;
      width: 1.25em; /* Width of the icon */
      height: 1.25em; /* Height of the icon */
      background-color: var(--md-default-fg-color);
      mask-image: url('../svg/console.svg'); /* Inline SVG as a data URL */
      mask-size: contain; /* Ensure the icon fits */
      mask-repeat: no-repeat;
      position: absolute; /* Position it absolutely */
      left: 1em; /* Align to the left */
      top: 50%; /* Center vertically */
      transform: translateY(-50%); /* Adjust for the height of the icon */
   }
  }
}

@keyframes colorChange {
  0% { color: #ffb3ba; }
  25% { color: #ffdfba; }
  50% { color: #ffffba; }
  75% { color: #baffc9; }
  100% { color: #bae1ff; }
}
.colorful-text {
  animation: colorChange 2s infinite alternate;
}


/* Fix image size for smaller screen */
@media screen and (max-width: 768px) {
  img[align="right"] {
    float: none !important;
    display: block !important;
    margin: 1em auto 2.5em !important;
    max-width: 100% !important;
  }

  img.badge {
    max-width: 50% !important;
  }

  img[align="right"].badge {
    max-width: 50% !important;
  }
}