#tadbir {
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 800px;
    overflow: visible;
}

#tadbir * {
    transform-style: preserve-3d;
}

.scene {
    /*position: relative;*/
    /*top: -20px;*/
    /*right: 50%;*/
    transform: rotateX(-30deg) rotateY(-60deg);
    font-size: 60px;
    animation: sceneRotate 60s infinite linear;
}

@keyframes sceneRotate {
    from {
        transform: rotateX(-30deg) rotateY(0deg);
    }
    to {
        transform: rotateX(-30deg) rotateY(360deg);
    }
}

.column {
    position: absolute;
    transform: rotateY(var(--ry)) translateX(2.8em);
}

.column:nth-child(1) {
    --ry: 0deg;
}

.column:nth-child(1) .box {
    animation: boxRotate0 12s var(--delay) infinite ease-in-out, boxTop0 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate0 {
    0%, 4% {
        rotate: 0.25turn;
    }
    10.28%, 12.96%, 16.18%, 20%, 22.78% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    10.28%, 12.96%, 16.18%, 20%, 22.78% {
        rotate: 0turn;
    }
    26.82%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop0 {
    0%, 4% {
        top: 0;
    }
    10.28% {
        top: -1em;
    }
    12.96% {
        top: -2em;
    }
    16.18% {
        top: -3em;
    }
    20% {
        top: -4em;
    }
    22.78% {
        top: -5em;
    }
}

.column:nth-child(2) {
    --ry: 30deg;
}

.column:nth-child(2) .box {
    animation: boxRotate1 12s var(--delay) infinite ease-in-out, boxTop1 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate1 {
    0%, 32% {
        rotate: 0.25turn;
    }
    38.16%, 41.14%, 44.04%, 47.16%, 50.44% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    38.16%, 41.14%, 44.04%, 47.16%, 50.44% {
        rotate: 0turn;
    }
    58.24%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop1 {
    0%, 32% {
        top: 0;
    }
    38.16% {
        top: -1em;
    }
    41.14% {
        top: -2em;
    }
    44.04% {
        top: -3em;
    }
    47.16% {
        top: -4em;
    }
    50.44% {
        top: -5em;
    }
}

.column:nth-child(3) {
    --ry: 60deg;
}

.column:nth-child(3) .box {
    animation: boxRotate2 12s var(--delay) infinite ease-in-out, boxTop2 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate2 {
    0%, 17.2% {
        rotate: 0.25turn;
    }
    21.24%, 24.86%, 28.64%, 32.34%, 34.8% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    21.24%, 24.86%, 28.64%, 32.34%, 34.8% {
        rotate: 0turn;
    }
    42.36%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop2 {
    0%, 17.2% {
        top: 0;
    }
    21.24% {
        top: -1em;
    }
    24.86% {
        top: -2em;
    }
    28.64% {
        top: -3em;
    }
    32.34% {
        top: -4em;
    }
    34.8% {
        top: -5em;
    }
}

.column:nth-child(4) {
    --ry: 90deg;
}

.column:nth-child(4) .box {
    animation: boxRotate3 12s var(--delay) infinite ease-in-out, boxTop3 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate3 {
    0%, 24% {
        rotate: 0.25turn;
    }
    31.28%, 33.92%, 36.14%, 39.9%, 42.76% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    31.28%, 33.92%, 36.14%, 39.9%, 42.76% {
        rotate: 0turn;
    }
    47.96%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop3 {
    0%, 24% {
        top: 0;
    }
    31.28% {
        top: -1em;
    }
    33.92% {
        top: -2em;
    }
    36.14% {
        top: -3em;
    }
    39.9% {
        top: -4em;
    }
    42.76% {
        top: -5em;
    }
}

.column:nth-child(5) {
    --ry: 120deg;
}

.column:nth-child(5) .box {
    animation: boxRotate4 12s var(--delay) infinite ease-in-out, boxTop4 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate4 {
    0%, 9.6% {
        rotate: 0.25turn;
    }
    16.88%, 20.28%, 24.24%, 26.92%, 29.28% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    16.88%, 20.28%, 24.24%, 26.92%, 29.28% {
        rotate: 0turn;
    }
    35.12%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop4 {
    0%, 9.6% {
        top: 0;
    }
    16.88% {
        top: -1em;
    }
    20.28% {
        top: -2em;
    }
    24.24% {
        top: -3em;
    }
    26.92% {
        top: -4em;
    }
    29.28% {
        top: -5em;
    }
}

.column:nth-child(6) {
    --ry: 150deg;
}

.column:nth-child(6) .box {
    animation: boxRotate5 12s var(--delay) infinite ease-in-out, boxTop5 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate5 {
    0%, 5.2% {
        rotate: 0.25turn;
    }
    12.24%, 14.9%, 18.36%, 21.72%, 24.22% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    12.24%, 14.9%, 18.36%, 21.72%, 24.22% {
        rotate: 0turn;
    }
    30.38%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop5 {
    0%, 5.2% {
        top: 0;
    }
    12.24% {
        top: -1em;
    }
    14.9% {
        top: -2em;
    }
    18.36% {
        top: -3em;
    }
    21.72% {
        top: -4em;
    }
    24.22% {
        top: -5em;
    }
}

.column:nth-child(7) {
    --ry: 180deg;
}

.column:nth-child(7) .box {
    animation: boxRotate6 12s var(--delay) infinite ease-in-out, boxTop6 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate6 {
    0%, 4.8% {
        rotate: 0.25turn;
    }
    12.12%, 14.28%, 18.08%, 20.62%, 23.26% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    12.12%, 14.28%, 18.08%, 20.62%, 23.26% {
        rotate: 0turn;
    }
    29.54%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop6 {
    0%, 4.8% {
        top: 0;
    }
    12.12% {
        top: -1em;
    }
    14.28% {
        top: -2em;
    }
    18.08% {
        top: -3em;
    }
    20.62% {
        top: -4em;
    }
    23.26% {
        top: -5em;
    }
}

.column:nth-child(8) {
    --ry: 210deg;
}

.column:nth-child(8) .box {
    animation: boxRotate7 12s var(--delay) infinite ease-in-out, boxTop7 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate7 {
    0%, 17.2% {
        rotate: 0.25turn;
    }
    24.52%, 27.38%, 29.82%, 32.76%, 36.34% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    24.52%, 27.38%, 29.82%, 32.76%, 36.34% {
        rotate: 0turn;
    }
    42.66%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop7 {
    0%, 17.2% {
        top: 0;
    }
    24.52% {
        top: -1em;
    }
    27.38% {
        top: -2em;
    }
    29.82% {
        top: -3em;
    }
    32.76% {
        top: -4em;
    }
    36.34% {
        top: -5em;
    }
}

.column:nth-child(9) {
    --ry: 240deg;
}

.column:nth-child(9) .box {
    animation: boxRotate8 12s var(--delay) infinite ease-in-out, boxTop8 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate8 {
    0%, 18% {
        rotate: 0.25turn;
    }
    24.12%, 27.06%, 29.96%, 33.18%, 36.1% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    24.12%, 27.06%, 29.96%, 33.18%, 36.1% {
        rotate: 0turn;
    }
    42.06%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop8 {
    0%, 18% {
        top: 0;
    }
    24.12% {
        top: -1em;
    }
    27.06% {
        top: -2em;
    }
    29.96% {
        top: -3em;
    }
    33.18% {
        top: -4em;
    }
    36.1% {
        top: -5em;
    }
}

.column:nth-child(10) {
    --ry: 270deg;
}

.column:nth-child(10) .box {
    animation: boxRotate9 12s var(--delay) infinite ease-in-out, boxTop9 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate9 {
    0%, 26% {
        rotate: 0.25turn;
    }
    32.84%, 34.96%, 37.76%, 40.82%, 44.72% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    32.84%, 34.96%, 37.76%, 40.82%, 44.72% {
        rotate: 0turn;
    }
    49.76%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop9 {
    0%, 26% {
        top: 0;
    }
    32.84% {
        top: -1em;
    }
    34.96% {
        top: -2em;
    }
    37.76% {
        top: -3em;
    }
    40.82% {
        top: -4em;
    }
    44.72% {
        top: -5em;
    }
}

.column:nth-child(11) {
    --ry: 300deg;
}

.column:nth-child(11) .box {
    animation: boxRotate10 12s var(--delay) infinite ease-in-out, boxTop10 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate10 {
    0%, 12% {
        rotate: 0.25turn;
    }
    16.8%, 18.96%, 21.7%, 25%, 29% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    16.8%, 18.96%, 21.7%, 25%, 29% {
        rotate: 0turn;
    }
    34%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop10 {
    0%, 12% {
        top: 0;
    }
    16.8% {
        top: -1em;
    }
    18.96% {
        top: -2em;
    }
    21.7% {
        top: -3em;
    }
    25% {
        top: -4em;
    }
    29% {
        top: -5em;
    }
}

.column:nth-child(12) {
    --ry: 330deg;
}

.column:nth-child(12) .box {
    animation: boxRotate11 12s var(--delay) infinite ease-in-out, boxTop11 12s var(--delay) infinite step-end, boxTranslate 12s var(--delay) infinite linear;
}

@keyframes boxRotate11 {
    0%, 12% {
        rotate: 0.25turn;
    }
    19.4%, 21.58%, 25.48%, 28.56%, 30.88% {
        rotate: -0.25turn;
        animation-timing-function: step-end;
    }
    19.4%, 21.58%, 25.48%, 28.56%, 30.88% {
        rotate: 0turn;
    }
    37.52%, 100% {
        rotate: -0.5turn;
    }
}

@keyframes boxTop11 {
    0%, 12% {
        top: 0;
    }
    19.4% {
        top: -1em;
    }
    21.58% {
        top: -2em;
    }
    25.48% {
        top: -3em;
    }
    28.56% {
        top: -4em;
    }
    30.88% {
        top: -5em;
    }
}

.box {
    position: absolute;
    width: 1em;
    height: 1em;
    transform-origin: top left;
}

.box:nth-child(1) {
    --delay: 0s;
}

.box:nth-child(2) {
    --delay: -2s;
}

.box:nth-child(3) {
    --delay: -4s;
}

.box:nth-child(4) {
    --delay: -6s;
}

.box:nth-child(5) {
    --delay: -8s;
}

.box:nth-child(6) {
    --delay: -10s;
}

@keyframes boxTranslate {
    from {
        translate: 0 1em;
    }
    to {
        translate: 0 7em;
    }
}

.box i {
    --gap: 0.05em;
    position: absolute;
    inset: var(--gap);
    background-color: rgba(0, 0, 0, 0.8666666667);
    border: 2px dodgerblue solid;
    box-shadow: 0 0 0.5em dodgerblue inset;
}

.box i:nth-child(1) {
    transform: translateZ(calc(0.5em - var(--gap)));
}

.box i:nth-child(2) {
    transform: rotateY(90deg) translateZ(calc(0.5em - var(--gap)));
}

.box i:nth-child(3) {
    transform: rotateY(180deg) translateZ(calc(0.5em - var(--gap)));
}

.box i:nth-child(4) {
    transform: rotateY(270deg) translateZ(calc(0.5em - var(--gap)));
}

.box i:nth-child(5) {
    transform: rotateX(270deg) translateZ(calc(0.5em - var(--gap)));
}

.box i:nth-child(6) {
    transform: rotateX(90deg) translateZ(calc(0.5em - var(--gap)));
}

/*# sourceMappingURL=tadbir.css.map */