/*
/////////////////////////////////////////
// from http://www.jeonju1318.or.kr/xe/index.php?mid=imfor1_1&document_srl=113329
*/
* {
  padding: 0;
  margin: 0;
  border-sizing: border-box;
  font-family: 'arial black';
}

body {
  /*
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  color: white;
  */
  min-height: 100vh;
  overflow: hidden;
}

.containerRotatingBox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.containerRotatingBox .rotatingBox {
  transform-style: preserve-3d;
  animation: round 20s linear infinite;
}

@keyframes round {
  0% {
    transform: perspective(1000px) rotateX(0deg) rotate(25deg);
  }

  100% {
    transform: perspective(1000px) rotateX(360deg) rotateZ(360deg) rotate(25deg);
  }
}

.containerRotatingBox .rotatingBox span {
  position: absolute;
  color: black; /* //white;    //-+warren */
  font-size: 3.5em;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 10px;
  line-height: 0.70em;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.25), transparent);
  transform-style: preserve-3d;
  text-shadow: 0 5px 15px rgba(1,1,1,1);
  transform: translate(-50%,-50%) rotateX(calc(var(--i)* 22.5deg)) translateZ(100px);
}

.containerRotatingBox .rotatingBox span i:nth-child(1) {
  font-style: initial;
  color: red;
}

.containerRotatingBox .rotatingBox span i:nth-child(2) {
  font-style: initial;
  color: yellow;
}

.containerRotatingBox .rotatingBox span i:nth-child(3) {
  font-style: initial;
  color: cyan;
}


/*
///////////////////////////////////////
// from https://stackoverflow.com/questions/79229486/rotating-text-around-a-circle-to-make-it-look-like-a-sphere
body { background: #343536; }
*/
.color-circle {
  /*position: relative;*/
  width: calc(var(--size) * 1em);
  aspect-ratio: 1;
  background-color: var(--bg);
  border-radius: 50%;
  margin: 1em;
  perspective: 220px;
  transform-style: preserve-3d;
  display: flex;

  .orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    background: #0006;
    width: 2px;
    height: calc(var(--size) / 2 * 1em + 1em);
    display: flex;
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    rotate: 1 0 0 90deg;
    /* animation: orbit 4s linear infinite;     -+warren*/
    animation: orbit var(--orbitTime) ease-in-out infinite;
    display: flex;

    .orbit-text {
      translate: -50% 50%;
      align-self: flex-end;
      /* white-space: nowrap; */
      rotate: -1 0 0 90deg;
      color: black;
      font-size: 1rem;
      font-weight: bold;
      /*text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);  -+warren */
      text-shadow: 0 0 5px rgba(1, 1, 1, 1);
    }
  }
}

@keyframes orbit {
  to {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}