:root {
    /* --glass-button-col: rgba(138, 138, 138, 0.329); */
    --glass-button-col: rgba(87, 87, 87, 0.329);
    --glass-button-primary-col: rgba(74, 255, 201, 0.329);
}

.glass-background, .glass-background-primary-col {
  user-select: none;
  background: var(--glass-button-col);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.15);
}

.glass-background-primary-col {
  background: var(--glass-button-primary-col);
}



/* .glass-background::before {
	content: "";
	position: absolute;
	inset: 0;
	backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
    border-radius: 100px;
}

.glass-background:hover::before {
	opacity: 1;
} */

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-background, .glass-background-primary-col {
    background: var(--glass-button-col);

    backdrop-filter: blur(4px) saturate(140%);
    -webkit-backdrop-filter: blur(4px) saturate(140%);


    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.55),
      inset 0 -1px 1px rgba(255,255,255,0.15),
      0 8px 24px rgba(0,0,0,0.18);
  }

  .glass-background-primary-col {
    background: var(--glass-button-primary-col);
  }
}


/* @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-background:hover {
    backdrop-filter: blur(8px) saturate(165%);
    -webkit-backdrop-filter: blur(8px) saturate(165%);
  }
} */

@media (prefers-reduced-motion: reduce) {
  .glass-background, .glass-background-primary-col {
    transition: none;
  }
}