body{
    max-height: 100%;
    overflow: hidden;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
    position: absolute;
    inset: -1em;
    --c: 7px;
    background-color: #000;
    background-image: radial-gradient(
        circle at 50% 50%,
        #0000 1.5px,
        #000 0 var(--c),
        #0000 var(--c)
      ),
      radial-gradient(
        circle at 50% 50%,
        #0000 1.5px,
        #000 0 var(--c),
        #0000 var(--c)
      ),
      radial-gradient(circle at 50% 50%, rgb(255, 0, 0), rgb(255, 0, 0) 60%),
      radial-gradient(circle at 50% 50%, rgb(255, 255, 255), #ff00 60%),
      radial-gradient(circle at 50% 50%, rgb(255, 255, 255), rgba(255, 255, 255, 0.525) 60%),
      radial-gradient(ellipse at 50% 50%, rgb(0, 0, 255), rgba(0, 0, 255, 0.534) 60%);
    background-size:
      12px 20.7846097px,
      12px 20.7846097px,
      200% 200%,
      200% 200%,
      200% 200%,
      200% 20.7846097px;
    --p: 0px 0px, 6px 10.39230485px;
    background-position:
      var(--p),
      0% 0%,
      0% 0%,
      0% 0px;
    animation:
      wee 40s linear infinite,
      filt 6s linear infinite;
  }
  
  @keyframes filt {
    0% {
      filter: hue-rotate(0deg);
    }
    to {
      filter: hue-rotate(360deg);
    }
  }
  
  @keyframes wee {
    0% {
      background-position:
        var(--p),
        800% 400%,
        1000% -400%,
        -1200% -600%,
        400% 41.5692194px;
    }
    to {
      background-position:
        var(--p),
        0% 0%,
        0% 0%,
        0% 0%,
        0% 0%;
    }
  }