.container {
  position: absolute; /* Ensure positioning */
  z-index: 3; /* Adjust as needed */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circle-container {
  position: absolute;
  transform: translateY(-10vh);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  z-index: 4;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(
    hsl(183, 100%, 80%), /* Inner circle */
    hsl(183, 100%, 80%) 10%, /* Outer circle */
    hsla(183, 100%, 80%, 0) 56% /* With transparency */
  );
  animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}

@keyframes fadein-frames {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

@keyframes scale-frames {
  0% { transform: scale3d(0.4, 0.4, 1); }
  50% { transform: scale3d(2.2, 2.2, 1); }
  100% { transform: scale3d(0.4, 0.4, 1); }
}

.message {
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: white;
  font-family: "Josefin Slab", serif;
  line-height: 27px;
  font-size: 18px;
  text-align: right;
  pointer-events: none;
  animation: message-frames 1.5s ease 5s forwards;
  opacity: 0;
}

@keyframes message-frames {
  from { opacity: 0; }
  to { opacity: 1; }
}