:root {
  --dot-size: 1px;
  --dot-gap: 16px;
  --dot-color-light: rgba(33, 33, 33, 0.85);
  --dot-color-dark: rgba(39, 39, 39, 1);
  --clip-radius: 120px;
  --clip-x: 50%;
  --clip-y: 50%;
}

#root {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.page-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-image: radial-gradient(
    circle var(--dot-size),
    var(--dot-color-light) 100%,
    transparent 0
  );
  background-repeat: repeat;
  background-size: calc(var(--dot-size) + var(--dot-gap)) calc(var(--dot-size) + var(--dot-gap));
  transition: all 0.3s ease;
  display: block;
}

.page-background::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: radial-gradient(
    circle var(--dot-size),
    var(--dot-color-dark) 100%,
    transparent 0
  );
  background-repeat: repeat;
  background-size: calc(var(--dot-size) + var(--dot-gap)) calc(var(--dot-size) + var(--dot-gap));

  -webkit-mask-image: radial-gradient(
    circle var(--clip-radius) at var(--clip-x) var(--clip-y),
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: radial-gradient(
    circle var(--clip-radius) at var(--clip-x) var(--clip-y),
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;

  transition:
    mask-image 0.3s ease,
    -webkit-mask-image 0.3s ease;
  -webkit-transition: -webkit-mask-image 0.3s ease;
}