html {
    font-size: 1rem;
  }
  
@include media-breakpoint-up(sm) {
html {
    font-size: 1.2rem;
}
}

@include media-breakpoint-up(md) {
html {
    font-size: 1.4rem;
}
}

@include media-breakpoint-up(lg) {
html {
    font-size: 1.6rem;
}
}
  
  
  
  /*   toast at mouse location */
.button-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 40px;
    position: relative;
}

.mytoast2 {
    position: absolute;
    z-index: 1050;
}


/* ==================================================================================================== */
.mylist-item.highlight {
    border: 2px groove hsla(145, 60.80%, 59.00%, 0.41);
    /*   border-left: 2px groove hsla(145, 60.80%, 59.00%, 0.21);  */
    border-radius: 4px;
}

/* ==================================================================================================== */

     
/* // colored dropdown button */
/* .color-option { */
/*     display: flex; */
/*     align-items: center; */
/*     gap: 8px; */
/* } */
/* .color-swatch { */
/*     width: 16px; */
/*     height: 16px; */
/*     border-radius: 50%; */
/* } */


/* ==================================================================================================== */

.hint-pill {
    position: absolute;
    top: -10px;
    right: -10px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease, transform 0.3s ease;
    z-index: 10;
  }

  .hint-pill.show {
    opacity: 1;
    transform: scale(1);

    /* 🔁 Pulse 3 times */
    animation: pulse 1s ease-in-out 2; 
    /* animation: pulse-glow 1s ease-in-out 3; */
  }

  .hint-pill.fade-out {
    opacity: 0;
    transition: opacity 3s ease-out;
  }

  @keyframes pulse {
    0% { transform: scale(1); 
        box-shadow: 0 0 0px rgba(255, 193, 7, 0.5);
      }
    50% { transform: scale(1.2); 
        box-shadow: 0 0 0px rgba(255, 193, 7, 0.5);
      }
    100% { transform: scale(1); 
        box-shadow: 0 0 0px rgba(255, 193, 7, 0.5);
      }
  }

  
  @keyframes pulse-glow {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0px rgba(255, 193, 7, 0.5);
    }
    25% {
      transform: scale(1.1);
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
    }
    50% {
      transform: scale(1.2);
      box-shadow: 0 0 15px rgba(255, 193, 7, 1);
    }
    75% {
      transform: scale(1.1);
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.8);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0px rgba(255, 193, 7, 0.5);
    }
  }
  



/* ==================================================================================================== */




.px-0_5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}