:root {
  --top-light: #404040;
  --middle-light: #DC2626;
  --bottom-light: #065F46;
  --top-dark: #F5F5F5;
  --middle-dark: #DC2626;
  --bottom-dark: #FDE68A;
}

html {
  --top: var(--top-light);
  --middle: var(--middle-light);
  --bottom: var(--bottom-light);
}

html.dark {
  --top: var(--top-dark);
  --middle: var(--middle-dark);
  --bottom: var(--bottom-dark);
}

/* HTML: <div class="elipse"></div> */
.elipse {
  width:10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bottom);
  animation: l9 2s infinite;
}
@keyframes l9 {
  0%   {box-shadow: 
          0 -16px var(--top), calc(16px*0.707) calc(-16px*0.707) var(--middle),0 0 var(--top), 0 0 var(--middle),
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle)}
  12.5%   {box-shadow: 
          0 0 var(--top), calc(16px*0.707) calc(-16px*0.707) var(--middle),16px 0 var(--top), 0 0 var(--middle),
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle)}
  25%   {box-shadow: 
          0 0 var(--top), 0 0 var(--middle),16px 0 var(--top), calc(16px*0.707) calc(16px*0.707) var(--middle),
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle)}
  37.5% {box-shadow: 
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), calc(16px*0.707) calc(16px*0.707) var(--middle),
          0 16px var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle)}
  50%   {box-shadow: 
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle),
          0 16px var(--top), calc(-16px*0.707) calc(16px*0.707) var(--middle),0 0 var(--top), 0 0 var(--middle)}
  62.5% {box-shadow: 
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle),
          0 0 var(--top), calc(-16px*0.707) calc(16px*0.707) var(--middle),-16px 0 var(--top), 0 0 var(--middle)}
  75%   {box-shadow: 
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle),
          0 0 var(--top), 0 0 var(--middle),-16px 0 var(--top), calc(-16px*0.707) calc(-16px*0.707) var(--middle)}
  87.5% {box-shadow: 
          0 -16px var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle),
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), calc(-16px*0.707) calc(-16px*0.707) var(--middle)}
  100% {box-shadow: 
          0 -16px var(--top), calc(16px*0.707) calc(-16px*0.707) var(--middle),0 0 var(--top), 0 0 var(--middle),
          0 0 var(--top), 0 0 var(--middle),0 0 var(--top), 0 0 var(--middle)}
}