Glass Shards CSS

.glass-shard {

  /* Glass effect */

  background: rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(9.8px);

  -webkit-backdrop-filter: blur(9.8px);

    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);

    z-index:99;

    border-radius: 11px;

        z-index:98;

}

.glass-shard:hover {

  transform: translateY(-6px); /* lifts up slightly */

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); /* stronger shadow for depth */

}

.dark-glass-shard {

  /* Glass effect */

  background: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(9.8px);

  -webkit-backdrop-filter: blur(9.8px);

    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); 

    z-index:99;

        border-radius: 11px;

}

.dark-glass-shard:hover {

  transform: translateY(-6px); /* lifts up slightly */

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); /* stronger shadow for depth */

  z-index:98;

}

.dark-glass-shard-menu

{

  /* Glass effect */

  background: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(9.8px) !important;

  -webkit-backdrop-filter: blur(9.8px);

    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); 

    z-index:99;

}