html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #050505;
  overflow: hidden;
}

.rings {
  position: fixed;
  inset: 50%;
  width: min(96vw, 96vh);
  height: min(96vw, 96vh);
  transform: translate(-50%, -50%);
}

text {
  fill: #00ff66;
  font-family: "Courier New", Courier, monospace;
  font-size: 21px;
  letter-spacing: 4px;
  text-shadow: 0 0 8px rgba(0,255,102,0.9);
}

.ring {
  transform-origin: 500px 500px;
}

.ring-1 {
  animation: spin-cw 7s linear infinite;
}

.ring-2 {
  animation: spin-ccw 10s linear infinite;
}

.ring-3 {
  animation: spin-cw 13s linear infinite;
}

.ring-4 {
  animation: spin-ccw 16s linear infinite;
}

.ring-5 {
  animation: spin-cw 19s linear infinite;
}

.ring-6 {
  animation: spin-ccw 22s linear infinite;
}

.ring-7 {
  animation: spin-cw 25s linear infinite;
}

.ring-8 {
  animation: spin-ccw 28s linear infinite;
}

.ring-9 {
  animation: spin-cw 31s linear infinite;
}

@keyframes spin-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-ccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}