.screensaver {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  z-index: 9999;
}

.screensaver[data-active='true'] {
  opacity: 1;
  pointer-events: all;
}

@keyframes circle1Path {
  0% {
    transform: translate(0vw, 0vh);
    width: 30vw;
    height: 30vw;
  }

  100% {
    transform: translate(0vw, -35vh);
    width: 80vw;
    height: 80vw;
  }
}

@keyframes circle2Path {
  0% {
    transform: translate(0vw, 0vh);
    width: 20vw;
    height: 20vw;
  }

  100% {
    transform: translate(-45vw, -40vh);
    width: 80vw;
    height: 80vw;
  }
}

@keyframes circle3Path {
  0% {
    transform: translate(0vw, 0vh);
    width: 20vw;
    height: 20vw;
  }

  100% {
    transform: translate(-55vw, -80vh);
    width: 120vw;
    height: 120vw;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
}

@keyframes fadeCircleIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.circle1 {
  left: 30vw;
  top: 25vh;
  position: absolute;
  animation:
    circle1Path 12s infinite,
    fadeCircleIn 1332ms ease-out;
  animation-direction: alternate;
  border-radius: 100vw;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(12, 119, 255, 0.3) 15.62%,
    rgba(12, 119, 255, 0) 100%
  );
}

.circle2 {
  left: 45vw;
  top: 30vh;
  position: absolute;
  animation:
    circle2Path 11.5s infinite,
    fadeCircleIn 1332ms ease-out;
  animation-direction: alternate;
  border-radius: 100vw;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(0, 56, 255, 0.3) 15.62%,
    rgba(12, 119, 255, 0) 100%
  );
}

.circle3 {
  left: 35vw;
  top: 30vh;
  position: absolute;
  animation:
    circle3Path 15s infinite,
    fadeCircleIn 1332ms ease-out;
  animation-direction: alternate;
  border-radius: 100vw;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(65, 56, 210, 0.5) 15.62%,
    rgba(65, 56, 210, 0) 100%
  );
}

.customImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  animation: fadeIn 1s ease-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}
