eu quero que o anel externo fique atrás do círculo, mas quando tentei usarz-index não está funcionando. não fazendo nada. Eu fiz 2 anéis, um anel está no topo do círculo sem o topo, o outro está atrás do círculo Eu simplesmente não consigo movê-lo, não sei por quê.

:root{
  --size:200px;
}
#background {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background: linear-gradient(-23.5deg, #000033, #00001a);
  z-index:-2;
}

#background #mainplanet {
  width:var(--size);
  height:var(--size);
  background:#fff;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
}

#background #mainplanet:before,#background #mainplanet:after{
  content:"";
  width:calc(var(--size) * 1.5);
  height:calc(var(--size) / 2);
  border:30px solid #000;
  position:absolute;
  top:10px;
  left:-80px;
  border-radius:50%;
  transform: rotateX(66deg) rotateY(170deg);
}

#background #mainplanet:before{
  border-top-color:transparent;
}

#background #mainplanet:after{
  z-index:-3;
}

<div id="background">
  <div id="mainplanet">
  </div>
</div>