:root {
  --shadow-color: rgba(255, 255, 255, 0.3);
  --shadow-blur: 20px;
  --shadow-spread: 3px;
  --tint-color: rgba(255, 255, 255, 0.13);
  --frost-blur: 14px;
  --noise-frequency: 0.008;
  --distortion-strength: 77;
}


.glass-effect {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 20px;
}

.glass-effect::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--tint-color);
  box-shadow: inset 0 0 20px 3px rgba(255, 255, 255, 0.7);
  z-index: 0;
}

.glass-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  backdrop-filter: blur(var(--frost-blur));
  -webkit-backdrop-filter: blur(var(--frost-blur));
  filter: url(#glass-distortion);
  z-index: -1;
}