a.bc-crystal-button,
a.bc-crystal-button:hover{
color: unset;
}
.bc-crystal-button {
display: block;
width: fit-content;
box-sizing: border-box;
white-space: wrap;
--radius: 15px; 
--filter: 0.7;
--border: 1px;
--padding: 1px;
border-radius: var(--radius);
border: 1px solid #d1d1d1;
position: relative;
place-items: center;
padding: 1px;
transition: transform 0.1s;
padding: 12px 36px; 
opacity: var(--hover, 0);
transition: opacity 0.2s;
}
.bc-crystal-button__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: calc(var(--radius) - var(--padding));
display: block;
grid-column: 1;
grid-row: 1;
}
.bc-crystal-button__title {
grid-row: 1;
grid-column: 1;
position: relative;
z-index: 2;
display: grid;
align-items: center;
gap: 0.5rem;
}
.bc-crystal-button--dark {
outline: none;
}
.bc-crystal-button__backdrop {
--blur: 20px;
--brightness: 1.2;
--saturate: 1;
background: hsla(0,0,0, 0.3); 
-webkit-backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); 
}
.bc-crystal-button--dark:after {
background: hsl(0 0% 10% / calc(1 - var(--hover, 0) * 0.25));
}