:root {
  --starry-bg-color: #50459b;
  --grid-line-color-1: #a057a3; /* Base grid color */
  --grid-line-color-2: #a057a3; /* Flash color */
  --grid-size: 20px;
}

img {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}


.starry {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--starry-bg-color);
  overflow: hidden;
  z-index: -100;
  animation: twinkle 3s infinite ease-in-out;
  background-size: var(--grid-size) var(--grid-size);
  background-image:
    repeating-linear-gradient(
      to right,
      var(--grid-line-color-1),
      var(--grid-line-color-1) 1px,
      transparent 1px,
      transparent var(--grid-size)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--grid-line-color-1),
      var(--grid-line-color-1) 1px,
      transparent 1px,
      transparent var(--grid-size)
    );
}

@keyframes twinkle {
  0%, 100% {
    background-image:
      repeating-linear-gradient(
        to right,
        var(--grid-line-color-1),
        var(--grid-line-color-1) 1px,
        transparent 1px,
        transparent var(--grid-size)
      ),
      repeating-linear-gradient(
        to bottom,
        var(--grid-line-color-1),
        var(--grid-line-color-1) 1px,
        transparent 1px,
        transparent var(--grid-size)
      );
  }
  50% {
    background-image:
      repeating-linear-gradient(
        to right,
        var(--grid-line-color-2),
        var(--grid-line-color-2) 1px,
        transparent 1px,
        transparent var(--grid-size)
      ),
      repeating-linear-gradient(
        to bottom,
        var(--grid-line-color-2),
        var(--grid-line-color-2) 1px,
        transparent 1px,
        transparent var(--grid-size)
      );
  }
}