/* spinner code */

.spinner{
    --boxsize : 30vw;
    --boxsize2 : 15vw;
}

.spinner > div {
    position: absolute;
    background: rgba(255,255,255,1);
    text-align: center;
}

.spinner .face1 { 
    transform: translateZ(var(--boxsize2));
}
.spinner .face2 { 
    transform: rotateY(90deg) translateZ(var(--boxsize2)); 
}
.spinner .face3 { 
    transform: rotateY(90deg) rotateX(90deg) translateZ(var(--boxsize2)); 
}
.spinner .face4 { 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(var(--boxsize2)); 
}
.spinner .face5 { 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(var(--boxsize2)); 
}
.spinner .face6 { 
    transform: rotateX(-90deg) translateZ(var(--boxsize2)); 
}

.spinner {
    animation: spincube 30s infinite;
    animation-timing-function: linear;
    transform-style: preserve-3d;
    transform-origin:var(--boxsize2) var(--boxsize2) 0;
    width: var(--boxsize);
    height: var(--boxsize);
}

.spinner > div > *{
    width: var(--boxsize);
    height: var(--boxsize);
    font-size: 6vw;
}

@keyframes spincube {
    8.33%     { transform: rotateX(30deg) rotateY(-90deg) rotateZ(90deg); }
    16.66%      { transform: rotateX(60deg) rotateY(-180deg) rotateZ(180deg); }
    25%      { transform: rotateX(90deg) rotateY(-270deg) rotateZ(270deg); }
    33.33%     { transform: rotateX(120deg) rotateY(-360deg) rotateZ(360deg); }
    41.66%      { transform: rotateX(150deg) rotateY(-450deg) rotateZ(450deg); }
    50%      { transform: rotateX(180deg) rotateY(-540deg) rotateZ(540deg); }
    58.33%      { transform: rotateX(210deg) rotateY(-630deg) rotateZ(630deg); }
    66.66%      { transform: rotateX(240deg) rotateY(-720deg) rotateZ(720deg); }
    75%      { transform: rotateX(270deg) rotateY(-810deg) rotateZ(810deg); }
    83.33%      { transform: rotateX(300deg) rotateY(-900deg) rotateZ(900deg); }
    91.66%      { transform: rotateX(330deg) rotateY(-990deg) rotateZ(990deg); }
    100%      { transform: rotateX(360deg) rotateY(-1080deg) rotateZ(1080deg); }
}

/* When the width is too small, the box is placed under the title, and the size is increased (relative to screen width) */
@media (max-width: 800px) {
    .spinner{
        --boxsize : 50vw;
        --boxsize2 : 25vw;
    }
    .mobilestack{
        grid-template-columns: 1fr;
    }
    .spinner > div > * {
        font-size: 12vw;
    }
}