:root {
  --panels_angleX: 90deg;
  --panels_angleZ: 45deg;
}

body {
  background-color: #21214b;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

.centurion {
  width: 700px;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
}


cylinder {
  width: 524px;
  height: 524px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  background-image: url('./tesseractCross.png');
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: inset 0px 0px 100px 5px rgba(255, 255, 255, 0.15);
  padding: 10px;
  z-index: 1;
  transform-style: preserve-3d;
  perspective-origin: center center;
  transform-origin: 50% 50%;
  perspective: 300000px;
  /*transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);*/
}
#cylinder_inbox {
  width: 502px;
  height: 502px;
  border: 0px dotted;
  margin: 0px;
  position: absolute;
  perspective-origin: center center;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transform: rotateY(45deg) rotateX(0deg) rotateZ(0deg);
}
.blocks {
  width: 189px;
  height: 189px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 152px;
  left: 250px;
  perspective-origin: center center;
  transform-origin: 0% 50%;
  transform-style: preserve-3d;
  transform: rotateX(-90deg);
  background-color: rgba(255, 255, 255, 0.01);
  box-shadow: 1px 1px 20px 1px rgba(255, 255, 255, 0.5);
}
#panel_0 {
  transform: rotateX(var(--panels_angleX)) rotateY(0deg) rotateZ(var(--panels_angleZ))
}
#panel_1 {
  transform: rotateX(var(--panels_angleX)) rotateY(10deg) rotateZ(var(--panels_angleZ))
}
#panel_2 {
  transform: rotateX(var(--panels_angleX)) rotateY(20deg) rotateZ(var(--panels_angleZ))
}
#panel_3 {
  transform: rotateX(var(--panels_angleX)) rotateY(30deg) rotateZ(var(--panels_angleZ))
}
#panel_4 {
  transform: rotateX(var(--panels_angleX)) rotateY(40deg) rotateZ(var(--panels_angleZ))
}
#panel_5 {
  transform: rotateX(var(--panels_angleX)) rotateY(50deg) rotateZ(var(--panels_angleZ))
}
#panel_6 {
  transform: rotateX(var(--panels_angleX)) rotateY(60deg) rotateZ(var(--panels_angleZ))
}
#panel_7 {
  transform: rotateX(var(--panels_angleX)) rotateY(70deg) rotateZ(var(--panels_angleZ))
}
#panel_8 {
  transform: rotateX(var(--panels_angleX)) rotateY(80deg) rotateZ(var(--panels_angleZ))
}
#panel_9 {
  transform: rotateX(var(--panels_angleX)) rotateY(90deg) rotateZ(var(--panels_angleZ))
}
#panel_10 {
  transform: rotateX(var(--panels_angleX)) rotateY(100deg) rotateZ(var(--panels_angleZ))
}
#panel_11 {
  transform: rotateX(var(--panels_angleX)) rotateY(110deg) rotateZ(var(--panels_angleZ))
}
#panel_12 {
  transform: rotateX(var(--panels_angleX)) rotateY(120deg) rotateZ(var(--panels_angleZ))
}
#panel_13 {
  transform: rotateX(var(--panels_angleX)) rotateY(130deg) rotateZ(var(--panels_angleZ))
}
#panel_14 {
  transform: rotateX(var(--panels_angleX)) rotateY(140deg) rotateZ(var(--panels_angleZ))
}
#panel_15 {
  transform: rotateX(var(--panels_angleX)) rotateY(150deg) rotateZ(var(--panels_angleZ))
}
#panel_16 {
  transform: rotateX(var(--panels_angleX)) rotateY(160deg) rotateZ(var(--panels_angleZ))
}
#panel_17 {
  transform: rotateX(var(--panels_angleX)) rotateY(170deg) rotateZ(var(--panels_angleZ))
}
#panel_18 {
  transform: rotateX(var(--panels_angleX)) rotateY(180deg) rotateZ(var(--panels_angleZ))
}
#panel_19 {
  transform: rotateX(var(--panels_angleX)) rotateY(190deg) rotateZ(var(--panels_angleZ))
}
#panel_20 {
  transform: rotateX(var(--panels_angleX)) rotateY(200deg) rotateZ(var(--panels_angleZ))
}
#panel_21 {
  transform: rotateX(var(--panels_angleX)) rotateY(210deg) rotateZ(var(--panels_angleZ))
}
#panel_22 {
  transform: rotateX(var(--panels_angleX)) rotateY(220deg) rotateZ(var(--panels_angleZ))
}
#panel_23 {
  transform: rotateX(var(--panels_angleX)) rotateY(230deg) rotateZ(var(--panels_angleZ))
}
#panel_24 {
  transform: rotateX(var(--panels_angleX)) rotateY(240deg) rotateZ(var(--panels_angleZ))
}
#panel_25 {
  transform: rotateX(var(--panels_angleX)) rotateY(250deg) rotateZ(var(--panels_angleZ))
}
#panel_26 {
  transform: rotateX(var(--panels_angleX)) rotateY(260deg) rotateZ(var(--panels_angleZ))
}
#panel_27 {
  transform: rotateX(var(--panels_angleX)) rotateY(270deg) rotateZ(var(--panels_angleZ))
}
#panel_28 {
  transform: rotateX(var(--panels_angleX)) rotateY(280deg) rotateZ(var(--panels_angleZ))
}
#panel_29 {
  transform: rotateX(var(--panels_angleX)) rotateY(290deg) rotateZ(var(--panels_angleZ))
}
#panel_30 {
  transform: rotateX(var(--panels_angleX)) rotateY(300deg) rotateZ(var(--panels_angleZ))
}
#panel_31 {
  transform: rotateX(var(--panels_angleX)) rotateY(310deg) rotateZ(var(--panels_angleZ))
}
#panel_32 {
  transform: rotateX(var(--panels_angleX)) rotateY(320deg) rotateZ(var(--panels_angleZ))
}
#panel_33 {
  transform: rotateX(var(--panels_angleX)) rotateY(330deg) rotateZ(var(--panels_angleZ))
}
#panel_34 {
  transform: rotateX(var(--panels_angleX)) rotateY(340deg) rotateZ(var(--panels_angleZ))
}
#panel_35 {
  transform: rotateX(var(--panels_angleX)) rotateY(350deg) rotateZ(var(--panels_angleZ))
}

.cylinder-radius {
  animation-duration: 25s;
  animation-direction: normal;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-name: morphing;
}

.cylinderrotate {
  animation-duration: 25s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: cylinderrotate;
}

/*
@keyframes cylinderrotate {
  0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)}
  33% {transform: rotateX(120deg) rotateY(120deg) rotateZ(120deg)}
  66% {transform: rotateX(240deg) rotateY(240deg) rotateZ(240deg)}
  99% {transform: rotateX(1deg) rotateY(1deg) rotateZ(1deg)}
}
*/

@keyframes cylinderrotate {
  from {transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg)}
  to {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg)}
}


@keyframes morphing {
  0% {
    border-radius: 0% 0% 0% 0% / 25% 25% 25% 25%
  }
  25% {
    border-radius: 50% 50% 50% 50% / 75% 75% 75% 75%
  }
  50% {
    border-radius: 100% 100% 100% 100% / 75% 75% 75% 75%
  }
  75% {
    border-radius: 50% 50% 50% 50% / 0% 0% 0% 0%
  }
}