:root
{       
        --GRADIENT_RAINBOW_ROAD_COLOR_LIST:     Violet, Indigo, Blue, Green, Yellow, Orange, Red;      
        /* --GRADIENT_RAINBOW_ROAD_COLOR_LIST:    blue, yellow, white, yellow, blue;   */
        --TRANSITION_DURATION:5s;
        --TRANSITION_DELAY:1s;
}
.plane
{        
        transform-style:preserve-3d;
        scale:.45;        
        position:absolute;
        top:340px;
        left:450px;
        width:100px;
        height:100px;
        
        transform-style: preserve-3d;
        transform:scaleZ(.5);
        
        transition:             var(--TRANSITION_DURATION);   
        transition-delay:       var(--TRANSITION_DELAY);    
        
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); 

        animation-name:
                plane_rotate3d_animation,
                plane_roll_animation, 
                plane_yaw_animation, 
                plane_pitch_animation,
                
                plane_rotate3d_animation;
        animation-duration:     3.5s,   7.5s,   7.5s,   7.75s,  5s;
        animation-delay:        0s,     6.75s,  15.00s, 23.75s, 32.5s;  
        animation-iteration-count:1, 1, 1, 1, 1;
}
.cube 
{
        position:absolute; 
        width:200px; 
        height:200px; 
        
        transform-style:preserve-3d;
        transition:var(--TRANSITION_DURATION); 
        transition-delay:var(--TRANSITION_DELAY);  
        
        transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);  
}

.face                          
{ 
        position:absolute; 
        width:100%;
        height:100%;
        opacity:35%; 
        box-shadow: 2px 2px 1px silver, 1px 1px 36px inset silver;
        transition:             var(--TRANSITION_DURATION);
        transition-delay:       var(--TRANSITION_DELAY);  
}

.cube .face:nth-of-type(1)          { background-color: transparent;                     transform: rotateY(0deg)        translateZ(100px); }
.cube .face:nth-of-type(2)          { background-color: transparent;                     transform: rotateY(90deg)       translateZ(100px); } 
.cube .face:nth-of-type(3)          { background-color: rgba(0 255 0 /25);        transform: rotateY(180deg)      translateZ(100px); } 
.cube .face:nth-of-type(4)          { background-color: transparent;                     transform: rotateY(-90deg)      translateZ(100px); } 
.cube .face:nth-of-type(5)          { background-color: transparent;                     transform: rotateX(90deg)       translateZ(100px); } 
.cube .face:nth-of-type(6)          { background-color: transparent;                     transform: rotateX(-90deg)      translateZ(100px); }
 
.plane > .face
{
        background:none;
        box-shadow: none;        
}

.plane .cube 
{ 
        transform-style: preserve-3d;
}

.plane .cube .face 
{
        background:linear-gradient(90deg, var(--GRADIENT_RAINBOW_ROAD_COLOR_LIST)); 
}

.plane .cube:after
{
        position:absolute;
        left:0;
        top:0;
}

.plane > .cube:nth-of-type(1)
{
        position:absolute;
        left:-630px;

        rotate:-30deg;
        scale: 2.7 .25 2.3;
}

.plane > .cube:nth-of-type(1) .cube
{
        position:absolute;
        top:0;
        left:0;

        transform-origin:bottom;
        scale:.75 .05 0.2;
        transform:translateX(0px) translateY(0px) translateZ(-668px) rotateX(70deg);
}

.plane > .cube:nth-of-type(2)
{
        position:absolute;
        left:630px;

        rotate:30deg;
        scale: 2.7 .25 2.3;
}

.plane > .cube:nth-of-type(2) .cube
{
        position:absolute;
        top:0;
        left:0;

        transform-origin:bottom;
        scale:.75 .05 0.2;
        transform:translateY(100px) translateZ(-668px) rotateX(70deg);
}

.plane > .cube:nth-of-type(3)
{
        position:absolute;
        left:0;
        top:0;

        width:100%;
        height:100%;

        translate: 0 -362px -88px;
        scale: .11 1.25 .3;
}

.plane > .cube:nth-of-type(4) 
{
        position:absolute;
        left:0;
        top:100px;

        width:100%;
        height:100%;

        translate: 0 300px -788px;
        rotate: 90deg;
        scale: .11 2.25 1.3;
}

.plane > .cube:nth-of-type(5) 
{
        position:absolute;
        left:0;
        top:-278px;

        width:100%;
        height:100%;

        translate: 0 362px -88px;
        scale: 1.1 1.25 5;
}

.plane > .cube:nth-of-type(5) .face
{        
        background:linear-gradient(90deg, var(--GRADIENT_RAINBOW_ROAD_COLOR_LIST));
}

.plane > .cube:nth-of-type(5):before
{        
        background:linear-gradient(90deg, var(--GRADIENT_RAINBOW_ROAD_COLOR_LIST));
        border-radius:130px; 
}

@keyframes plane_roll_animation
{
        0% { transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100% {  transform:rotateX(0deg) rotateY(0deg) rotateZ(360deg); }
}

@keyframes plane_yaw_animation
{
        0% { transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100% {  transform:rotateX(0deg) rotateY(-360deg) rotateZ(0deg); }
}

@keyframes plane_pitch_animation
{
        0% { transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
        100% {  transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg); }
}

@keyframes plane_rotate3d_animation
{
        0% { transform:rotate3d(0, 0, 0, 0deg); }
        0% { transform:rotate3d(1, 1, 0,  -360deg); }
        /* 0% { transform:rotate3d(1, 1, 0,  360deg); } */
}


.plane.storage
{
        /* outline:3px solid green; */
        
        position:absolute;
        /* top:385px;
        left:710px;
        width:100px;
        height:100px; */
        transform:scaleZ(.5);

        
        transition:var(--TRANSITION_DURATION);
        transition-delay:var(--TRANSITION_DELAY);

        animation:none;
}

.plane.storage > .cube:nth-of-type(1),
.plane.storage > .cube:nth-of-type(2),
.plane.storage > .cube:nth-of-type(3),
.plane.storage > .cube:nth-of-type(4),
.plane.storage > .cube:nth-of-type(5)
{
        /* border:32px solid green; */
        border:none;

        position:absolute;
        top:0px;
        left:0px;
        width:100px;
        height:100px;

        scale: none;
        /* 2.7 .25 2.3; */
        rotate:0deg;
        translate:none;


        
        /* border-radius:50%; */

}
.plane.storage > .cube:nth-of-type(1) .cube,
.plane.storage > .cube:nth-of-type(2) .cube
{
        position:absolute;
        top:0;
        left:0;
        transform-origin:bottom;
        scale:none;
        transform:translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg);
        /* transform:skew(10deg); */
}

.plane.storage > .cube:nth-of-type(1) .cube .face,
.plane.storage > .cube:nth-of-type(2) .cube .face
{
        position:absolute;
        top:0;
        left:0;

        width:0px;
        height:0px;
        transform-origin:bottom;
        scale:.75 .05 0.2;
        transform:translateX(0px) translateY(0px) translateZ(-168px) rotateX(70deg);
        /* transform:skew(10deg); */
}