html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

*, *:before, *:after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

body {
    
  background-color: #121418;
  place-items: center;
  color: #ccc;
  font-family: sans-serif;
  font-size: 18px;
  display:block;
  padding-top:100px;
  overflow:hidden
}

.thing {
  width: 30vw;
  aspect-ratio: 1/1;
  position: relative;
  perspective: 2000px;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
  -webkit-animation: box 10s infinite linear;
          animation: box 10s infinite linear;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 1vw solid #fff;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-left-width: 0px;
  -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
}
.ring--1 {
  --r: rotateY(0);
  transform: translate(-50%, -50%) rotateZ(0deg);
}
.ring--2 {
  --r: rotateY(-90deg);
  transform: translate(-50%, -50%) var(--r);
  -webkit-animation-delay: calc(1s * .75);
          animation-delay: calc(1s * .75);
}
.ring--3 {
  --r: rotateX(-90deg);
  transform: translate(-50%, -50%) rotateX(-90deg);
  -webkit-animation-delay: calc(1s * .5);
          animation-delay: calc(1s * .5);
}

@-webkit-keyframes spin {
  to {
    transform: translate(-50%, -50%) var(--r) rotateZ(360deg);
  }
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) var(--r) rotateZ(360deg);
  }
}
@-webkit-keyframes box {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}
@keyframes box {
  to {
    transform: rotateX(360deg) rotateY(360deg);
  }
}