html {
  background: #cc0000;
  color: white;
  min-height: 100%;
  min-width: 100%;
  display: grid;
  align-content: center;
  justify-content: center;
  overflow: hidden;
}

body {
  font-family: "Syne", sans-serif;
}

.box#top {
  z-index: 1;
  transform: translateY(-3em) rotateX(60deg) rotateY(-170deg) rotateZ(90deg);
  animation: rotationTop infinite forwards 10s linear normal;
}
.box#top .fond {
  transform: translateZ(-1.9em);
  border: solid 2px;
  background: gold;
}

.box#bottom {
  transform: translateY(3em) rotateX(60deg) rotateY(-190deg) rotateZ(0deg);
  animation: rotationBottom infinite forwards 10s linear normal;
}
.box#bottom .fond {
  transform: translateZ(1.9em);
}

.box {
  font-size: 4vmin;
  width: 0em;
  height: 0em;
  color: black;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.box .fond {
  position: absolute;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: black;
  transition: all 0.5s;
  box-sizing: border-box;
}
.box span {
  transform-style: preserve-3d;
  width: 1.6em;
  text-align: center;
  height: 4em;
  line-height: 4em;
  backface-visibility: visible;
  background: white;
  color: black;
  border-top: solid 2px;
  border-bottom: solid 2px;
  display: block;
  position: absolute;
  box-sizing: border-box;
  transition: all 0.5s;
  display: block;
}
.box span:after {
  position: absolute;
  content: "";
  top: 0em;
  backface-visibility: hidden;
  right: 0;
  bottom: 0em;
  left: 0;
  background: black;
  transform: translate3D(0, 0, -1px) rotateY(180deg);
  margin: 0;
  border: solid 3px white;
  display: block;
}
.box span:nth-child(1) {
  top: -7.8637847975em;
  left: 1.4699961425em;
  transform: translate(-50%, -50%) rotateZ(10.5882352941deg) rotateX(90deg);
}
.box span:nth-child(2) {
  top: -7.4597778352em;
  left: 2.8899333295em;
  transform: translate(-50%, -50%) rotateZ(21.1764705882deg) rotateX(90deg);
}
.box span:nth-child(3) {
  top: -6.8017370858em;
  left: 4.211457303em;
  transform: translate(-50%, -50%) rotateZ(31.7647058824deg) rotateX(90deg);
}
.box span:nth-child(4) {
  top: -5.9120713378em;
  left: 5.3895651492em;
  transform: translate(-50%, -50%) rotateZ(42.3529411765deg) rotateX(90deg);
}
.box span:nth-child(5) {
  top: -4.821077091em;
  left: 6.3841378182em;
  transform: translate(-50%, -50%) rotateZ(52.9411764706deg) rotateX(90deg);
}
.box span:nth-child(6) {
  top: -3.5659068462em;
  left: 7.1613063308em;
  transform: translate(-50%, -50%) rotateZ(63.5294117647deg) rotateX(90deg);
}
.box span:nth-child(7) {
  top: -2.1893039206em;
  left: 7.6946051454em;
  transform: translate(-50%, -50%) rotateZ(74.1176470588deg) rotateX(90deg);
}
.box span:nth-child(8) {
  top: -0.7381468757em;
  left: 7.9658734104em;
  transform: translate(-50%, -50%) rotateZ(84.7058823529deg) rotateX(90deg);
}
.box span:nth-child(9) {
  top: 0.7381468757em;
  left: 7.9658734104em;
  transform: translate(-50%, -50%) rotateZ(95.2941176471deg) rotateX(90deg);
}
.box span:nth-child(10) {
  top: 2.1893039206em;
  left: 7.6946051454em;
  transform: translate(-50%, -50%) rotateZ(105.8823529412deg) rotateX(90deg);
}
.box span:nth-child(11) {
  top: 3.5659068462em;
  left: 7.1613063308em;
  transform: translate(-50%, -50%) rotateZ(116.4705882353deg) rotateX(90deg);
}
.box span:nth-child(12) {
  top: 4.821077091em;
  left: 6.3841378182em;
  transform: translate(-50%, -50%) rotateZ(127.0588235294deg) rotateX(90deg);
}
.box span:nth-child(13) {
  top: 5.9120713378em;
  left: 5.3895651492em;
  transform: translate(-50%, -50%) rotateZ(137.6470588235deg) rotateX(90deg);
}
.box span:nth-child(14) {
  top: 6.8017370858em;
  left: 4.211457303em;
  transform: translate(-50%, -50%) rotateZ(148.2352941176deg) rotateX(90deg);
}
.box span:nth-child(15) {
  top: 7.4597778352em;
  left: 2.8899333295em;
  transform: translate(-50%, -50%) rotateZ(158.8235294118deg) rotateX(90deg);
}
.box span:nth-child(16) {
  top: 7.8637847975em;
  left: 1.4699961425em;
  transform: translate(-50%, -50%) rotateZ(169.4117647059deg) rotateX(90deg);
}
.box span:nth-child(17) {
  top: 8em;
  left: 0em;
  transform: translate(-50%, -50%) rotateZ(180deg) rotateX(90deg);
}
.box span:nth-child(18) {
  top: 7.8637847975em;
  left: -1.4699961425em;
  transform: translate(-50%, -50%) rotateZ(190.5882352941deg) rotateX(90deg);
}
.box span:nth-child(19) {
  top: 7.4597778352em;
  left: -2.8899333295em;
  transform: translate(-50%, -50%) rotateZ(201.1764705882deg) rotateX(90deg);
}
.box span:nth-child(20) {
  top: 6.8017370858em;
  left: -4.211457303em;
  transform: translate(-50%, -50%) rotateZ(211.7647058824deg) rotateX(90deg);
}
.box span:nth-child(21) {
  top: 5.9120713378em;
  left: -5.3895651492em;
  transform: translate(-50%, -50%) rotateZ(222.3529411765deg) rotateX(90deg);
}
.box span:nth-child(22) {
  top: 4.821077091em;
  left: -6.3841378182em;
  transform: translate(-50%, -50%) rotateZ(232.9411764706deg) rotateX(90deg);
}
.box span:nth-child(23) {
  top: 3.5659068462em;
  left: -7.1613063308em;
  transform: translate(-50%, -50%) rotateZ(243.5294117647deg) rotateX(90deg);
}
.box span:nth-child(24) {
  top: 2.1893039206em;
  left: -7.6946051454em;
  transform: translate(-50%, -50%) rotateZ(254.1176470588deg) rotateX(90deg);
}
.box span:nth-child(25) {
  top: 0.7381468757em;
  left: -7.9658734104em;
  transform: translate(-50%, -50%) rotateZ(264.7058823529deg) rotateX(90deg);
}
.box span:nth-child(26) {
  top: -0.7381468757em;
  left: -7.9658734104em;
  transform: translate(-50%, -50%) rotateZ(275.2941176471deg) rotateX(90deg);
}
.box span:nth-child(27) {
  top: -2.1893039206em;
  left: -7.6946051454em;
  transform: translate(-50%, -50%) rotateZ(285.8823529412deg) rotateX(90deg);
}
.box span:nth-child(28) {
  top: -3.5659068462em;
  left: -7.1613063308em;
  transform: translate(-50%, -50%) rotateZ(296.4705882353deg) rotateX(90deg);
}
.box span:nth-child(29) {
  top: -4.821077091em;
  left: -6.3841378182em;
  transform: translate(-50%, -50%) rotateZ(307.0588235294deg) rotateX(90deg);
}
.box span:nth-child(30) {
  top: -5.9120713378em;
  left: -5.3895651492em;
  transform: translate(-50%, -50%) rotateZ(317.6470588235deg) rotateX(90deg);
}
.box span:nth-child(31) {
  top: -6.8017370858em;
  left: -4.211457303em;
  transform: translate(-50%, -50%) rotateZ(328.2352941176deg) rotateX(90deg);
}
.box span:nth-child(32) {
  top: -7.4597778352em;
  left: -2.8899333295em;
  transform: translate(-50%, -50%) rotateZ(338.8235294118deg) rotateX(90deg);
}
.box span:nth-child(33) {
  top: -7.8637847975em;
  left: -1.4699961425em;
  transform: translate(-50%, -50%) rotateZ(349.4117647059deg) rotateX(90deg);
}
.box span:nth-child(34) {
  top: -8em;
  left: 0em;
  transform: translate(-50%, -50%) rotateZ(360deg) rotateX(90deg);
}

@keyframes rotationTop {
  from {
    transform: translateY(-3em) rotateX(60deg) rotateY(-170deg) rotateZ(0deg);
  }
  to {
    transform: translateY(-3em) rotateX(60deg) rotateY(-170deg) rotateZ(-360deg);
  }
}
@keyframes rotationBottom {
  from {
    transform: translateY(3em) rotateX(60deg) rotateY(-190deg) rotateZ(0deg);
  }
  to {
    transform: translateY(3em) rotateX(60deg) rotateY(-190deg) rotateZ(360deg);
  }
}